:root {
  --brand-cyan: #2FE3E9;
  --brand-blue: #2F7BFF;
  --brand-violet: #6C2BFF;
  --brand-magenta: #FF2F92;
  --brand-orange: #FF8A1E;
  --cta-border-1: #2FE3E9;
  --cta-border-2: #2F7BFF;
  --cta-border-3: #6C2BFF;
  --cta-border-4: #FF2F92;
  --cta-border-5: #FF8A1E;
  --cta-fill: rgba(6, 14, 34, 0.88);
  --cta-fill-hover: rgba(8, 19, 44, 0.9);
  --cta-fill-active: rgba(7, 17, 40, 0.94);
  --cta-text: #EAF1FF;
  --cta-focus-ring: rgba(47, 123, 255, 0.28);
}

.cta-brand,
a.button-link.cta-brand,
button.cta-brand,
button.primary,
.button-link.primary,
input[type="submit"].primary,
input[type="button"].primary,
.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cta-text);
  text-decoration: none;
  font-weight: 700;
  background:
    linear-gradient(var(--cta-fill), var(--cta-fill)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

.cta-brand:hover,
a.button-link.cta-brand:hover,
button.cta-brand:hover,
button.primary:hover,
.button-link.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover,
.btn.primary:hover {
  border-color: transparent;
  color: var(--cta-text);
  background:
    linear-gradient(var(--cta-fill-hover), var(--cta-fill-hover)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
  box-shadow: none;
  filter: none;
}

.cta-brand:focus-visible,
a.button-link.cta-brand:focus-visible,
button.cta-brand:focus-visible,
button.primary:focus-visible,
.button-link.primary:focus-visible,
input[type="submit"].primary:focus-visible,
input[type="button"].primary:focus-visible,
.btn.primary:focus-visible {
  outline: 2px solid var(--cta-focus-ring);
  outline-offset: 2px;
  border-color: transparent;
  color: var(--cta-text);
  background:
    linear-gradient(var(--cta-fill-hover), var(--cta-fill-hover)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
  box-shadow: none;
}

.cta-brand:active,
a.button-link.cta-brand:active,
button.cta-brand:active,
button.primary:active,
.button-link.primary:active,
input[type="submit"].primary:active,
input[type="button"].primary:active,
.btn.primary:active {
  color: var(--cta-text);
  background:
    linear-gradient(var(--cta-fill-active), var(--cta-fill-active)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
  box-shadow: none;
}

.cta-brand-soft,
a.button-link.cta-brand-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cta-text);
  text-decoration: none;
  font-weight: 700;
  background:
    linear-gradient(rgba(7, 17, 40, 0.86), rgba(7, 17, 40, 0.86)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
  position: relative;
  isolation: isolate;
}

.cta-brand-soft:hover,
a.button-link.cta-brand-soft:hover {
  color: var(--cta-text);
  background:
    linear-gradient(rgba(8, 19, 44, 0.9), rgba(8, 19, 44, 0.9)) padding-box,
    linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5)) border-box;
}

.cta-brand-soft:focus-visible,
a.button-link.cta-brand-soft:focus-visible {
  outline: 2px solid var(--cta-focus-ring);
  outline-offset: 2px;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cta-brand,
  a.button-link.cta-brand,
  button.cta-brand,
  button.primary,
  .button-link.primary,
  .btn.primary {
    background: var(--cta-fill);
  }

  .cta-brand:hover,
  a.button-link.cta-brand:hover,
  button.cta-brand:hover,
  button.primary:hover,
  .button-link.primary:hover,
  .btn.primary:hover,
  .cta-brand:focus-visible,
  a.button-link.cta-brand:focus-visible,
  button.cta-brand:focus-visible,
  button.primary:focus-visible,
  .button-link.primary:focus-visible,
  .btn.primary:focus-visible {
    background: var(--cta-fill-hover);
  }

  .cta-brand:active,
  a.button-link.cta-brand:active,
  button.cta-brand:active,
  button.primary:active,
  .button-link.primary:active,
  .btn.primary:active {
    background: var(--cta-fill-active);
  }

  .cta-brand::before,
  a.button-link.cta-brand::before,
  button.cta-brand::before,
  button.primary::before,
  .button-link.primary::before,
  .btn.primary::before,
  .cta-brand-soft::before,
  a.button-link.cta-brand-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(118deg, var(--cta-border-1), var(--cta-border-2), var(--cta-border-3), var(--cta-border-4), var(--cta-border-5));
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .cta-brand-soft,
  a.button-link.cta-brand-soft {
    background: rgba(7, 17, 40, 0.86);
  }

  .cta-brand-soft:hover,
  a.button-link.cta-brand-soft:hover {
    background: rgba(8, 19, 44, 0.9);
  }

  .cta-brand-soft::before,
  a.button-link.cta-brand-soft::before {
    opacity: 0.72;
  }
}