/* ===== ROI calculator — warm full-page background ===== */
.roical{ background:#F6EFE3 url('assets/roi-bg.jpg') center top/cover no-repeat; padding:48px 0 96px; overflow-x:clip; }
.rc-wrap{ max-width:none; margin:0; padding:0 clamp(20px,3vw,48px); }

.rc-crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(0,0,0,.5); margin-bottom:18px; display:flex; gap:9px; flex-wrap:wrap; }
.rc-crumb a{ color:rgba(0,0,0,.5); text-decoration:none; }
.rc-crumb a:hover{ color:var(--orange); }
.rc-h1{ font-family:var(--serif); font-weight:300; font-size:clamp(38px,6vw,66px); line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; }
.rc-lead{ font-size:18px; color:rgba(0,0,0,.74); line-height:1.55; max-width:62ch; margin:0 0 36px; }

.rc-split{ display:flex; align-items:stretch; gap:20px; }
.rc-card{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7); border-radius:22px; box-shadow:0 24px 60px rgba(120,80,20,.12); }
.rc-inputs{ flex:0 0 390px; padding:34px 30px; display:flex; flex-direction:column; gap:26px; }
.rc-results{ flex:1 1 0; min-width:0; padding:36px 36px 40px; color:var(--ink); }

.rc-field{ display:flex; flex-direction:column; gap:12px; }
.rc-fl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,.52); display:flex; align-items:center; gap:7px; }
.rc-inp{ display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 15px; transition:border-color .2s ease; }
.rc-inp:focus-within{ border-color:var(--ink); }
.rc-inp input{ flex:1; min-width:0; border:0; background:transparent; padding:14px 0; font-size:18px; font-family:var(--sans); color:var(--ink); }
.rc-inp input:focus{ outline:none; }
.rc-inp input::-webkit-outer-spin-button,.rc-inp input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rc-pre{ color:var(--muted); margin-right:7px; font-size:17px; }
.rc-unit{ color:var(--muted); font-size:13px; font-family:var(--mono); margin-left:8px; white-space:nowrap; }

.rc-range{ position:relative; padding-top:26px; }
.rc-range input[type=range]{ width:100%; accent-color:var(--orange); height:4px; margin:0; }
.rc-bubble{ position:absolute; top:0; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11px; font-family:var(--mono); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.rc-range-foot{ position:relative; display:flex; justify-content:space-between; margin-top:13px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.rc-avg{ position:absolute; transform:translateX(-50%); top:-9px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; pointer-events:none; }

.rc-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.rc-m-label{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(0,0,0,.55); margin-bottom:14px; }
.rc-m-val{ font-family:var(--sans); font-size:clamp(31px,3.6vw,49px); font-weight:400; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.rc-m-sub{ color:rgba(0,0,0,.55); font-size:14px; margin-top:12px; }

.rc-sep{ border:0; border-top:1px dashed rgba(0,0,0,.2); margin:34px 0 4px; }
.rc-tbl-wrap{ overflow-x:auto; }
.rc-tbl{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
.rc-tbl th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,0,0,.5); font-weight:400; text-align:right; padding:18px 14px 14px; white-space:nowrap; }
.rc-tbl th:first-child{ text-align:left; }
.rc-tbl td{ padding:16px 14px; text-align:right; color:rgba(0,0,0,.62); border-top:1px solid rgba(0,0,0,.12); white-space:nowrap; }
.rc-tbl td:first-child{ text-align:left; color:rgba(0,0,0,.78); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.rc-tbl td.rc-total{ color:var(--ink); }
.rc-tbl tr.rc-hi td{ color:var(--ink); font-weight:600; }

.rc-cta{ margin-top:34px; }
.rc-cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; border-radius:10px; padding:14px 26px; font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none; transition:background .2s ease,color .2s ease; }
.rc-cta-btn:hover{ background:var(--orange); color:#fff; }

@media(max-width:860px){
  .roical{ padding:34px 0 60px; }
  .rc-wrap{ padding:0 16px; }
  .rc-split{ flex-direction:column; }
  .rc-inputs{ flex:none; width:100%; padding:28px 22px; }
  .rc-results{ padding:28px 22px 34px; }
  .rc-metrics{ grid-template-columns:1fr; gap:24px; }
  .rc-cta-btn{ width:100%; }
}