/* ROI result: before and after, drawn (Dixon, 28 Sep 2026). Two bars on the
   dark panel. Today is the task's whole year; After keeps the team's share in
   the same grey and hands the rest back in Tally blue, the colour of the swatch
   beside "Hours back each year". White on #1F6BFF is 4.6:1 for the share label;
   the bars themselves are graphics (3:1 needed) against the navy panel. */
.roi-swatch{display:inline-block; width:10px; height:10px; border-radius:2px;
  background:#1F6BFF; margin-right:8px; vertical-align:-1px}
.roi-split{display:grid; gap:12px; margin-top:24px}
.roi-split-row{display:grid; grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center; gap:12px}
.roi-split-lbl{font-size:13px; color:#B7C6D6}
.roi-split-val{font-size:15px; font-weight:600; color:#F2F6FA; white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:64px; text-align:right}
.roi-split-bar{display:flex; height:22px; border-radius:4px; overflow:hidden;
  background:rgba(242,246,250,.08)}
.roi-split-bar i{display:block; height:100%;
  transition:width .45s cubic-bezier(.16,.84,.44,1)}
.roi-split-keep{background:rgba(242,246,250,.30)}
.roi-split-back{background:#1F6BFF; display:flex !important; align-items:center;
  justify-content:flex-end; padding-right:8px; box-sizing:border-box}
.roi-split-back b{font-size:12px; font-weight:700; color:#FFFFFF; letter-spacing:.02em}
.roi-sr{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
@media (prefers-reduced-motion:reduce){.roi-split-bar i{transition:none}}