
.page-braip {
  --s-accent2: #6d36fb;
  --s-accent2-deep: #5522c9;
  --s-accent2-soft: #f1ecff;
  --s-accent2-light: #a685ff;
  --s-accent2-rgb: 109, 54, 251;
  --s-ink-dark: #150b33;
  --s-sticky-h: 0px;
  padding-bottom: var(--s-sticky-h);
}

@media (max-width: 720px) {
  .page-braip { --s-sticky-h: 76px; }
  .s-app-shot { max-width: 260px; }
}

.page-braip .s-float--api { top: -22px; left: -28px; }
.page-braip .s-float--groups { bottom: -22px; right: -28px; }

@media (max-width: 720px) {
  .page-braip .s-float--api { top: -16px; left: -12px; }
  .page-braip .s-float--groups { bottom: -16px; right: -12px; }
}

.page-braip .security-card:hover { border-color: rgba(109, 54, 251, 0.55); }
.page-braip .security-icon { background: var(--s-accent2-soft); color: var(--s-accent2-deep); }

.page-braip .security-card--lead {
  background: var(--s-ink-dark);
}
.page-braip .security-card--lead:hover { border-color: transparent; }
.page-braip .security-card--lead .security-icon {
  background: rgba(109, 54, 251, 0.18);
  color: #c9b3ff;
}
.page-braip .security-card--lead p { color: rgba(255, 255, 255, 0.78); }
