/* Extra specificity keeps page-level button padding from overlapping the arrows. */
/* Color is inherited from each existing button, including both site themes. */
.flow-button.flow-button.flow-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    padding-inline: 2.5rem;
    transition: border-radius 600ms cubic-bezier(.23,1,.32,1), background-color 600ms, color 600ms, box-shadow 600ms, transform 200ms;
}
.flow-button.flow-button.flow-button::before { content: none; }
.flow-button.flow-button.flow-button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 800ms cubic-bezier(.19,1,.22,1), opacity 800ms;
    z-index: 0;
}
.flow-button > .flow-button__label {
    position: relative;
    display: inline-block;
    z-index: 1;
    transform: translateX(-6px);
    transition: transform 800ms ease-out;
}
.flow-button__label > svg[aria-hidden="true"] { display: none; }
.flow-button.flow-button.flow-button > .flow-button__arrow {
    position: absolute;
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    margin: 0;
    pointer-events: none;
    z-index: 2;
    transform: none;
    transition: left 800ms cubic-bezier(.34,1.56,.64,1), right 800ms cubic-bezier(.34,1.56,.64,1);
}
.flow-button > .flow-button__arrow--enter { left: -25%; }
.flow-button > .flow-button__arrow--exit { right: 16px; }
@media (hover: hover) and (pointer: fine) {
    .flow-button.flow-button.flow-button:where(:hover):not(:disabled):not([aria-disabled="true"]) { border-radius: 12px; }
    .flow-button:where(:hover):not(:disabled):not([aria-disabled="true"]) > .flow-button__label { transform: translateX(6px); }
    .flow-button:where(:hover):not(:disabled):not([aria-disabled="true"]) > .flow-button__arrow--enter { left: 16px; }
    .flow-button:where(:hover):not(:disabled):not([aria-disabled="true"]) > .flow-button__arrow--exit { right: -25%; }
    .flow-button.flow-button.flow-button:where(:hover):not(:disabled):not([aria-disabled="true"])::after { opacity: .12; transform: translate(-50%, -50%) scale(1); }
}
.flow-button.flow-button.flow-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 12px; }
.flow-button.flow-button.flow-button:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.95); }
.flow-button:disabled, .flow-button[aria-disabled="true"] { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
    .flow-button.flow-button.flow-button, .flow-button.flow-button.flow-button::after,
    .flow-button > .flow-button__label, .flow-button.flow-button.flow-button > .flow-button__arrow { transition: none; }
    .flow-button.flow-button.flow-button:active:not(:disabled) { transform: none; }
}

/* First paint establishes the final shape; only later interactions animate. */
.flow-button--initializing,
.flow-button--initializing::before,
.flow-button--initializing::after,
.flow-button--initializing > * {
    transition: none !important;
}