/* Product messages (design/11-promo-messages.md). */
.bg-promo {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 340px;
  padding: 12px 34px 12px 14px;
  background: rgba(11, 15, 26, 0.94);
  border: 1px solid rgba(122, 162, 255, 0.32);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(36, 86, 232, 0.18);
  color: #E8EEFB;
  font: 13px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.bg-promo.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bg-promo .bg-promo-tag {
  display: block;
  margin-bottom: 4px;
  color: #7AA2FF;
  font: 500 10px/1 "JetBrains Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bg-promo a { color: #7AA2FF; text-decoration: underline; text-underline-offset: 2px; }
.bg-promo a:hover { color: #A9C4FF; }
.bg-promo .bg-promo-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #93A0BB;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.bg-promo .bg-promo-x:hover { color: #E8EEFB; background: rgba(122, 162, 255, 0.12); }
.bg-promo.is-touch { max-width: min(260px, 40vw); font-size: 12px; padding: 10px 32px 10px 12px; }
.bg-promo.is-touch .bg-promo-x { width: 36px; height: 36px; top: 0; right: 0; line-height: 36px; }
@media (prefers-reduced-motion: reduce) { .bg-promo { transition: opacity .2s linear; transform: none; } }