@charset "UTF-8";
/*!
 * Weel savings & ROI calculator — v8
 * ---------------------------------------------------------------------------
 * Upload this file to Webflow (Assets), then paste the URL it gives you into
 * the <link> at the top of roi-calc-embed.html.
 *
 * Self-contained: it replaces roi-calc-v7.css entirely and shares no selectors
 * with the rest of the site — every rule is scoped under .wroi-page.
 * Look and feel follows the Claude Design canvas.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
   Weel ROI calculator
   Tokens follow the Weel design system: Aeonik, near-black surfaces,
   teal + acid lime accents, 16px radii, flat with almost no shadow.
   ========================================================================= */
.wroi-page{
  --w-lime:#CAEE10;
  --w-teal:#407A7D;
  --w-deep:#0D3D4B;
  --w-soft:#A1CBC2;

  --w-ink:#1a1a1a;          /* primary text */
  --w-ink-2:#666666;        /* secondary text */
  --w-ink-3:#8a8580;        /* warm muted — labels, ticks, sub-lines */

  /* Transparent: the Webflow .roi-calculator section supplies the background.
     Put a colour here to give the widget its own ground again. */
  --w-bg:transparent;
  --w-white:#ffffff;
  --w-panel:#1a1a1a;        /* dark hero + CTA */
  --w-tint:#FAFAFA;         /* inset field group */
  --w-comp:#F4FAFB;         /* comprehensive pane */

  --w-line:#E5EEF0;
  --w-line-2:#ECEFF1;
  --w-comp-line:#E2F2F2;

  --w-r:16px;
  --w-r-sm:8px;
  --w-r-full:999px;
  --w-ease:cubic-bezier(.16,1,.3,1);

  font-family:Aeonik,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--w-ink);
  background:var(--w-bg);
  /* Sits inside the .roi-calculator section, below the Hero Smple component —
     so this only needs breathing room from the hero, not clearance for the
     overlaid nav. Tune this one line if the gap under the hero looks wrong. */
  padding:48px 48px 88px;
  display:block;
  position:relative;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wroi-page *,.wroi-page *::before,.wroi-page *::after{box-sizing:inherit}
/* :where() so the reset carries no specificity. A plain `.wroi-page p` rule
   outranks any single-class component rule and silently eats its margins. */
.wroi-page :where(h1,h2,h3,p,ul,li){margin:0}
.wroi-page :where(ul){padding:0;list-style:none}
.wroi-num{font-variant-numeric:tabular-nums}

@media(max-width:991px){.wroi-page{padding:40px 20px 64px}}
@media(max-width:600px){.wroi-page{padding:32px 16px 56px}}

/* The shell widens when the comprehensive pane appears, so the input card
   keeps its column width instead of squeezing. This is the transition that
   carries the open/close: the card grows into the extra width while the pane
   fades and slides into it. If it is ever interrupted the shell simply lands
   narrower — tighter, never broken. */
.wroi-shell{
  max-width:1344px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:48px;
  transition:max-width .45s var(--w-ease);
}
.wroi.is-advanced .wroi-shell,
.wroi-shell.is-advanced{max-width:1760px}

/* The intro/hero styles that used to live here are gone: the page's own
   Hero Smple component supplies the heading above this embed. */

/* ------------------------------------------------------------------- grid */

.wroi{display:block;position:relative}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:32px;align-items:stretch}
@media(max-width:1400px){.wgrid{grid-template-columns:minmax(0,1fr) 380px}}
@media(max-width:1080px){.wgrid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ input card */

.wcard{
  background:var(--w-white);
  border:1px solid var(--w-line);
  border-radius:var(--w-r);
  padding:0 36px 12px;
}
@media(max-width:600px){.wcard{padding:0 20px 12px}}

.wcard-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px 32px;flex-wrap:wrap;padding:32px 0 28px;
}
.wcard-title{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:min-content}
/* Keeps the two controls on one row together. Without the wrapper they wrap
   one at a time, stranding the plan control on a row of its own. */
.wcard-toggles{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;flex:0 1 auto}
.wcard-title b{font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.wcard-title span{font-size:13px;color:var(--w-ink-3)}

/* ---------------------------------------------------------- segmented pills */

.wseg-wrap{display:flex;flex-direction:column;gap:8px;flex:none}
.wseg-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--w-ink-3);white-space:nowrap;
}
.wseg{
  position:relative;display:flex;gap:4px;
  background:var(--w-tint);border:1px solid var(--w-line-2);
  border-radius:var(--w-r-full);padding:4px;
}
/* Geometry comes from the measured button in syncPills(); only the motion
   is declared here. */
.wseg-pill{
  position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;
  border-radius:var(--w-r-full);pointer-events:none;
  transition:transform .28s var(--w-ease),width .28s var(--w-ease);
}
#wmodes .wseg-pill{background:var(--w-teal)}
#wplans .wseg-pill{background:var(--w-lime)}
.wseg button{
  position:relative;z-index:1;font:inherit;border:0;background:transparent;
  cursor:pointer;padding:9px 16px;border-radius:var(--w-r-full);
  font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:var(--w-ink-2);transition:color .25s ease;
}
#wmodes button.is-active{color:#fff}
#wplans button.is-active{color:var(--w-deep)}
.wseg button:focus-visible{outline:2px solid var(--w-teal);outline-offset:2px}

/* Buy width back from the buttons before letting the two controls stack —
   this keeps them side by side, under the title, down to about 480px.
   Must sit after the .wseg rules above: same specificity, so source order
   decides. */
@media(max-width:620px){
  .wcard-toggles{gap:12px}
  .wseg{gap:2px}
  .wseg button{padding:9px 11px;font-size:12px}
}
/* Narrower than this they genuinely will not fit side by side, so let them
   stack — full width each, which reads as deliberate rather than as a wrap.
   Set to meet the side-by-side state exactly: at 520px the pair still has
   ~36px to spare, and by ~490px it has none, so there is no band where they
   wrap at their natural width. */
@media(max-width:519px){
  .wcard-toggles{gap:16px;width:100%}
  .wseg-wrap{flex:1 1 100%}
  .wseg{width:100%}
  .wseg button{flex:1 1 0;padding:10px 8px}
}

/* ------------------------------------------------------------------ panes */

.wpanes{display:flex;align-items:flex-start;gap:16px}

.wpane{
  flex:1 1 0;min-width:0;align-self:stretch;
  background:var(--w-tint);border:1px solid var(--w-line-2);
  border-radius:var(--w-r);padding:8px 24px 20px;
}
@media(max-width:600px){.wpane{padding:8px 16px 16px}}

/* The box itself (flex, width, height, padding) is never interpolated — it
   lands in one step, so layout never depends on a transition having advanced.
   Only opacity and transform animate.
     opening — the box is restored at once, the card widens, and the pane
               fades and slides into the space that opens up;
     closing — .is-closing holds the box open while the pane fades and slides
               out; the script drops the box afterwards and the card closes up.
   The hold has to be sequenced in the script: width and height cannot be
   transitioned away from `auto`, so a CSS delay on them does nothing. */
.wpane--comp{background:var(--w-comp);overflow:hidden}

/* Collapsed, the pane must take up no horizontal space at all — otherwise the
   flex gap and its own 1px borders leave ~18px of dead space to the right of
   the basic pane, which reads as uneven padding inside the card. */
.wroi:not(.is-advanced) .wpanes{gap:0}
.wroi:not(.is-advanced) .wpane--comp{
  flex:0 0 0;width:0;max-width:0;height:0;
  opacity:0;transform:translateX(-56px);
  border-width:0;border-color:transparent;padding:0;margin-left:0;
  pointer-events:none;
}
.wroi.is-advanced .wpane--comp{
  opacity:1;transform:translateX(0);
  border-color:var(--w-comp-line);margin-left:8px;
  transition:
    opacity .32s ease .1s,
    transform .45s var(--w-ease) .06s,
    border-color .32s ease .1s;
}
.wroi.is-advanced.is-closing .wpane--comp{
  opacity:0;transform:translateX(-56px);
  border-color:transparent;pointer-events:none;
  transition:
    opacity .26s ease,
    transform .4s var(--w-ease),
    border-color .26s ease;
}
@media(max-width:1400px){
  /* Once the panes stack, the input card is far taller than the rail. Letting
     the columns stretch to match would leave the impact card with hundreds of
     pixels of empty space under its last row, so each column takes its own
     height instead. Basic mode keeps the tidy equal-height pairing — nothing
     is stacked there. */
  .wroi.is-advanced .wgrid{align-items:start}
  .wpanes{flex-direction:column;align-items:stretch}
  /* Stacked, the flex axis is vertical, so the panes must size to their
     content — flex-basis 0 would collapse their height instead of their width. */
  .wpane{flex:0 0 auto}
  .wroi.is-advanced .wpane--comp{flex:0 0 auto;width:auto;max-width:none;margin-left:0}
  /* Stacked, the pane opens downward, so it should leave the same way. */
  .wroi:not(.is-advanced) .wpane--comp,
  .wroi.is-advanced.is-closing .wpane--comp{transform:translateY(-24px)}
}

.wfineprint{font-size:13px;line-height:1.5;color:var(--w-ink-3);padding-top:12px}

/* ---------------------------------------------------------------- fields */

.wfield{padding:20px 0 24px}
.wpane--comp .wfield{padding:14px 0 16px}
.wfield+.wfield{border-top:1px solid var(--w-line-2)}
.wpane--comp .wfield+.wfield{border-top-color:var(--w-comp-line)}

.wfield-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.wfield-head label{font-size:16px;font-weight:500;line-height:1.2;max-width:260px}
.wfield-num{
  width:158px;flex:none;text-align:right;
  font:inherit;font-size:22px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--w-ink);background:var(--w-white);
  border:1px solid var(--w-line-2);border-radius:var(--w-r-sm);
  padding:12px 14px;transition:border-color .15s ease;
}
.wpane--comp .wfield-num{width:140px}
.wfield-num:hover{border-color:var(--w-soft)}
.wfield-num:focus{outline:2px solid var(--w-teal);outline-offset:2px;border-color:var(--w-teal)}
@media(max-width:600px){
  .wfield-head{gap:12px}
  .wfield-head label{font-size:15px}
  .wfield-num,.wpane--comp .wfield-num{width:118px;font-size:19px;padding:10px 12px}
}

/* 12px, matching the gap above the bar — the range no longer contributes the
   ~4px of baseline descender it did as an inline element. */
.wticks{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--w-ink-3);margin-top:12px}
.wticks .wtick-mid{color:var(--w-deep);font-weight:700;text-align:center}

.wnote{font-size:14px;line-height:1.5;color:var(--w-ink);margin-top:20px}
.wnote--muted{color:var(--w-ink-3)}

/* ---------------------------------------------------------------- slider */

.wtrack{position:relative}

.wrange{
  -webkit-appearance:none;appearance:none;
  /* Block, not the default inline-block: an inline range sits on a text
     baseline, which adds a few px of font-dependent leading around it and
     stops the benchmark tick from ever meeting the bar. */
  display:block;
  width:100%;height:6px;border-radius:var(--w-r-full);
  outline:none;margin:12px 0 0;cursor:pointer;background:var(--w-line);
}
.wrange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:var(--w-r-full);
  background:var(--w-lime);box-shadow:0 0 0 5px var(--w-teal);
  cursor:grab;transition:transform .15s var(--w-ease);
}
.wrange:hover::-webkit-slider-thumb{transform:scale(1.1)}
.wrange:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.02)}
.wrange::-moz-range-thumb{
  width:14px;height:14px;border:5px solid var(--w-teal);
  border-radius:var(--w-r-full);background:var(--w-lime);cursor:grab;
}
/* The inner ring must match what the slider actually sits on — the inset field
   panel — not the page ground, which is now transparent. */
.wrange:focus-visible{box-shadow:0 0 0 2px var(--w-tint),0 0 0 4px var(--w-teal)}

/* Benchmark flag above the capture track: a dark tick standing on the bar at
   the benchmark value, with the pill centred over it. */
.wbench{position:relative;height:32px;margin-top:14px}
.wbench b{
  position:absolute;bottom:9px;transform:translateX(-50%);
  background:var(--w-lime);color:var(--w-deep);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  border-radius:var(--w-r-full);padding:4px 10px;white-space:nowrap;
}
.wbench i{
  position:absolute;bottom:0;transform:translateX(-50%);
  width:2px;height:9px;border-radius:1px;background:var(--w-deep);
}
/* The tick has to meet the bar, so the range drops its usual top margin here. */
.wbench+.wrange{margin-top:0}

/* Spend on an existing tool is derived from headcount x tier, so the handle is
   held inside a band and the field locks when there is nothing to replace. */
.is-locked .wrange{opacity:.4;cursor:not-allowed}
.is-locked .wfield-num{background:var(--w-tint);color:var(--w-ink-3);cursor:default}
.is-locked .wfield-num:hover{border-color:var(--w-line-2)}

/* ------------------------------------------------------------ capability */

.wcaps{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.wcaps>span{font-size:14px;color:var(--w-ink-3)}
.wcaps-group{
  display:flex;gap:4px;background:var(--w-white);
  border:1px solid var(--w-line-2);border-radius:var(--w-r-full);padding:4px;
}
.wcaps-group button{
  font:inherit;border:0;background:transparent;cursor:pointer;
  padding:9px 16px;border-radius:var(--w-r-full);
  font-size:13px;font-weight:700;color:var(--w-ink-2);
  transition:background-color .25s ease,color .25s ease;
}
.wcaps-group button.is-active{background:var(--w-teal);color:#fff}
.wcaps-group button:focus-visible{outline:2px solid var(--w-teal);outline-offset:2px}

/* ------------------------------------------------------------- total chip */

.wtotal{padding:20px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.wtotal span:first-child{font-size:16px;font-weight:500}
.wtotal b{
  background:var(--w-lime);color:var(--w-deep);
  font-size:20px;font-weight:700;border-radius:var(--w-r-sm);padding:10px 18px;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------- rail */

.wrail{display:flex;flex-direction:column;gap:16px}

/* hero metric */
.whero{
  position:relative;overflow:hidden;
  background:var(--w-panel);border-radius:var(--w-r);
  padding:40px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  /* So the headline sizes off the panel's own content box rather than the
     viewport — the rail is a fixed 452px/380px, so vw was a poor proxy. */
  container-type:inline-size;
}
.whero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.whero-wash{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(13,61,75,.62) 0%,rgba(13,61,75,.18) 55%,rgba(13,61,75,0) 100%);
}
.whero-body{position:relative}
.whero-label{
  display:block;margin-bottom:28px;
  font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--w-lime);
}
/* Stepped by string length so a seven-figure result keeps the same 40px
   breathing room as a four-figure one. data-size is set in render().
   The first declaration is the fallback for anything without cq units. */
.whero-value{
  font-size:72px;
  font-size:clamp(44px,20cqi,76px);
  font-weight:800;line-height:.85;
  letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums;
}
.whero-value[data-size="md"]{font-size:62px;font-size:clamp(40px,17.5cqi,66px)}
.whero-value[data-size="sm"]{font-size:52px;font-size:clamp(34px,15cqi,56px)}
.whero-sub{font-size:16px;color:#fff;margin-top:20px;line-height:1.4}
.whero-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);
}
/* Half-width tiles, so these run out of room sooner than the headline does. */
.whero-grid b{
  display:block;font-weight:700;
  font-size:32px;
  font-size:clamp(24px,9cqi,32px);
  letter-spacing:-.02em;line-height:1;color:var(--w-lime);
  font-variant-numeric:tabular-nums;
}
.whero-grid b[data-size="md"]{font-size:29px;font-size:clamp(22px,8cqi,29px)}
.whero-grid b[data-size="sm"]{font-size:25px;font-size:clamp(19px,7cqi,25px)}
.whero-grid span{
  display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-top:8px;
}
@media(max-width:600px){.whero{padding:28px}}

/* impact card */
.wimpact-card{
  flex:1 1 auto;background:var(--w-white);
  border:1px solid var(--w-line);border-radius:var(--w-r);padding:28px 32px;
}
@media(max-width:600px){.wimpact-card{padding:24px 20px}}
.wcard-label{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--w-ink-3);margin-bottom:20px;
}
.wrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--w-line);
}
.wrow-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.wrow-t{font-size:15px;color:var(--w-ink)}
.wrow-s{font-size:13px;color:var(--w-ink-3);font-variant-numeric:tabular-nums}
.wrow-v{
  flex:none;font-size:19px;font-weight:700;letter-spacing:-.01em;
  color:var(--w-teal);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.wrow.is-zero .wrow-v{color:var(--w-ink-3)}

.wsum{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-variant-numeric:tabular-nums;
}
.wsum--total{padding:16px 0 2px}
.wsum--cost{padding:2px 0 16px;border-bottom:1px solid var(--w-line);color:var(--w-ink-3)}
.wsum--total span:first-child{font-size:15px}
.wsum--cost span:first-child{font-size:15px}
.wsum b{font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.wsum--cost b{color:var(--w-ink-3)}
.wsum--net{padding:18px 0 4px}
.wsum--net span:first-child{font-size:16px;font-weight:700}
.wsum--net b{font-size:26px;font-weight:800;letter-spacing:-.02em}

/* CTA */
.wcta{
  position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  background:var(--w-panel);border-radius:var(--w-r);
  padding:24px 28px;text-decoration:none;
}
.wcta canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.wcta-txt{position:relative;display:flex;flex-direction:column;gap:4px}
.wcta-txt b{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
.wcta-txt span{font-size:14px;color:#fff}
.wcta-go{
  position:relative;flex:none;width:44px;height:44px;border-radius:var(--w-r-full);
  background:var(--w-lime);color:var(--w-deep);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  transition:transform .25s var(--w-ease);
}
.wcta:hover .wcta-go{transform:translateX(3px)}
.wcta:focus-visible{outline:2px solid var(--w-teal);outline-offset:3px}

/* ----------------------------------------------------------- assumptions */

/* 48px matches the shell's own gap, so the block reads as a separate footnote
   rather than something hanging off the bottom of the card. */
.wassume{margin-top:48px}
.wassume h3{
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--w-ink-2);margin-bottom:20px;
}
.wassume ul{columns:2;column-gap:48px}
@media(max-width:900px){.wassume ul{columns:1}}
/* --w-ink-2 rather than the muted --w-ink-3: at this size these read as body
   copy, and #8a8580 on the page ground is only about 3:1. */
.wassume li{
  font-size:15px;line-height:1.6;color:var(--w-ink-2);
  margin-bottom:14px;padding-left:20px;position:relative;
  break-inside:avoid;
}
.wassume li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--w-soft)}

/* Spacer between the calculator and the Request a demo block that follows. */
/* Spacing only. It used to be white; with a transparent widget that would
   render as a white stripe across the bottom of the section. */
.wroi-gap{height:80px;background:transparent}
@media(max-width:767px){.wroi-gap{height:48px}}

@media(prefers-reduced-motion:reduce){
  /* Delays go too, or the comprehensive pane would still stall before
     collapsing with nothing animating to justify the wait. */
  .wroi-page *{transition-duration:.01ms!important;transition-delay:0s!important}
}