.m8-btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;border:1px solid var(--brand-700);background-color:var(--brand-700);color:var(--white);border-radius:var(--radius-8);padding:.6875rem 2.0625rem;font-family:var(--font-sans);font-size:var(--font-size-text-md);font-weight:600;line-height:1.5;box-shadow:var(--shadow-xs);transition:background-color .2s;cursor:pointer;text-decoration:none;white-space:nowrap}
.m8-btn--light{border-color:var(--gray-300);background-color:var(--white);color:var(--gray-700)}
.m8-btn--blue{background-color:var(--blue-500);border-color:var(--blue-500);font-size:1.125rem;padding:calc(1rem - 1px) calc(1.5rem - 1px)}
.m8-btn--gradient{background-image:var(--gradient-button);border-style:none}
.m8-btn--sm{font-size:var(--font-size-text-sm);padding:.5625rem .9375rem}
.m8-btn--full{width:100%}
.m8-btn:is(:active,:focus){outline:2px solid var(--blue-200);outline-offset:2px}.m8-btn--light:is(:active,:focus){outline-color:var(--brand-500)}
.m8-btn:disabled,.m8-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.m8-btn--dark:not(:disabled):is(:hover,:focus-visible){background-color:var(--brand-800);border-color:var(--brand-800);color:var(--white)}.m8-btn--blue:not(:disabled):is(:hover,:focus-visible){background-color:var(--blue-600);border-color:var(--blue-600);color:var(--white)}.m8-btn--light:not(:disabled):is(:hover,:focus-visible){background-color:var(--gray-100);color:var(--gray-700)}.m8-btn--gradient:not(:disabled):is(:hover,:focus-visible){color:var(--white)}}

.m8-icon-btn{display:grid;place-items:center;aspect-ratio:1;width:3rem;padding:.125rem;border:1px solid var(--gray-300);background-color:var(--white);color:var(--gray-700);border-radius:var(--radius-8);box-shadow:var(--shadow-xs);font-size:var(--font-size-text-xl);transition:color .2s,background-color .2s;cursor:pointer}
.m8-icon-btn svg{width:1em;height:1em}.m8-icon-btn--flip svg{transform:scaleX(-1)}
.m8-icon-btn:is(:active,:focus){outline:2px solid var(--blue-200);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.m8-icon-btn:is(:hover,:focus-visible){color:var(--black);background-color:var(--gray-50)}}

.m8-text-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--blue-500);border-radius:var(--radius-4);margin:-.25rem;padding:.25rem;font-family:var(--font-sans);font-size:var(--font-size-text-md);font-weight:600;line-height:1.5;transition:color .2s;text-decoration:none;background:none;border:0;cursor:pointer}
.m8-text-link__arrow{position:relative;flex:none;clip-path:inset(0)}
.m8-text-link__icon{display:block;width:1.25em;height:1.25em;filter:drop-shadow(-1.25em 0);transition:transform .35s var(--ease-in-out-quart)}
.m8-text-link--stretched::after{content:"";position:absolute;inset:0}
.m8-text-link:is(:active,:focus){outline:2px solid var(--blue-200);outline-offset:2px}
.m8-text-link--stretched:is(:active,:focus){outline-color:transparent}
@media (hover:hover) and (pointer:fine){.m8-text-link:is(:hover,:focus-visible){color:var(--blue-700)}.m8-text-link:is(:hover,:focus-visible) .m8-text-link__icon{transform:translateX(1.25em)}}

.m8-slider-btn{display:grid;place-items:center;aspect-ratio:1;width:1em;font-size:clamp(2.5rem,2.1479rem + 1.5023vw,3.5rem);border-radius:50%;border:0;padding:0;background-color:var(--white);color:var(--gray-500);transition:color .2s,background-color .2s;cursor:pointer}
.m8-slider-btn svg{width:.5em;height:.5em}
.m8-slider-btn:disabled{color:var(--gray-300);background-color:var(--gray-100);cursor:default}
.m8-slider-btn:not(:disabled):active{background-color:var(--brand-800);border-color:var(--brand-800);color:var(--white)}

.m8-play-btn{display:block;border:1px solid var(--white);border-radius:50%;padding:0;background:none;outline-style:none;cursor:pointer;transition:transform .3s var(--ease-spring);animation:3s linear infinite m8-pulse}
.m8-play-btn__img{display:block;width:clamp(3.125rem,2.8829rem + 1.0329vw,3.8125rem);aspect-ratio:1;border-radius:50%;background:url("../../assets/illustrations/play-button.svg") center/contain no-repeat}
@media (hover:hover) and (pointer:fine){.m8-play-btn:is(:hover,:focus-visible){transform:scale(1.2)}}