@property --color{syntax:"<color>";initial-value:rgba(19,29,41,0);inherits:false}@media (prefers-reduced-motion:reduce){.button--pill,.button--pill:after,.button--pill:before,.button--pill>*{transition:none}}.button{background:transparent;border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline;&.button--square{align-items:center;background:linear-gradient(to right,var(--color),var(--color)),linear-gradient(-45deg,var(--orange-gradient-double-reverse));background-position-x:205%;background-position-x:1%;background-size:140% 100%;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 3px transparent;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:500;justify-content:center;line-height:1.375;max-width:335px;padding:16px;position:relative;text-align:center;transform:scale(1);transition:background-position-x .2s ease,--color .2s ease,transform .2s ease,box-shadow .2s ease,padding .2s ease;width:100%;& span{transition:transform .15s linear}&:hover:not(:active){background-position-x:15%;background-position-x:30%;box-shadow:0 2px 3px rgba(0,0,0,.3);transform:translateY(-1px)!important}&:active{--color:rgba(19,29,41,0)!important;box-shadow:0 0 0 transparent;transform:translateY(0)!important}&:active,&:focus{transition:background-position-x .8s ease,--color .2s ease,transform .2s ease,box-shadow .2s ease,padding .2s ease}&:focus:not(:active){box-shadow:0 0 0 transparent;transform:translateY(0)}&.button--white{background:transparent;background-color:transparent;border:1px solid #fff;transition:background .2s ease,color .2s ease,transform .2s ease;&:hover{background-color:#fff;color:var(--dark)}&:active{background-color:#f0f0f0}}&.button--black{background:transparent;border:1px solid var(--dark);color:var(--dark);transition:background-color .2s ease,color .2s ease,transform .2s ease;&:hover{background-color:var(--dark);color:#fff}&:active{background-color:color-mix(var(--dark),#fff 10%)}}}&.button--pill{--pill-h:46px;backdrop-filter:blur(5px);background:#fcfdfe;border-radius:50px;color:var(--orange);font-size:20px;font-weight:500;line-height:1.1;opacity:0;padding:12px 20px 12px calc(var(--pill-h) + 14px);pointer-events:none;position:relative;text-align:center;transition:opacity .2s ease;&.pill-ready{opacity:1;pointer-events:auto}&>*{left:0;transition:left .25s ease-in,color .25s ease;z-index:2}&>*,&>span{position:relative}&>span{text-overflow:ellipsis;white-space:normal}&:after,&:before{border-radius:50px;content:"";height:var(--pill-h);left:0;position:absolute;top:0;transition:none;width:var(--pill-h)}&.pill-ready:after,&.pill-ready:before{transition:width .25s ease,background-color .25s ease}&:before{background:linear-gradient(136deg,var(--orange-gradient));z-index:1}&:active,&:focus,&:hover{background:#fcfdfe;&>*{color:#fff}}&:active:before,&:focus:before,&:hover:before{width:100%}&:after{background-color:#fff;left:0;mask-image:var(--icon-arrow);-webkit-mask-image:var(--icon-arrow);mask-position:center;mask-repeat:no-repeat;mask-size:22px auto;-webkit-mask-size:22px auto;transition:left .2s ease;z-index:2}&:active:after,&:focus:after{left:calc(100% - var(--pill-h));transition:left .25s ease-in}&:active>*,&:focus>*{left:calc((var(--pill-h) - 6px)*-1)}&.button--white{background-color:#424a54;color:#fff;&:before{background:linear-gradient(136deg,#fff)}&:active,&:focus,&:hover{&>*{color:var(--dark)}}&:after{background-color:var(--dark)}}&.button--black{color:var(--dark);&>*{color:var(--dark)}&:before{background:linear-gradient(136deg,var(--dark))}&:active,&:focus,&:hover{&>*{color:#fff}}&:after{background-color:#fff}}&.button--grey-bg{background:var(--darker-grey)}}&.button--arrow{color:var(--orange);font-size:16px;font-weight:500;line-height:1.375;padding:12px 20px 12px 60px;position:relative;text-align:center;&>*{left:0;position:relative;transition:left .25s ease-in,color .25s ease}&:after,&:before{aspect-ratio:1/1;border-radius:50px;content:"";height:100%;left:0;position:absolute;top:0;transition:left .25s ease-in}&:before{background:transparent;border:2px solid var(--orange);z-index:1}&:hover:not(:focus):before{background:linear-gradient(136deg,var(--orange-gradient));border:0}&:after{background-color:var(--orange);mask-image:var(--icon-arrow);-webkit-mask-image:var(--icon-arrow);mask-position:center;mask-repeat:no-repeat;mask-size:22px auto;-webkit-mask-size:22px auto;z-index:2}&:hover:not(:focus):after{background-color:#fff}&:active:after,&:active:before,&:focus:after,&:focus:before{left:calc(100% - 46px)}&:active>*,&:focus>*{left:-40px}&.button--white{color:#fff;&:before{border-color:#fff}&:after,&:hover:not(:focus):before{background:#fff}&:hover:not(:focus):after{background:var(--dark)}}&.button--black{color:var(--dark);&:before{border-color:var(--dark)}&:after,&:hover:not(:focus):before{background:var(--dark)}&:hover:not(:focus):after{background:#fff}}}&.button--chevron{color:var(--orange);display:block;font-weight:500;padding-left:16px;position:relative;&:after,&:before{background-color:currentColor;content:"";height:2px;left:0;position:absolute;top:50%;transform-origin:calc(100% - 1px) center;transition:transform .2s ease;width:8px}&:before{transform:translateY(-50%) rotate(45deg)}&:after{transform:translateY(-50%) rotate(-45deg)}&:hover{&:before{transform:translateY(-50%) translateX(4px) rotate(45deg)}&:after{transform:translateY(-50%) translateX(4px) rotate(-45deg)}}&:active{&:before{transform:translateY(-50%) translateX(6px) rotate(45deg)}&:after{transform:translateY(-50%) translateX(6px) rotate(-45deg)}}&.button--white{color:#fff}}}