/* Figma 503:8383: crossfade to the exact blue slider control. */
:is(.kl-case-arrows, .kw-review-controls) button {
  position:relative;
  width:32px;
  height:32px;
}
:is(.kl-case-arrows, .kw-review-controls) button::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url('/assets/slider/arrow-hover.svg') center / 100% 100% no-repeat;
  opacity:0;
  transition:opacity 250ms cubic-bezier(.32, .72, 0, 1);
}
:is(.kl-case-arrows, .kw-review-controls) :is([data-case-move="-1"], [data-review-direction="-1"])::after {
  transform:scaleX(-1);
}
@media (hover:hover) {
  :is(.kl-case-arrows, .kw-review-controls) button:not(:disabled):hover::after { opacity:1; }
}
:is(.kl-case-arrows, .kw-review-controls) button:not(:disabled):focus-visible::after { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  :is(.kl-case-arrows, .kw-review-controls) button::after { transition:none; }
}

/* Shared by the compact CTA, the full-width pricing CTA and their text-only variants. */
[data-cta-motion] {
  --cta-time: 450ms;
  --cta-ease: cubic-bezier(.32, .72, 0, 1);
  --cta-surface: var(--paper);
  --chip-surface: white;
  --chip-arrow: var(--ink);
  --chip-stroke: transparent;
  position: relative;
  isolation: isolate;
  background: transparent;
}
[data-cta-motion="blue"] {
  --cta-surface: var(--blue);
  --chip-surface: rgb(255 255 255 / .12);
  --chip-stroke: rgb(255 255 255 / .06);
  --chip-arrow: white;
}
[data-cta-motion="white"], [data-cta-motion="featured"] {
  --cta-surface: white;
  --chip-surface: #2e2e2e;
  --chip-arrow: white;
}
[data-cta-motion="featured"] { --chip-surface: var(--blue); }

[data-cta-motion]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--cta-surface);
}
.cta-label {
  display: inline-flex;
  align-items: center;
  block-size: 1.4em;
  margin-block: calc((1lh - 1.4em) / 2);
  overflow: hidden;
}
.cta-label > span {
  display: block;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1.4em 0 currentColor;
}
.cta-chevron {
  position: relative;
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--chip-surface);
  box-shadow: inset 0 0 0 1px var(--chip-stroke);
}
.cta-chevron::before, .cta-chevron::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--chip-arrow);
  mask: url('/assets/cta-chevron.svg') center / contain no-repeat;
}
.cta-chevron::after { transform: translateX(calc(-100% - .625em)); }

@media (prefers-reduced-motion: no-preference) {
  [data-cta-motion]::before {
    transition: inset var(--cta-time) var(--cta-ease), scale var(--cta-time) var(--cta-ease);
  }
  [data-cta-motion]:active::before { scale: .95; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cta-label > span, .cta-chevron::before, .cta-chevron::after {
    transition: transform var(--cta-time) var(--cta-ease);
  }
  [data-cta-motion]:hover::before { inset: .125em; }
  [data-cta-motion]:hover .cta-label > span { transform: translateY(-100%); }
  [data-cta-motion]:hover .cta-chevron::before { transform: translateX(calc(100% + .625em)); }
  [data-cta-motion]:hover .cta-chevron::after { transform: translateX(0); }
}

/* Shared footer links on dark site pages and light funnel pages. */
.kw-footer-link > span {
  position:relative;
  display:inline-block;
  max-width:100%;
  color:var(--footer-link-ink, white);
  opacity:var(--footer-link-opacity, .53);
}
.kw-footer-link > span::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:currentColor;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:right center;
}
.kw-email > span, .kw-footer-link:focus-visible > span { opacity:1; }
.kw-footer-link:focus-visible > span::after {
  transform:scaleX(1);
  transform-origin:left center;
}
@media (hover:hover) and (pointer:fine) {
  .kw-footer-link:hover > span { opacity:1; }
  .kw-footer-link:hover > span::after { transform:scaleX(1); transform-origin:left center; }
}
@media (prefers-reduced-motion:no-preference) {
  .kw-footer-link { --footer-link-ease:cubic-bezier(.32,.72,0,1); }
  .kw-footer-link > span { transition:opacity 200ms var(--footer-link-ease); }
  .kw-footer-link > span::after { transition:transform 450ms var(--footer-link-ease); }
}