.spp-root {
  --spp-surface: oklch(98.5% 0.005 252);
  --spp-panel: oklch(96.8% 0.007 252);
  --spp-panel-strong: oklch(93.8% 0.01 252);
  --spp-text: oklch(23% 0.026 252);
  --spp-muted: oklch(51% 0.024 252);
  --spp-border: oklch(88% 0.012 252);
  --spp-border-strong: oklch(80% 0.016 252);
  --spp-accent: oklch(57% 0.12 238);
  --spp-accent-quiet: oklch(94% 0.027 238);
  --spp-success: oklch(54% 0.1 158);
  --spp-success-quiet: oklch(94% 0.028 158);
  --spp-warning: oklch(63% 0.11 76);
  --spp-warning-quiet: oklch(94.5% 0.032 76);
  --spp-review: oklch(57% 0.105 305);
  --spp-review-quiet: oklch(94% 0.026 305);
  --spp-shadow: 0 8px 24px oklch(24% 0.026 252 / 0.08), 0 1px 2px oklch(24% 0.026 252 / 0.06);
  --spp-shadow-soft: 0 4px 14px oklch(24% 0.026 252 / 0.06);
  --spp-radius: 8px;
  --spp-radius-sm: 6px;
  --spp-gap: 8px;
  --spp-offset: 20px;
  position: fixed;
  inset: 0;
  z-index: var(--spp-z-index, 900);
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--spp-text);
}
.spp-root *,
.spp-root *::before,
.spp-root *::after {
  box-sizing: border-box;
}
.spp-root .spp-static,
.spp-root .spp-popup-stack,
.spp-root .spp-trust-bar,
.spp-root .spp-counters {
  position: absolute;
  pointer-events: none;
}
.spp-root .spp-static {
  inset: 0;
  width: 100%;
  height: 100%;
}
.spp-root .spp-popup-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spp-gap);
  width: min(344px, 100vw - 32px);
}
.spp-root.spp-position-bottom-left .spp-popup-stack {
  left: var(--spp-offset);
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
  align-items: flex-start;
}
.spp-root.spp-position-bottom-right .spp-popup-stack {
  right: var(--spp-offset);
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
  align-items: flex-end;
}
.spp-root.spp-position-bottom-center .spp-popup-stack {
  left: 50%;
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  align-items: center;
}
.spp-root.spp-position-top-left .spp-popup-stack {
  left: var(--spp-offset);
  top: max(var(--spp-offset), env(safe-area-inset-top));
  align-items: flex-start;
}
.spp-root.spp-position-top-right .spp-popup-stack {
  right: var(--spp-offset);
  top: max(var(--spp-offset), env(safe-area-inset-top));
  align-items: flex-end;
}
.spp-root.spp-position-top-center .spp-popup-stack {
  left: 50%;
  top: max(var(--spp-offset), env(safe-area-inset-top));
  transform: translateX(-50%);
  align-items: center;
}
.spp-root.spp-position-center-left .spp-popup-stack {
  left: var(--spp-offset);
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-start;
}
.spp-root.spp-position-center-right .spp-popup-stack {
  right: var(--spp-offset);
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-end;
}
.spp-root .spp-popup {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 34px;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--spp-border);
  border-radius: var(--spp-radius);
  background: var(--spp-surface);
  background: color-mix(in oklch, var(--spp-surface) 96%, var(--spp-panel));
  box-shadow: var(--spp-shadow);
  pointer-events: auto;
  overflow: hidden;
  touch-action: pan-y;
  animation: spp-enter 210ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.spp-root .spp-popup:hover {
  border-color: var(--spp-border-strong);
  box-shadow: var(--spp-shadow-soft);
}
.spp-root[data-glassmorphism=true] .spp-popup, .spp-root[data-glassmorphism=true] .spp-trust-bar__item, .spp-root[data-glassmorphism=true] .spp-counter {
  background: color-mix(in oklch, var(--spp-surface) 96%, var(--spp-panel));
  backdrop-filter: none;
}
.spp-root .spp-popup::after {
  content: none;
}
.spp-root .spp-popup.spp-is-leaving {
  animation: spp-leave 150ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
}
.spp-root .spp-popup.spp-is-dragging {
  cursor: grabbing;
  transition: none;
}
.spp-root .spp-popup:focus-visible,
.spp-root .spp-popup__close:focus-visible,
.spp-root .spp-popup__cta:focus-visible,
.spp-root .spp-trust-bar__item:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--spp-accent) 78%, var(--spp-surface));
  outline-offset: 2px;
}
.spp-root .spp-popup__icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--spp-accent-quiet);
  border: 1px solid color-mix(in oklch, var(--spp-accent) 24%, var(--spp-border));
  color: var(--spp-accent);
  display: grid;
  place-items: center;
  align-self: center;
}
.spp-root .spp-popup__icon::before,
.spp-root .spp-popup__icon::after {
  content: none;
}
.spp-root .spp-popup__icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
}
.spp-root .spp-popup[data-spp-type=sale] .spp-popup__icon,
.spp-root .spp-popup[data-spp-type=subscription] .spp-popup__icon,
.spp-root .spp-popup[data-spp-type=upgrade] .spp-popup__icon {
  background: var(--spp-success-quiet);
  border-color: color-mix(in oklch, var(--spp-success) 26%, var(--spp-border));
  color: var(--spp-success);
}
.spp-root .spp-popup[data-spp-type=review] .spp-popup__icon {
  background: var(--spp-review-quiet);
  border-color: color-mix(in oklch, var(--spp-review) 26%, var(--spp-border));
  color: var(--spp-review);
}
.spp-root .spp-popup[data-spp-type=download] .spp-popup__icon {
  background: var(--spp-warning-quiet);
  border-color: color-mix(in oklch, var(--spp-warning) 26%, var(--spp-border));
  color: var(--spp-warning);
}
.spp-root .spp-popup[data-spp-type=micro] .spp-popup__icon {
  background: var(--spp-accent-quiet);
  border-color: color-mix(in oklch, var(--spp-accent) 26%, var(--spp-border));
  color: var(--spp-accent);
}
.spp-root .spp-popup__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}
.spp-root .spp-popup__title {
  display: block;
  color: var(--spp-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.spp-root .spp-popup__message {
  display: block;
  color: var(--spp-muted);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.spp-root .spp-popup__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: color-mix(in oklch, var(--spp-muted) 84%, var(--spp-text));
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0;
}
.spp-root .spp-popup__meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 5px 2px 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.52;
}
.spp-root .spp-popup__flag {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  transform: translateY(1px);
}
.spp-root .spp-popup__flag + .spp-popup__location::before {
  content: none;
}
.spp-root .spp-popup__cta {
  align-self: flex-start;
  margin-top: 3px;
  color: var(--spp-accent);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  pointer-events: auto;
  transition: color 140ms cubic-bezier(0.16, 1, 0.3, 1), text-decoration-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.spp-root .spp-popup__cta:hover {
  color: color-mix(in oklch, var(--spp-accent) 82%, var(--spp-text));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.spp-root .spp-popup__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--spp-radius-sm);
  background: transparent;
  color: color-mix(in oklch, var(--spp-muted) 86%, var(--spp-text));
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  align-self: start;
  justify-self: end;
  margin: -5px -5px 0 0;
  opacity: 0.5;
  transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.spp-root .spp-popup__close::before,
.spp-root .spp-popup__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}
.spp-root .spp-popup__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.spp-root .spp-popup__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.spp-root .spp-popup__close:hover {
  background: var(--spp-panel);
  color: var(--spp-text);
  opacity: 1;
}
.spp-root .spp-trust-bar {
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, 100vw - 32px);
  pointer-events: none;
}
.spp-root .spp-trust-bar--top {
  top: max(12px, env(safe-area-inset-top));
}
.spp-root .spp-trust-bar--bottom {
  bottom: max(12px, env(safe-area-inset-bottom));
}
.spp-root .spp-trust-bar__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}
.spp-root .spp-trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--spp-border);
  border-radius: var(--spp-radius-sm);
  background: var(--spp-surface);
  background: color-mix(in oklch, var(--spp-surface) 95%, var(--spp-panel));
  color: var(--spp-muted);
  box-shadow: 0 1px 2px oklch(24% 0.026 252deg / 0.06);
  text-decoration: none;
  pointer-events: auto;
  transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1), background-color 140ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.spp-root .spp-trust-bar__item::before {
  content: "";
  display: none;
}
.spp-root .spp-trust-bar__item:hover {
  border-color: var(--spp-border-strong);
  background: var(--spp-panel);
  color: var(--spp-text);
}
.spp-root .spp-trust-bar__value {
  color: var(--spp-text);
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
  letter-spacing: 0;
}
.spp-root .spp-trust-bar__label {
  font-size: 11px;
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: 0;
}
.spp-root .spp-counters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(248px, 100vw - 32px);
}
.spp-root .spp-counters--bottom-right {
  right: var(--spp-offset);
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
}
.spp-root .spp-counters--bottom-left {
  left: var(--spp-offset);
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
}
.spp-root .spp-counters--bottom-center {
  left: 50%;
  bottom: max(var(--spp-offset), env(safe-area-inset-bottom));
  transform: translateX(-50%);
}
.spp-root .spp-counters--top-right {
  right: var(--spp-offset);
  top: max(var(--spp-offset), env(safe-area-inset-top));
}
.spp-root .spp-counters--top-left {
  left: var(--spp-offset);
  top: max(var(--spp-offset), env(safe-area-inset-top));
}
.spp-root .spp-counters--top-center {
  left: 50%;
  top: max(var(--spp-offset), env(safe-area-inset-top));
  transform: translateX(-50%);
}
.spp-root .spp-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--spp-border);
  border-radius: var(--spp-radius-sm);
  background: var(--spp-surface);
  background: color-mix(in oklch, var(--spp-surface) 96%, var(--spp-panel));
  box-shadow: var(--spp-shadow-soft);
  pointer-events: auto;
}
.spp-root .spp-counter__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--spp-success);
  box-shadow: 0 0 0 3px var(--spp-success-quiet);
  flex: 0 0 auto;
}
.spp-root .spp-counter--conversion .spp-counter__dot {
  background: var(--spp-accent);
  box-shadow: 0 0 0 3px var(--spp-accent-quiet);
}
.spp-root .spp-counter__body {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.spp-root .spp-counter__value {
  color: var(--spp-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}
.spp-root .spp-counter__label {
  color: var(--spp-muted);
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.spp-root.spp-is-mobile {
  --spp-offset: 12px;
  --spp-gap: 0;
}
.spp-root.spp-is-mobile .spp-popup-stack {
  left: 12px;
  right: 12px;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
  top: auto;
  width: auto;
  max-width: none;
  transform: none;
  align-items: stretch;
}
.spp-root.spp-is-mobile.spp-position-top-left .spp-popup-stack, .spp-root.spp-is-mobile.spp-position-top-right .spp-popup-stack, .spp-root.spp-is-mobile.spp-position-top-center .spp-popup-stack {
  top: max(12px, env(safe-area-inset-top));
  bottom: auto;
}
.spp-root.spp-is-mobile.spp-position-center-left .spp-popup-stack, .spp-root.spp-is-mobile.spp-position-center-right .spp-popup-stack {
  top: auto;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
  transform: none;
}
.spp-root.spp-is-mobile .spp-popup {
  grid-template-columns: 24px minmax(0, 1fr) 38px;
  gap: 9px;
  min-height: 58px;
  max-height: 88px;
  padding: 9px;
}
.spp-root.spp-is-mobile .spp-popup__close {
  width: 38px;
  height: 38px;
  margin: -7px -7px 0 0;
}
.spp-root.spp-is-mobile .spp-popup:not(:last-child) {
  display: none;
}
.spp-root.spp-is-mobile .spp-popup__icon {
  width: 24px;
  height: 24px;
}
.spp-root.spp-is-mobile .spp-popup__title {
  font-size: 12px;
}
.spp-root.spp-is-mobile .spp-popup__message,
.spp-root.spp-is-mobile .spp-popup__cta {
  font-size: 11px;
}
.spp-root.spp-is-mobile .spp-popup__message {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.spp-root.spp-is-mobile .spp-popup__meta {
  display: none;
}
.spp-root.spp-is-mobile .spp-popup__cta {
  display: none;
}
.spp-root.spp-is-mobile .spp-trust-bar,
.spp-root.spp-is-mobile .spp-counters {
  display: none;
}
.spp-root.spp-is-mobile .spp-counter {
  max-width: calc(100vw - 24px);
}
.spp-root.spp-mobile-hide-trust.spp-is-mobile .spp-trust-bar {
  display: none;
}
.spp-root.spp-mobile-hide-counters.spp-is-mobile .spp-counters {
  display: none;
}
.spp-root[data-reduced-motion=true] .spp-popup, .spp-root[data-reduced-motion=true] .spp-popup.spp-is-leaving {
  animation: none;
  transition: none;
}

@keyframes spp-enter {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes spp-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(var(--spp-dismiss-x, -10px), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spp-root .spp-popup,
  .spp-root .spp-popup.spp-is-leaving {
    animation: none;
    transition: none;
  }
}