.sb-cta, .sb-link { -webkit-tap-highlight-color: transparent; }

.sb-w { display: block; width: 100%; height: 100%; overflow: visible; }
.sb-w-d { transition: opacity 240ms var(--ease-settle, ease-out); }

.sb-cta {
  display: inline-flex; align-items: center; gap: .62em;
  min-height: 48px; padding: 0 .15em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-0); line-height: 1.2; letter-spacing: -0.005em;
  color: inherit; text-decoration: none; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-soft, 18px);
}
.sb-cta-mark {
  flex: none; display: block; width: 1.6em; height: 1.6em;
  color: var(--sb-mark, currentColor);
}
.sb-cta-t { display: block; white-space: nowrap; }   :root { --sb-turn: 36deg; --sb-grow: 1.12; --sb-ease: cubic-bezier(0.33, 1, 0.68, 1); }
.sb-cta-mark { transform: none; transition: transform 620ms var(--sb-ease) 160ms; }
.sb-cta .sb-w-d { opacity: .55; transition: opacity 260ms var(--ease-settle, ease-out) 0ms; }
.sb-cta:hover .sb-cta-mark, .sb-cta:focus-visible .sb-cta-mark {
  transform: rotate(var(--sb-turn)) scale(var(--sb-grow)); transition: transform 620ms var(--sb-ease) 0ms;
}
.sb-cta:hover .sb-w-d, .sb-cta:focus-visible .sb-w-d {
  opacity: 1; transition: opacity 300ms var(--ease-settle, ease-out) calc(340ms + var(--i, 0) * 40ms);
}
.sb-cta--turn .sb-w-d, .sb-cta--turn:hover .sb-w-d, .sb-cta--turn:focus-visible .sb-w-d { opacity: 1; transition: none; }
.sb-cta--light:hover .sb-cta-mark, .sb-cta--light:focus-visible .sb-cta-mark { transform: none; }
.sb-cta--light:hover .sb-w-d, .sb-cta--light:focus-visible .sb-w-d { transition-delay: calc(var(--i, 0) * 42ms); }

.sb-cta--solid {
  --sb-mark: var(--sb-ink, var(--twilight));
  min-height: 58px; padding: 0 1.45em 0 1.05em; gap: .7em;
  background: var(--sb-ground, var(--orange)); color: var(--sb-ink, var(--twilight));
  border-radius: 22px;
  font-size: var(--step-0);
}
.sb-cta--solid .sb-w-d { opacity: .62; }
.sb-cta--solid:hover .sb-w-d, .sb-cta--solid:focus-visible .sb-w-d { opacity: 1; }
.sb-cta--solid.sb-cta--turn .sb-w-d { opacity: 1; }

.sb-link {
  --sb-u: color-mix(in srgb, currentColor 42%, transparent);
  color: inherit; text-decoration: none; font-weight: 500; cursor: pointer;
  padding-bottom: .32em;
  background:
    radial-gradient(circle 1.1px at 1.1px 50%, var(--sb-u) 92%, transparent) 0 100% / 11px 2.2px repeat-x,
    radial-gradient(circle 1.1px at 5.9px 50%, var(--sb-u) 92%, transparent) 0 100% / 11px 2.2px repeat-x,
    linear-gradient(90deg, transparent 1.1px, var(--sb-u) 1.1px, var(--sb-u) 5.9px, transparent 5.9px) 0 100% / 11px 2.2px repeat-x;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sb-link:hover, .sb-link:focus-visible { --sb-u: currentColor; }

.sb-cta:focus-visible, .sb-link:focus-visible {
  outline: 2.5px solid currentColor; outline-offset: 5px; box-shadow: none;
}
.sb-link:focus-visible { border-radius: 6px; }
.sb-cta--solid:focus-visible { outline: 3px solid var(--twilight); outline-offset: 3px; box-shadow: 0 0 0 6px var(--white); }

@media (prefers-reduced-motion: reduce) {
  .sb-cta-mark, .sb-cta:hover .sb-cta-mark, .sb-cta:focus-visible .sb-cta-mark { transform: none !important; transition: none !important; }
  .sb-w-d, .sb-cta:hover .sb-w-d, .sb-cta:focus-visible .sb-w-d { transition: none !important; }
}
@media (forced-colors: active) {
  .sb-cta--solid { border: 2px solid ButtonText; }
  .sb-link { text-decoration: underline; }
}