/* live product interface in the dashboard card (replaced the laptop art, 24.09.2026) */
.partner-visual--live { overflow: clip; }
@media (max-width: 767px) {
  .partner-visual--live { aspect-ratio: auto; max-width: none; width: 100%; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: clip; }
}

/* RetainNow: the interface in one blue family (brand #0084ff -> #a4d3ff) instead of product greens/oranges.
   Site-only override: the shared showcase files stay untouched. */
#product-view.sc {
  --acc: #0084ff;
  --hub-1: #a4d3ff; --hub-2: #0b4fb3;
  --ok: #6fb9ff; --warn: #a4d3ff; --bad: #7d97c4;
  --spark-1: #0084ff; --spark-2: #6fb9ff; --spark-3: #a4d3ff; --spark-4: #3d9dff;
  --ui-bg: #060c1c; --ui-side: #070e20; --panel: #0b1429; --panel-2: #0f1a34; --line: rgba(164, 211, 255, .09);
  --ink: #eaf3ff; --mute: #8a9ab8; --dim: #5b6a88;
  --n-seg: #a4d3ff; --n-trig: #0084ff; --n-cond: #6fb9ff; --n-rew: #46a6ff;
  --n-act: #a4d3ff; --n-com: #7cc0ff; --n-next: #a4d3ff; --n-alt: #7d97c4;
}

/* phones: keep the brand gradient frame, but with the same radius as the card that clips it
   (20.7px card vs 18px window made the frame look cut at the corners) */
@media (max-width: 767px) {
  .partner-visual--live { border-radius: 18px; }
  #product-view .sc-window { border-radius: 18px; }
  #product-view .sc-window__fit { border-radius: 17px; }
}