/* The AI agent ROI calculator in blog/ai-agent-roi-calculator.html (components/roi-calculator.js, prefix rc-).
   One card, breaking out of the 720px column: the questions on the left (the job, how many a month, how many people
   do it), the answer on the right on the agents lavender. Our figures for the job (minutes saved, hourly cost, AI cost)
   sit in one quiet line and open for editing on "Adjust". Presets: data/agent-roi.json. */
.roi-calc{position:relative;left:50%;transform:translateX(-50%);width:min(900px,calc(100vw - 32px));margin-top:2.2em!important}
.post__body .roi-calc p,.post__body .roi-calc label{margin:0}
.rc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#fff;border:1.5px solid #000;border-radius:22px;box-shadow:6px 6px 0 rgba(0,0,0,.07);overflow:hidden;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif}
.rc__in{padding:28px;display:flex;flex-direction:column;gap:18px}
.rc__f{display:flex;flex-direction:column;gap:8px;min-width:0}
.rc__f > span:first-child{font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif;color:#000}
.rc select,.rc__box,.rc__step{height:52px;border:1.3px solid #000;border-radius:14px;background:#fdfcf8;box-sizing:border-box}
.rc select{width:100%;padding:0 42px 0 16px;font:500 17px/1 "Neue Montreal",system-ui,sans-serif;color:#000;appearance:none;-webkit-appearance:none;background:#fdfcf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 14px no-repeat}
.rc__pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:end}
.rc__box{display:flex;align-items:center;gap:8px;padding:0 14px}
.rc__box input{flex:1;min-width:0;width:100%;border:0;background:none;padding:0;font:500 17px/1 "Neue Montreal",system-ui,sans-serif;color:#000;-moz-appearance:textfield}
.rc__box em{flex:none;max-width:60%;font:400 14px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:#656567;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc__step{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;overflow:hidden}
.rc__step button{height:100%;border:0;background:none;font:400 22px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer}
.rc__step button:hover{background:#f4f0ff}
.rc__step input{width:100%;border:0;background:none;padding:0;text-align:center;font:500 17px/1 "Neue Montreal",system-ui,sans-serif;-moz-appearance:textfield}
.rc input::-webkit-outer-spin-button,.rc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rc select:focus-visible,.rc__box:focus-within,.rc__step:focus-within,.rc__adj input:focus-visible{outline:3px solid #397ae7;outline-offset:2px}
.rc__ours{padding-top:16px;border-top:1px solid rgba(0,0,0,.1);font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#555}
.rc__link{border:0;background:none;padding:0;margin-left:6px;font:500 14px/1 "Neue Montreal",system-ui,sans-serif;color:#397ae7;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rc__adj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.rc__adj[hidden]{display:none}
.rc__adj label{display:flex;flex-direction:column;justify-content:space-between;gap:6px;font:400 13px/1.3 "Neue Montreal",system-ui,sans-serif;color:#444}
.rc__adj i{font-style:normal}
.rc__adj input{width:100%;height:42px;box-sizing:border-box;padding:0 10px;border:1.2px solid rgba(0,0,0,.45);border-radius:10px;background:#fdfcf8;font:500 16px/1 "Neue Montreal",system-ui,sans-serif;-moz-appearance:textfield}
.rc__cur{position:relative;display:block}
.rc__cur b{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:500 16px/1 "Neue Montreal",system-ui,sans-serif;color:#656567}
.rc__cur input{padding-left:22px}
.rc__out{padding:28px;background:#f4f0ff;border-left:1.5px solid #000;display:flex;flex-direction:column;gap:12px}
.rc__big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px!important}
.rc__big b{font:500 64px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;color:#2f5a1f;font-variant-numeric:tabular-nums}
.rc__big span{font:400 17px/1.3 "Neue Montreal",system-ui,sans-serif;color:#222}
.rc__line{font:500 17px/1.4 "Neue Montreal",system-ui,sans-serif;color:#000}
.rc__line b{font-weight:500;color:#2f5a1f}
.rc__go{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:10px;background:#397ae7;color:#fff!important;text-decoration:none!important;font:500 15px/1 "Neue Montreal",system-ui,sans-serif;transition:background .2s ease}
.rc__go:hover{background:#2866ce}
.rc__fine{font:400 12.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#656567}
.rc--static{padding:22px 24px;background:#fff;border:1.5px solid #000;border-radius:18px}
@media (max-width:760px){
  .roi-calc{width:100%;left:0;transform:none}
  .rc{grid-template-columns:1fr}
  .rc__out{border-left:0;border-top:1.5px solid #000}
  .rc__in,.rc__out{padding:22px 18px}
  .rc__big b{font-size:52px}
  .rc__go{margin-top:6px}
}
@media (max-width:480px){ .rc__pair{grid-template-columns:1fr 128px} .rc__adj{grid-template-columns:1fr} .rc__adj label{flex-direction:row;align-items:center} .rc__adj input,.rc__cur{width:112px;flex:none} }