.workload-calculator{
  --wc-ink:#211c19;
  --wc-muted:#7d736d;
  --wc-orange:#f04a17;
  --wc-green:#3f9565;
  width:min(1380px,calc(100% - 56px));
  margin:88px auto;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.7fr);
  gap:54px;
  align-items:center;
  padding:46px 48px;
  overflow:hidden;
  border:1px solid rgba(126,105,151,.17);
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 8%,rgba(186,215,201,.36),transparent 27%),
    radial-gradient(circle at 38% 100%,rgba(245,198,177,.29),transparent 31%),
    linear-gradient(145deg,#f4f0f8,#f3f5f1 58%,#f8f2ed);
  box-shadow:0 28px 70px rgba(69,52,84,.1),inset 0 1px 0 rgba(255,255,255,.9);
}

.workload-calculator__copy h2{
  margin:13px 0 17px;
  color:var(--wc-ink);
  font-family:'Dela Gothic One',sans-serif;
  font-size:clamp(31px,3vw,46px);
  line-height:1.08;
  letter-spacing:0;
}
.workload-calculator__title-word{
  display:inline-block;
  margin-right:.27em;
  color:rgba(33,28,25,.12);
  background:linear-gradient(var(--wc-ink),var(--wc-ink)) 0 0 / 0% 100% no-repeat;
  background-clip:text;
  -webkit-background-clip:text;
  will-change:background-size,transform;
}
.workload-calculator.is-title-revealed .workload-calculator__title-word{
  animation:workloadTitleFill .68s cubic-bezier(.22,.76,.24,1) forwards;
  animation-delay:calc(120ms + var(--word-index) * 105ms);
}
.workload-calculator__copy p{max-width:430px;margin:0;color:var(--wc-muted);font-size:14px;line-height:1.65}
.workload-calculator__live{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#64566f;font-size:10px;font-weight:650;text-transform:uppercase}
.workload-calculator__live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--wc-orange);box-shadow:0 0 0 4px rgba(240,74,23,.09)}
.workload-calculator.is-visible .workload-calculator__live i::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(240,74,23,.26);border-radius:50%;animation:workloadPing 2.2s ease-out infinite}

.workload-calculator__tool{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);
  min-height:358px;
  overflow:hidden;
  border:1px solid rgba(99,77,112,.13);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  box-shadow:0 20px 50px rgba(68,51,79,.09),inset 0 1px 0 #fff;
}
.workload-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px;border-right:1px solid rgba(103,81,116,.09)}
.workload-control{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:15px;border:1px solid rgba(96,75,105,.1);border-radius:15px;background:rgba(255,255,255,.76);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.workload-control:focus-within{border-color:rgba(240,74,23,.32);box-shadow:0 0 0 3px rgba(240,74,23,.055)}
.workload-control > span{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.workload-control b{color:#40373d;font-size:11px}
.workload-control output{min-width:38px;padding:6px 8px;border-radius:8px;background:#f2edf6;color:#6e5681;font-size:12px;font-weight:700;text-align:center}
.workload-control small{margin-top:9px;color:#a0969d;font-size:8px}
.workload-control input{width:100%;height:18px;margin:0;accent-color:var(--wc-orange);cursor:pointer}
.workload-control input:focus-visible{outline:2px solid rgba(240,74,23,.4);outline-offset:4px}

.workload-result{position:relative;display:flex;flex-direction:column;padding:23px;background:linear-gradient(150deg,rgba(250,247,252,.94),rgba(248,251,248,.91))}
.workload-result::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(182,161,211,.16);filter:blur(28px);pointer-events:none}
.workload-result__top{position:relative}
.workload-result__top > span{color:#9a8d9d;font:650 8px/1 "SFMono-Regular",Consolas,monospace}
.workload-result__top strong{display:block;margin:8px 0 2px;color:var(--wc-ink);font-size:44px;line-height:1}
.workload-result__top strong small{font-size:15px;font-weight:600}
.workload-result__top p{margin:8px 0 0;color:#827783;font-size:10px}
.workload-result__top p b{color:#56475d}

.workload-result__comparison{display:grid;gap:10px;margin-top:18px}
.workload-result__comparison > div > span{display:flex;justify-content:space-between;margin-bottom:6px;color:#756a74;font-size:9px}
.workload-result__comparison span b{color:#4b4149}
.workload-result__comparison i{height:7px;display:block;overflow:hidden;border-radius:99px;background:rgba(92,73,101,.08)}
.workload-result__comparison em{width:100%;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#f5ad92,var(--wc-orange));transform-origin:left;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.workload-result__comparison .is-reputon em{background:linear-gradient(90deg,#b8d9c7,var(--wc-green))}

.workload-result__flow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:7px;margin:17px 0;padding:11px 12px;overflow:hidden;border:1px solid rgba(114,91,126,.09);border-radius:11px;background:rgba(255,255,255,.64);color:#8f8490;font:600 7px/1 "SFMono-Regular",Consolas,monospace;text-transform:uppercase}
.workload-result__flow i{height:1px;flex:1;background:#ddd3e1}
.workload-result__flow b{position:absolute;left:8px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--wc-orange);box-shadow:0 0 10px rgba(240,74,23,.48);opacity:0}
.workload-calculator.is-visible .workload-result__flow b{animation:workloadSignal 3.2s ease-in-out infinite}

.workload-result__saving{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end;padding:12px 0;border-top:1px solid rgba(100,79,109,.09)}
.workload-result__saving span{color:#80747f;font-size:9px}
.workload-result__saving strong{grid-row:1 / span 2;grid-column:2;color:#337b54;font-size:15px}
.workload-result__saving small{color:#9b9199;font-size:8px}
.workload-result__cta{
  position:relative;
  isolation:isolate;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:0 18px;
  overflow:hidden;
  border:1px solid rgba(240,74,23,.23);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  color:#352d29;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 9px 24px rgba(72,52,82,.08),inset 0 1px 0 #fff;
  transition:color .34s ease,border-color .34s ease,box-shadow .34s ease,transform .22s ease;
}
.workload-result__cta-dot{
  position:absolute;
  z-index:-1;
  left:15px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--wc-orange);
  box-shadow:0 0 0 5px rgba(240,74,23,.08);
  transition:width .44s cubic-bezier(.22,.78,.24,1),height .44s cubic-bezier(.22,.78,.24,1),left .44s cubic-bezier(.22,.78,.24,1),transform .44s cubic-bezier(.22,.78,.24,1),box-shadow .3s ease;
}
.workload-result__cta-label{position:relative;letter-spacing:0}
.workload-result__cta:hover{
  color:#fff;
  border-color:var(--wc-orange);
  box-shadow:0 15px 30px rgba(240,74,23,.2);
  transform:translateY(-2px);
}
.workload-result__cta:hover .workload-result__cta-dot{
  left:50%;
  width:calc(100% + 10px);
  height:calc(100% + 10px);
  transform:translateX(-50%);
  box-shadow:none;
}
.workload-result__cta:active{transform:translateY(0) scale(.985)}
.workload-result__cta:focus-visible{outline:3px solid rgba(240,74,23,.2);outline-offset:3px}
.workload-result__note{margin:10px 0 0;color:#9d939b;font-size:7px;line-height:1.5}

@keyframes workloadSignal{0%{left:8px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 15px);opacity:0}}
@keyframes workloadPing{0%{opacity:.8;transform:scale(.55)}70%,100%{opacity:0;transform:scale(1.35)}}
@keyframes workloadTitleFill{
  0%{background-size:0% 100%;transform:translateY(3px)}
  100%{background-size:100% 100%;transform:translateY(0)}
}

@media (max-width:1050px){
  .workload-calculator{grid-template-columns:1fr;gap:28px;padding:40px}
  .workload-calculator__copy{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:end}
  .workload-calculator__copy .sec-ey,.workload-calculator__copy h2{grid-column:1}
  .workload-calculator__copy p,.workload-calculator__live{grid-column:2}
}
@media (max-width:720px){
  .workload-calculator{width:calc(100% - 20px);margin:68px auto;padding:36px 12px 12px;border-radius:23px}
  .workload-calculator__copy{display:block;padding:0 8px}
  .workload-calculator__copy h2{font-size:30px}
  .workload-calculator__tool{grid-template-columns:1fr}
  .workload-controls{border-right:0;border-bottom:1px solid rgba(103,81,116,.09)}
}
@media (max-width:430px){
  .workload-controls{grid-template-columns:1fr;padding:10px}
  .workload-control{padding:13px}
  .workload-result{padding:18px}
  .workload-result__top strong{font-size:39px}
  .workload-result__flow{padding-inline:8px}
}
@media (prefers-reduced-motion:reduce){
  .workload-calculator *,.workload-calculator *::before,.workload-calculator *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .workload-calculator__title-word{background-size:100% 100%!important}
}