/* Match the existing orange sticky CTA at the primary conversion points. */
.hero .website-control > .btn,
.pricing--service .plan .btn[data-track-cta="pricing"],
.alternatives--service .comparison-cta {
  background: #fa8957;
  border-color: #fa8957;
  color: #17282b;
}

.hero .website-control > .btn:hover,
.pricing--service .plan .btn[data-track-cta="pricing"]:hover,
.alternatives--service .comparison-cta:hover {
  background: #ffa571;
  border-color: #ffa571;
}

.hero .website-control > .btn:focus-visible,
.pricing--service .plan .btn[data-track-cta="pricing"]:focus-visible,
.alternatives--service .comparison-cta:focus-visible {
  outline: 2px solid #17282b;
  outline-offset: -4px;
}

/* The experiment only changes the hero button palette. Size, copy and all
   other CTAs are identical. Attribute arrives in the initial HTML. */
.hero .website-control > .btn[data-ab-variant="b"] {
  background: #18282b;
  border-color: #18282b;
  color: #fff9ee;
}
.hero .website-control > .btn[data-ab-variant="b"]:hover {
  background: #294044;
  border-color: #294044;
}
.hero .website-control > .btn[data-ab-variant="b"]:focus-visible {
  outline-color: #fff9ee;
}