/* Letter swap on hover for the call-to-action links (split by cta-letters.js).
   Each letter sits in its own mask; the same letter waits 1.5em lower and both move up together. */
.cta-letters{display:inline-flex;align-items:flex-end}
.cta-char{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.3;padding-bottom:.16em;margin-bottom:-.16em}
/* Starts moving at once (fast out, gentle landing); 12 ms from letter to letter. */
.cta-char>span{display:block;position:relative;transition:transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 12ms)}
.cta-char>span:after{content:attr(data-c);position:absolute;left:0;top:1.5em}
a:hover>.cta-letters .cta-char>span,a:focus-visible>.cta-letters .cta-char>span{transform:translateY(-1.5em)}

/* The underline, the text and the arrow light up with an ease instead of switching at once. */
.presentation-footer>a,.shop-caption a,.benefits-footer>a,a[data-letters]{transition:color .45s cubic-bezier(.4,0,.2,1),border-color .45s cubic-bezier(.4,0,.2,1)}
.presentation-footer>a>span,.shop-caption a>span:not(.cta-letters),.benefits-footer>a>span:not(.cta-letters){transition:color .45s cubic-bezier(.4,0,.2,1)}