.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 48px; padding: 12px 22px; border-radius: 10px; font: 600 16px var(--font-body); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease),background .25s,box-shadow .25s; }
html[lang="en"] .cta { font-stretch: 112%; }
.cta.snow { background: var(--snow); color: var(--blue-deep); }
.cta.snow:hover { background: var(--blue-mist); }
.cta.blue { background: var(--blue); color: var(--snow); }
.cta.blue:hover { background: var(--blue-deep); }
.cta.ghost { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1.5px oklch(100% 0 0 / .45); }
.cta.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--snow); }
.cta:active { transform: translateY(1px); }