/* ============================================================
   ROCC ROI-Rechner (page 10663) — calculator + supporting sections
   Namespace: .rroi-*  (lives inside .r26 wrappers, uses --r26-* tokens)
   Owned by: wp-content/mu-plugins/rocc-roi-rechner.php
   ============================================================ */

/* ---------- hero head ---------- */
.rroi-band .r26-head{margin-bottom:clamp(36px,5vw,56px);}
.rroi-band .r26-lead{font-size:19px;}

/* ---------- calculator grid ---------- */
.rroi-grid{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr;align-items:start;}
@media(min-width:980px){.rroi-grid{grid-template-columns:minmax(0,1fr) minmax(360px,430px);}}

/* ---------- form ---------- */
.rroi-form{display:grid;gap:22px;margin:0;}
.rroi-field{margin:0;padding:0;border:0;min-width:0;}
.rroi-label,.rroi-form label{display:block;font-family:var(--r26-font-body);font-weight:600;font-size:15px;line-height:1.35;color:var(--r26-blue-deep);margin:0 0 8px;}
.rroi-form legend.rroi-label{padding:0;}
.rroi-hint{font-size:13px;line-height:1.5;color:var(--r26-muted);margin:7px 0 0;}
.rroi-hint strong{color:var(--r26-blue);font-weight:600;}

.rroi-cols{display:grid;gap:18px 20px;grid-template-columns:1fr;}
@media(min-width:640px){.rroi-cols{grid-template-columns:1fr 1fr;}}

.rroi-input-wrap{position:relative;}
.rroi-form input[type=number]{
  width:100%;padding:12px 46px 12px 14px;
  font-family:var(--r26-font-mono);font-size:17px;line-height:1.3;color:var(--r26-ink);
  background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-btn);
  transition:border-color .15s ease,box-shadow .15s ease;appearance:textfield;
}
.rroi-form input[type=number]:hover{border-color:var(--r26-hairline);}
.rroi-form input[type=number]:focus{outline:none;border-color:var(--r26-blue);box-shadow:0 0 0 3px var(--r26-chip);}
.rroi-form input[type=number]:focus-visible{outline:2px solid var(--r26-blue);outline-offset:1px;}
.rroi-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--r26-font-mono);font-size:14px;color:var(--r26-muted);pointer-events:none;}

/* platform radio cards */
.rroi-platforms{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.rroi-platforms{grid-template-columns:repeat(4,1fr);}}
.rroi-platform{
  position:relative;display:flex;flex-direction:column;gap:3px;cursor:pointer;
  background:var(--r26-surface);border:1.5px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);
  padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.rroi-platform:hover{border-color:var(--r26-hairline);transform:translateY(-1px);}
.rroi-platform input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.rroi-platform-name{font-family:var(--r26-font-body);font-weight:600;font-size:15px;color:var(--r26-blue-deep);}
.rroi-platform-cpm{font-family:var(--r26-font-mono);font-size:12.5px;color:var(--r26-muted);white-space:nowrap;}
.rroi-platform.is-active,.rroi-platform:has(input:checked){border-color:var(--r26-blue);background:var(--r26-chip);}
.rroi-platform.is-active .rroi-platform-cpm,.rroi-platform:has(input:checked) .rroi-platform-cpm{color:var(--r26-blue);}
.rroi-platform:focus-within{outline:2px solid var(--r26-blue);outline-offset:2px;}

/* quick-set chips */
.rroi-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.rroi-chip{
  font-family:var(--r26-font-mono);font-size:13px;line-height:1;color:var(--r26-blue-deep);
  background:var(--r26-chip);border:1px solid transparent;border-radius:999px;padding:7px 12px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.rroi-chip:hover{background:var(--r26-blue-deep);color:#fff;}
.rroi-chip:focus-visible{outline:2px solid var(--r26-blue);outline-offset:2px;}

/* ---------- result panel (dark navy, sticky) ---------- */
.rroi-result{
  background:var(--r26-blue-deep);border-radius:var(--r26-radius-band);
  padding:clamp(24px,3vw,34px);color:#fff;
  box-shadow:0 26px 60px -28px rgba(20,20,18,.45);
}
@media(min-width:980px){.rroi-result{position:sticky;top:96px;}}
.rroi-result-kicker{font-family:var(--r26-font-body);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--r26-blue-light);margin:0 0 4px;}
.rroi-result-title{font-family:var(--r26-font-body);font-weight:600;font-size:15px;color:rgba(255,255,255,.85);margin:0;}
.rroi-roi{font-family:var(--r26-font-mono);font-weight:400;font-size:clamp(38px,4.6vw,52px);line-height:1.05;letter-spacing:-.01em;color:#fff;margin:10px 0 4px;white-space:nowrap;}
.rroi-roi-sep{color:var(--r26-blue-light);padding:0 4px;}
.rroi-roi-unit{font-size:.55em;color:var(--r26-blue-light);margin-left:4px;}
.rroi-roi.is-long{font-size:clamp(26px,3.6vw,38px);}
.rroi-roi-caption{font-size:12.5px;color:rgba(255,255,255,.6);margin:0 0 18px;}

/* the ROI corridor meter — user range vs. the 150–400 % benchmark corridor */
.rroi-meter{margin:0 0 20px;}
.rroi-meter-track{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.10);}
.rroi-meter-corridor{position:absolute;top:0;bottom:0;background:rgba(143,184,217,.20);border-left:1px dashed rgba(143,184,217,.65);border-right:1px dashed rgba(143,184,217,.65);}
.rroi-meter-zero{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.45);}
.rroi-meter-bar{position:absolute;top:0;bottom:0;min-width:6px;border-radius:6px;background:var(--r26-blue-light);transition:left .25s ease,width .25s ease;}
.rroi-meter-bar.is-over::after{content:"+";position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-family:var(--r26-font-mono);font-size:13px;color:var(--r26-blue-light);}
.rroi-meter-scale{position:relative;height:18px;margin-top:6px;}
.rroi-meter-scale span{position:absolute;transform:translateX(-50%);font-family:var(--r26-font-mono);font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap;}
.rroi-meter-scale span:first-child{transform:none;}
.rroi-meter-scale span:last-child{transform:translateX(-100%);}
.rroi-meter-caption{font-size:12.5px;color:rgba(255,255,255,.65);margin:8px 0 0;}

/* funnel */
.rroi-part-label{font-family:var(--r26-font-body);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--r26-blue-light);margin:22px 0 10px;}
.rroi-funnel{list-style:none;margin:0;padding:0;}
.rroi-funnel-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:6px 0;}
.rroi-funnel-row .rroi-k{font-size:14px;color:rgba(255,255,255,.8);}
.rroi-funnel-row .rroi-v{font-family:var(--r26-font-mono);font-size:16px;color:#fff;white-space:nowrap;}
.rroi-funnel-rate{font-family:var(--r26-font-mono);font-size:12px;color:rgba(143,184,217,.9);border-left:2px solid rgba(143,184,217,.35);margin-left:7px;padding:3px 0 3px 14px;}

/* money table */
.rroi-table{width:100%;border-collapse:collapse;margin-top:4px;}
.rroi-table td{padding:9px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.8);vertical-align:baseline;}
.rroi-table td:last-child{text-align:right;font-family:var(--r26-font-mono);font-size:15px;color:#fff;white-space:nowrap;}
.rroi-be-status{display:block;font-size:12px;color:var(--r26-blue-light);margin-top:2px;font-family:var(--r26-font-body);}

/* explainer + warnings */
.rroi-why{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.88);background:rgba(255,255,255,.06);border-radius:8px;padding:12px 14px;margin:18px 0 0;}
.rroi-warn{font-size:13px;line-height:1.55;color:#F2C94C;background:rgba(242,201,76,.08);border-radius:8px;padding:11px 14px;margin:10px 0 0;}
.rroi-warn[hidden]{display:none;}

/* CTA + disclaimer */
.rroi-cta-row{display:grid;gap:10px;margin:20px 0 0;}
.rroi-result .r26-btn--primary{background:#fff;color:var(--r26-blue-deep);justify-content:center;width:100%;}
.rroi-result .r26-btn--primary:hover{background:var(--r26-chip);}
.rroi-result .rroi-alt-link{display:inline-flex;justify-content:center;gap:6px;font-size:14px;color:var(--r26-blue-light);text-decoration:underline;text-decoration-color:rgba(143,184,217,.5);text-underline-offset:3px;}
.rroi-result .rroi-alt-link:hover{color:#fff;}
.rroi-disc{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.5);margin:18px 0 0;}

/* visually hidden live region */
.rroi-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- methodology section ---------- */
.rroi-def{font-size:17px;line-height:1.65;color:var(--r26-body);max-width:62ch;margin:0 0 28px;}
.rroi-formulas{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 28px;}
@media(min-width:760px){.rroi-formulas{grid-template-columns:1fr 1fr;}}
.rroi-formula{background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);padding:18px 22px;}
.rroi-formula-label{display:block;font-family:var(--r26-font-body);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--r26-muted-soft);margin:0 0 8px;}
.rroi-formula code{font-family:var(--r26-font-mono);font-size:15px;line-height:1.5;color:var(--r26-blue-deep);background:none;padding:0;}
.rroi-cards3{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:900px){.rroi-cards3{grid-template-columns:repeat(3,1fr);}}
.rroi-card{background:var(--r26-surface);border:1px solid var(--r26-hairline-soft);border-radius:var(--r26-radius-card);padding:24px;}
.r26 .rroi-card h3{font-family:var(--r26-font-head);font-weight:700;font-size:17px;line-height:1.3;color:var(--r26-blue-deep);margin:0 0 8px;}
.rroi-card p{font-size:15px;line-height:1.6;color:var(--r26-body);margin:0;}

/* ---------- benchmarks (dark band) ---------- */
.rroi-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rroi-bench-table{width:100%;border-collapse:collapse;min-width:560px;}
.rroi-bench-table th{font-family:var(--r26-font-body);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);text-align:left;padding:0 16px 10px 0;}
.rroi-bench-table td{padding:13px 16px 13px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:rgba(255,255,255,.85);}
.rroi-bench-table td:first-child{font-weight:600;color:#fff;}
.rroi-bench-table .rroi-mono{font-family:var(--r26-font-mono);white-space:nowrap;color:#fff;}
.rroi-bench-table .rroi-dim{font-size:13.5px;color:rgba(255,255,255,.6);}
.rroi-bench-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:32px;}
@media(min-width:900px){.rroi-bench-grid{grid-template-columns:repeat(3,1fr);}}
.rroi-mini{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:var(--r26-radius-card);padding:16px 18px;}
.rroi-mini-num{display:block;font-family:var(--r26-font-mono);font-size:20px;line-height:1.2;color:#fff;white-space:nowrap;}
.rroi-mini-label{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.65);margin-top:4px;}

/* ---------- tips + budget split ---------- */
.rroi-tips{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:760px){.rroi-tips{grid-template-columns:repeat(2,1fr);}}
.rroi-split{margin-top:44px;}
.r26 .rroi-split h3{font-family:var(--r26-font-head);font-weight:700;font-size:20px;color:var(--r26-blue-deep);margin:0 0 6px;}
.rroi-split-intro{font-size:15px;color:var(--r26-muted);margin:0 0 18px;max-width:62ch;}
.rroi-split-row{display:grid;gap:4px 18px;grid-template-columns:1fr;padding:12px 0;border-top:1px solid var(--r26-hairline-soft);}
@media(min-width:760px){.rroi-split-row{grid-template-columns:230px minmax(120px,1fr) 90px;align-items:center;}}
.rroi-split-name{font-family:var(--r26-font-body);font-weight:600;font-size:15px;color:var(--r26-blue-deep);}
.rroi-split-name small{display:block;font-weight:400;font-size:13px;color:var(--r26-muted);}
.rroi-split-track{position:relative;height:10px;border-radius:5px;background:var(--r26-chip);}
.rroi-split-band{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--r26-blue);}
.rroi-split-val{font-family:var(--r26-font-mono);font-size:14px;color:var(--r26-ink);white-space:nowrap;}
@media(min-width:760px){.rroi-split-val{text-align:right;}}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rroi-meter-bar,.rroi-platform,.rroi-chip,.rroi-form input[type=number]{transition:none;}
}