@layer ry-demo-unified {
/* Compact inverse treatment for the pricing card's demo action only. */
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact {
  display: inline-flex !important;
  align-self: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 6px 7px 6px 16px !important;
  gap: 16px !important;
  border: 1px solid #fff !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
}
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact .ry-demo-label,
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact .ry-demo-label-text {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 14px !important;
}
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact .ry-demo-label-text {
  text-shadow: 0 1.2em 0 #111 !important;
}
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact .ry-demo-arrow {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: #111 !important;
  color: #fff !important;
}
html body #pricing a.ry-demo-cta.ry-pricing-demo-compact .ry-demo-arrow svg {
  width: 15px !important;
  height: 15px !important;
  color: #fff !important;
  stroke: #fff !important;
}
}