/* ============================================================
   MISSED-REVENUE / ROI CALCULATOR — styles (kit tokens only).
   Loss reads as a warning; the recoverable number uses --win
   (a genuine win, per BRAND.md). No hardcoded colors.
   ============================================================ */
.roi-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) { .roi-wrap { grid-template-columns: 1fr; } }

.roi-inputs {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  gap: 16px;
}
.roi-field { display: grid; gap: 7px; font-size: 14px; color: var(--mut); }
.roi-field > span { font-weight: 600; letter-spacing: .01em; }
.roi-field > span b { color: var(--neon); font-variant-numeric: tabular-nums; }
.roi-field select,
.roi-field input[type="number"] {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
}
.roi-field select:focus,
.roi-field input:focus { outline: 2px solid var(--neon); outline-offset: 1px; border-color: transparent; }

.roi-field-range input[type="range"] {
  width: 100%;
  accent-color: var(--neon);
  height: 22px;
}

.roi-adv-toggle {
  justify-self: start;
  background: none;
  border: 1px solid var(--line);
  color: var(--mut);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.roi-adv-toggle:hover { color: var(--ink); border-color: var(--neon); }
.roi-adv { display: grid; gap: 14px; padding-top: 4px; }

/* ---- result ---- */
.roi-out {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  gap: 16px;
}
.roi-lost, .roi-win { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; }
.roi-lost { background: color-mix(in srgb, var(--pink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 40%, var(--line)); }
.roi-win  { background: color-mix(in srgb, var(--win) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--win) 40%, var(--line)); }

.roi-lost-k, .roi-win-k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.roi-lost-v { font-family: var(--font-display, inherit); font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--pink); font-variant-numeric: tabular-nums; }
.roi-win-v  { font-family: var(--font-display, inherit); font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--win);  font-variant-numeric: tabular-nums; }
.roi-lost-v small, .roi-win-v small { font-size: 15px; font-weight: 600; opacity: .7; margin-left: 3px; }
.roi-lost-sub, .roi-win-sub { font-size: 13px; color: var(--mut); }

.roi-note { font-size: 12.5px; color: var(--mut); line-height: 1.5; margin: 0; }
.roi-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.roi-cta .btn { flex: 1 1 auto; text-align: center; }

@media (prefers-reduced-motion: reduce) { .roi-out, .roi-inputs { transition: none; } }