/* Hover Reveal Button.
   Resting label slides up while a color fill sweeps in from below with the
   reveal label, on hover and keyboard focus. Typography and colors are driven
   by CSS variables set from props; any variable left unset falls back to
   inherit. Sizing is in rem/em so it scales with the site's responsive root
   font size. 1px border and 2px focus outline stay fixed by design.

   Scroll swap: when the .scrolled class is applied (by the scroll listener),
   the picked colors trade places, like a navbar button that recolors on scroll.

   Fill coverage: the fill enters skewed but settles to skew 0 with a slight
   horizontal overscan, so the filled state covers the button with no gaps. */

.ppUqTyavdTV8nb_f2cmO {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: 1px solid var(--hb-border, #e5e5e5);
  background: var(--hb-bg, #ffffff);
  font-family: var(--hb-font-family, inherit);
  font-size: var(--hb-font-size, inherit);
  font-weight: var(--hb-font-weight, 500);
  line-height: var(--hb-line-height, 1.2);
  letter-spacing: var(--hb-letter-spacing, normal);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  transition: background-color 350ms ease, border-color 350ms ease;
}

.ppUqTyavdTV8nb_f2cmO *,
.ppUqTyavdTV8nb_f2cmO *::before,
.ppUqTyavdTV8nb_f2cmO *::after {
  box-sizing: border-box;
}

.nz5qNZJqp5VR5qCMTcww {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875em 1.5em;
  white-space: nowrap;
  color: var(--hb-text, inherit);
  transform: translateY(0);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms ease;
}

.PB8OSJvp7eIO6IxW5nCZ {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hb-hover-text, #ffffff);
  white-space: nowrap;
  transform: translateY(100%);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms ease;
}

/* Oversized horizontally and straightens to skew 0 when settled, so the filled
   state always covers the button corners (the skew only shows on entrance). */
.Ah14A1WWk4oiHepsJJQQ {
  position: absolute;
  left: -8%;
  top: 0;
  width: 116%;
  height: 100%;
  background: var(--hb-fill, #3b82f6);
  transform: translateY(105%) skewY(12deg);
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), background-color 350ms ease;
}

.zrcRanRKPmiAxttj03g6 {
  position: relative;
  z-index: 10;
}

.ppUqTyavdTV8nb_f2cmO:hover .nz5qNZJqp5VR5qCMTcww,
.ppUqTyavdTV8nb_f2cmO:focus-visible .nz5qNZJqp5VR5qCMTcww {
  transform: translateY(-150%);
}

.ppUqTyavdTV8nb_f2cmO:hover .PB8OSJvp7eIO6IxW5nCZ,
.ppUqTyavdTV8nb_f2cmO:focus-visible .PB8OSJvp7eIO6IxW5nCZ {
  transform: translateY(0);
}

.ppUqTyavdTV8nb_f2cmO:hover .Ah14A1WWk4oiHepsJJQQ,
.ppUqTyavdTV8nb_f2cmO:focus-visible .Ah14A1WWk4oiHepsJJQQ {
  transform: translateY(0) skewY(0deg);
}

.ppUqTyavdTV8nb_f2cmO:focus-visible {
  outline: 2px solid var(--hb-fill, #3b82f6);
  outline-offset: 2px;
}

/* Scroll color swap: the picked colors trade places once the page is scrolled. */
.KKjQ0ZPEFb0IfygXDKd_ {
  background: var(--hb-fill, #3b82f6);
}

.KKjQ0ZPEFb0IfygXDKd_ .nz5qNZJqp5VR5qCMTcww {
  color: var(--hb-hover-text, #ffffff);
}

.KKjQ0ZPEFb0IfygXDKd_ .PB8OSJvp7eIO6IxW5nCZ {
  color: var(--hb-text, inherit);
}

.KKjQ0ZPEFb0IfygXDKd_ .Ah14A1WWk4oiHepsJJQQ {
  background: var(--hb-bg, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
  .nz5qNZJqp5VR5qCMTcww,
  .PB8OSJvp7eIO6IxW5nCZ,
  .Ah14A1WWk4oiHepsJJQQ {
    transition-duration: 1ms;
  }
}