.roi-tool{max-width:1040px;margin:0 auto;padding:32px 24px 64px;
  
  --band-end:35.9%}


.roi-tool .roi-head{margin-bottom:28px}
.roi-tool .brand-logo{display:block;height:34px;margin-bottom:20px;width:max-content}
.roi-tool .brand-logo img{height:100%;width:auto}
.roi-tool .brand-logo:focus-visible{outline:2px solid var(--green-deep);outline-offset:4px;border-radius:6px}
.roi-tool h1{font-size:clamp(28px,4vw,42px);margin:0 0 12px}
.roi-tool .roi-sub{color:var(--t-dark-mut);font-size:19px;max-width:62ch}


.roi-tool .grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:860px){.roi-tool .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.roi-tool .card{
  background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px;
}
.roi-tool .card h2{
  margin:0 0 4px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-dark-mut);font-family:var(--font);
}
.roi-tool .card .lead{margin:0 0 20px;font-size:14px;color:var(--t-dark-mut);max-width:none}


.roi-tool .field{margin-bottom:18px}
.roi-tool .field:last-child{margin-bottom:0}
.roi-tool label{display:block;font-size:15px;color:var(--t-dark);margin-bottom:7px}
.roi-tool .hint{color:var(--t-dark-mut);font-size:13px}
.roi-tool .field-note{margin:6px 0 0;font-size:12.5px;color:var(--t-dark-mut);line-height:1.5}
.roi-tool .control{position:relative;display:flex;align-items:center}
.roi-tool .control .unit{position:absolute;right:14px;color:var(--t-dark-mut);font-size:14px;pointer-events:none}
.roi-tool .control .prefix{position:absolute;left:14px;color:var(--t-dark-mut);font-size:15px;pointer-events:none}
.roi-tool input[type=number],
.roi-tool select{
  width:100%;padding:12px 44px 12px 14px;font-size:16px;color:var(--t-dark);
  background:var(--paper);border:1px solid var(--line-l);border-radius:10px;
  font-family:var(--font);font-weight:400;
  appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;
}
.roi-tool input.has-prefix{padding-left:30px}
.roi-tool select{padding-right:38px;cursor:pointer}
.roi-tool input:focus,
.roi-tool select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(137,195,69,.2)}
.roi-tool input[type=number]::-webkit-outer-spin-button,
.roi-tool input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-tool input[type=number]{-moz-appearance:textfield}


.roi-tool .reduction-value{font-variant-numeric:tabular-nums;color:var(--ink);font-size:24px;font-family:var(--font-head)}
.roi-tool .reduction-row{display:flex;align-items:center;gap:12px;margin-bottom:2px}

.roi-tool .reduction-track{flex:1;min-width:0}

.roi-tool input[type=range]{
  
  --fill-l:min(var(--pct,20%),var(--band-end));
  width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:999px;
  background:
    
    linear-gradient(90deg,
      var(--green) 0 var(--fill-l),
      var(--line-l) var(--fill-l) var(--band-end),
      transparent var(--band-end)),
    
    repeating-linear-gradient(135deg,transparent 0 3px,var(--warn) 3px 6px),
    
    linear-gradient(90deg,var(--green) 0 var(--pct,20%),var(--line-l) var(--pct,20%));
  margin:10px 0 4px;cursor:pointer;
}
.roi-tool input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);
  border:3px solid var(--white);box-shadow:0 1px 4px rgba(8,24,26,.25);cursor:pointer;
}
.roi-tool input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--green);
  border:3px solid var(--white);box-shadow:0 1px 4px rgba(8,24,26,.25);cursor:pointer;
}
.roi-tool input[type=range]:focus-visible{outline:2px solid var(--green-deep);outline-offset:4px}
.roi-tool .range-scale{position:relative;display:flex;justify-content:space-between;color:var(--t-dark-mut);font-size:11.5px}

.roi-tool .rs-mark{position:absolute;left:var(--band-end);transform:translateX(-50%)}
.roi-tool .range-band{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--t-dark-mut);max-width:62ch}
.roi-tool .range-band a{color:var(--green-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
.roi-tool .range-warn{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--warn);
  display:flex;gap:7px;align-items:flex-start}

.roi-tool .range-warn::before{content:'';flex:0 0 auto;width:10px;height:10px;margin-top:5px;border-radius:2px;
  background:repeating-linear-gradient(135deg,transparent 0 2px,var(--warn) 2px 4px);
  outline:1px solid var(--warn);outline-offset:-1px}
.roi-tool .range-warn[hidden]{display:none}


.roi-tool .result-hero{
  background:var(--ink);color:var(--t-light);
  border-radius:var(--r);padding:24px;margin-bottom:18px;
}
.roi-tool .result-hero .k{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
.roi-tool .result-hero .v{
  font-family:var(--font-head);font-size:clamp(32px,6vw,46px);letter-spacing:-.02em;
  margin-top:8px;font-variant-numeric:tabular-nums;color:#fff;line-height:1.05;
}
.roi-tool .result-hero .per{color:var(--t-light-mut);font-size:14px;margin-top:8px}

.roi-tool .rows{display:grid;gap:1px;border-radius:12px;overflow:hidden;border:1px solid var(--line-l);background:var(--line-l)}
.roi-tool .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 16px;background:var(--white)}
.roi-tool .row .lab{color:var(--t-dark-mut);font-size:14.5px}
.roi-tool .row .val{font-variant-numeric:tabular-nums;color:var(--t-dark)}
.roi-tool .row.sub .lab{padding-left:14px;font-size:13.5px}
.roi-tool .row.total{background:rgba(137,195,69,.12)}
.roi-tool .row.total .lab{color:var(--t-dark)}
.roi-tool .row.total .val{color:var(--ink);font-size:19px;font-family:var(--font-head)}

.roi-tool .split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.roi-tool .stat{background:var(--paper);border:1px solid var(--line-l);border-radius:12px;padding:15px}
.roi-tool .stat .k{font-size:12.5px;color:var(--t-dark-mut)}
.roi-tool .stat .v{font-size:22px;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--ink);font-family:var(--font-head)}



.roi-tool .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@media(max-width:400px){.roi-tool .actions{grid-template-columns:minmax(0,1fr)}}
.roi-tool .actions .btn{
  width:100%;min-width:0;
  white-space:normal;text-align:center;line-height:1.3;
  padding:12px 14px;
}
.roi-tool .btn-genie{background:var(--ink);border-color:var(--ink);color:var(--t-light)}
.roi-tool .btn-genie:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.roi-tool .btn-pilot{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  margin:18px 0 0;padding:15px 18px;border-radius:12px;
}
.roi-tool .btn-pilot .pilot-main{font-size:17px;font-family:var(--font-head);letter-spacing:-.01em}
.roi-tool .btn-pilot .pilot-sub{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}


.roi-tool #copyBox{margin-top:12px}
.roi-tool #copyArea{
  width:100%;height:150px;resize:vertical;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-l);background:var(--paper);color:var(--t-dark);
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.roi-tool #copyArea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(137,195,69,.2)}
.roi-tool .copy-hint{margin:8px 0 0;font-size:12.5px;color:var(--t-dark-mut)}
.roi-tool .copy-hint kbd{
  background:var(--white);border:1px solid var(--line-l);border-radius:5px;
  padding:1px 6px;font:400 11.5px/1 ui-monospace,Menlo,monospace;color:var(--t-dark);
}


.roi-tool .foot{margin-top:28px}
.roi-tool details{background:var(--white);border:1px solid var(--line-l);border-radius:12px;padding:4px 18px;margin-top:12px}
.roi-tool summary{cursor:pointer;padding:14px 0;list-style:none;font-size:15.5px}
.roi-tool summary::-webkit-details-marker{display:none}
.roi-tool summary::after{content:"+";float:right;color:var(--t-dark-mut);font-size:20px;line-height:1}
.roi-tool details[open] summary::after{content:"\2013"}
.roi-tool summary:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:6px}
.roi-tool details .body{padding-bottom:16px;color:var(--t-dark-mut);font-size:14.5px}
.roi-tool details .body ul{margin:8px 0;padding-left:20px}
.roi-tool details .body li{margin-bottom:6px}
.roi-tool details .body code{background:var(--paper);padding:2px 6px;border-radius:6px;font-size:13px}
.roi-tool details .body p{margin-top:12px}
.roi-tool .disclaimer{color:var(--t-dark-mut);font-size:12.5px;margin-top:20px;line-height:1.6}