:root {
--primary: #37ca37;
--secondary: #188bf6;
--white: #ffffff;
--gray: #cbd5e0;
--black: #000000;
--red: #e93d3d;
--orange: #f6ad55;
--yellow: #faf089;
--green: #9ae6b4;
--teal: #81e6d9;
--malibu: #63b3ed;
--indigo: #757BBD;
--purple: #d6bcfa;
--pink: #fbb6ce;
--transparent: transparent;
--overlay: rgba(0, 0, 0, 0.5);
--color-m5i3v64t: #1a5e87;
--color-m5i4xm5y: #ffa500;
--color-m5i4y70u: #27baea;
--color-m5i50ded: #8fd5d3;
--color-m5i8oped: rgba(0, 0, 0, 0.54);
--color-m5i8owxo: rgba(0, 0, 0, 0.27);
--color-m5japwdh: #f3f3f3;
--color-m7t6xf5v: #f4f9fd;
--color-m7t7fo08: #f1f1f1;
--color-m7t7w1z2: 2c2c2c;
--color-m7t7wkxr: #2c2c2c;
--color-lyrjldj8: rgba(255, 255, 255, 0.40);
--color-m7tnbp2a: #E6C200;
--color-m7tnc046: #009639;
--color-mb9jns3n: #f5f5f5;
--color-feyyelhr: #1d5f87ff;
--color-bgcgaqhs: #203243ff;
--color-nwvfcuyb: #4c7f9fff;
--color-yolautzu: #38bdedff;
--color-jpwjoper: #69ccf0ff;
--arial: 'Arial';
--lato: 'Lato';
--open-sans: 'Open Sans';
--montserrat: 'Montserrat';
--roboto: 'Roboto';
--inter: 'Inter';
--abel: 'Abel';
--poppins: 'Poppins';
--anton: 'Anton';
--playfair-display: 'Playfair Display';
--ubuntu: 'Ubuntu';
--plus-jakarta-sans: 'Plus Jakarta Sans';
--headlinefont: 'Plus Jakarta Sans';
--contentfont: 'Inter';
--text-color: #000000;
--link-color: #188bf6;
}
.bg-fixed {
bottom: 0;
top: 0;
left: 0;
right: 0;
position: fixed;
overflow: auto;
background-color: var(--white)
}
.drop-zone-draggable .hl_main_popup {
box-shadow: none;
padding: 20px;
margin-top: 0;
border-color: var(--gray);
border-width: 10px;
border-style: solid;
background-color: var(--white);
width: 720px
}
.drop-zone-draggable .row-I0anITcMkL {
margin: 0 auto
}
.drop-zone-draggable .row-I0anITcMkL {
box-shadow: none;
padding: 0;
background-color: var(--transparent);
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.drop-zone-draggable .col--P1KBwEgX2 {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.drop-zone-draggable #heading-dDopMDdHJn {
margin: 0
}
.drop-zone-draggable .cheading-dDopMDdHJn {
font-family: var(--headlinefont);
background-color: var(--transparent);
color: var(--color-m5i3v64t);
icon-color: var(--text-color);
font-weight: 400;
box-shadow: none;
padding: 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable #sub-heading-Vnk4AYUZKR {
margin: 0
}
.drop-zone-draggable .csub-heading-Vnk4AYUZKR {
font-family: var(--headlinefont);
background-color: var(--transparent);
color: var(--color-m5i4xm5y);
icon-color: var(--text-color);
font-weight: 400;
box-shadow: none;
padding: 10px 0 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable #paragraph-XsFB_dVUTE {
margin: 0
}
.drop-zone-draggable .cparagraph-XsFB_dVUTE {
font-family: var(--contentfont);
background-color: var(--transparent);
color: var(--color-m7t7wkxr);
icon-color: var(--text-color);
font-weight: medium;
box-shadow: none;
padding: 10px 0 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable .button-YlcBZzyp1a {
margin: 30px 0 0;
text-align: center
}
.drop-zone-draggable .cbutton-YlcBZzyp1a {
font-family: var(--headlinefont);
background-color: var(--color-m5i4y70u);
color: var(--white);
secondary-color: var(--white);
text-decoration: none;
padding: 15px 40px;
border-color: var(--transparent);
border-width: 1px;
border-style: solid;
letter-spacing: 0;
text-transform: none;
width: auto%;
box-shadow: 0 0 5px 2px #7070705c;
text-shadow: none
}
#hl_main_popup.popup-body {
position: absolute !important;
left: 50% !important;
bottom: auto !important;
transform: translate(-50%, 0) !important;
right: auto !important;
box-shadow: none;
padding: 20px;
margin-top: 0;
border-color: var(--gray);
border-width: 10px;
border-style: solid;
background-color: var(--white);
width: 720px
}
.--mobile #hl_main_popup.popup-body {
width: 380px !important
}
@media screen and (min-width:0px) and (max-width:480px) {
#hl_main_popup.popup-body {
width: 380px !important
}
}
#col--P1KBwEgX2>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
.heading-dDopMDdHJn {
font-weight: 900
}
.heading-dDopMDdHJn a,
.heading-dDopMDdHJn a * {
color: var(--link-color);
text-decoration: none
}
.heading-dDopMDdHJn a u,
.heading-dDopMDdHJn a:hover {
text-decoration: underline
}
.heading-dDopMDdHJn a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.heading-dDopMDdHJn h1,
.heading-dDopMDdHJn h2,
.heading-dDopMDdHJn h3,
.heading-dDopMDdHJn h4,
.heading-dDopMDdHJn h5,
.heading-dDopMDdHJn h6,
.heading-dDopMDdHJn ul li,
.heading-dDopMDdHJn.text-output {
font-size: 34px !important;
font-weight: 900
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.heading-dDopMDdHJn h1,
.heading-dDopMDdHJn h2,
.heading-dDopMDdHJn h3,
.heading-dDopMDdHJn h4,
.heading-dDopMDdHJn h5,
.heading-dDopMDdHJn h6,
.heading-dDopMDdHJn ul li,
.heading-dDopMDdHJn.text-output {
font-size: 3rem !important;
font-weight: 900
}
}
.heading-dDopMDdHJn.text-output h1:first-child:before,
.heading-dDopMDdHJn.text-output h2:first-child:before,
.heading-dDopMDdHJn.text-output h3:first-child:before,
.heading-dDopMDdHJn.text-output h4:first-child:before,
.heading-dDopMDdHJn.text-output h5:first-child:before,
.heading-dDopMDdHJn.text-output h6:first-child:before,
.heading-dDopMDdHJn.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
.sub-heading-Vnk4AYUZKR {
font-weight: 700
}
.sub-heading-Vnk4AYUZKR a,
.sub-heading-Vnk4AYUZKR a * {
color: var(--link-color);
text-decoration: none
}
.sub-heading-Vnk4AYUZKR a u,
.sub-heading-Vnk4AYUZKR a:hover {
text-decoration: underline
}
.sub-heading-Vnk4AYUZKR a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.sub-heading-Vnk4AYUZKR h1,
.sub-heading-Vnk4AYUZKR h2,
.sub-heading-Vnk4AYUZKR h3,
.sub-heading-Vnk4AYUZKR h4,
.sub-heading-Vnk4AYUZKR h5,
.sub-heading-Vnk4AYUZKR h6,
.sub-heading-Vnk4AYUZKR ul li,
.sub-heading-Vnk4AYUZKR.text-output {
font-size: 23px !important;
font-weight: 700
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.sub-heading-Vnk4AYUZKR h1,
.sub-heading-Vnk4AYUZKR h2,
.sub-heading-Vnk4AYUZKR h3,
.sub-heading-Vnk4AYUZKR h4,
.sub-heading-Vnk4AYUZKR h5,
.sub-heading-Vnk4AYUZKR h6,
.sub-heading-Vnk4AYUZKR ul li,
.sub-heading-Vnk4AYUZKR.text-output {
font-size: 1.8rem !important;
font-weight: 700
}
}
.sub-heading-Vnk4AYUZKR.text-output h1:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h2:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h3:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h4:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h5:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h6:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
.paragraph-XsFB_dVUTE {
font-weight: 500
}
.paragraph-XsFB_dVUTE a,
.paragraph-XsFB_dVUTE a * {
color: var(--link-color);
text-decoration: none
}
.paragraph-XsFB_dVUTE a u,
.paragraph-XsFB_dVUTE a:hover {
text-decoration: underline
}
.paragraph-XsFB_dVUTE a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.paragraph-XsFB_dVUTE h1,
.paragraph-XsFB_dVUTE h2,
.paragraph-XsFB_dVUTE h3,
.paragraph-XsFB_dVUTE h4,
.paragraph-XsFB_dVUTE h5,
.paragraph-XsFB_dVUTE h6,
.paragraph-XsFB_dVUTE ul li,
.paragraph-XsFB_dVUTE.text-output {
font-size: 18px !important;
font-weight: 500
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.paragraph-XsFB_dVUTE h1,
.paragraph-XsFB_dVUTE h2,
.paragraph-XsFB_dVUTE h3,
.paragraph-XsFB_dVUTE h4,
.paragraph-XsFB_dVUTE h5,
.paragraph-XsFB_dVUTE h6,
.paragraph-XsFB_dVUTE ul li,
.paragraph-XsFB_dVUTE.text-output {
font-size: 1.35rem !important;
font-weight: 500
}
}
.paragraph-XsFB_dVUTE.text-output h1:first-child:before,
.paragraph-XsFB_dVUTE.text-output h2:first-child:before,
.paragraph-XsFB_dVUTE.text-output h3:first-child:before,
.paragraph-XsFB_dVUTE.text-output h4:first-child:before,
.paragraph-XsFB_dVUTE.text-output h5:first-child:before,
.paragraph-XsFB_dVUTE.text-output h6:first-child:before,
.paragraph-XsFB_dVUTE.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
@media screen and (min-width:481px) and (max-width:10000px) {
.button-YlcBZzyp1a .button-icon-end,
.button-YlcBZzyp1a .button-icon-start,
.button-YlcBZzyp1a .main-heading-button {
font-size: 20px;
font-weight: 600
}
.button-YlcBZzyp1a .button-icon-start {
margin-right: 5px
}
.button-YlcBZzyp1a .button-icon-end {
margin-left: 5px
}
.button-YlcBZzyp1a .sub-heading-button {
font-size: 15px;
color: var(--white);
font-weight: 400
}
}
@media screen and (min-width:0px) and (max-width:480px) {
.button-YlcBZzyp1a .button-icon-end,
.button-YlcBZzyp1a .button-icon-start,
.button-YlcBZzyp1a .main-heading-button {
font-size: 20px;
font-weight: 600
}
.button-YlcBZzyp1a .button-icon-start {
margin-right: 5px
}
.button-YlcBZzyp1a .button-icon-end {
margin-left: 5px
}
.button-YlcBZzyp1a .sub-heading-button {
font-size: 15px;
color: var(--white);
font-weight: undefined
}
}
.drop-zone-draggable .hl_main_popup-cJ9-exlLaT {
box-shadow: none;
padding: 20px;
margin-top: 0;
border-color: var(--gray);
border-width: 10px;
border-style: solid;
background-color: var(--white);
width: 720px
}
.drop-zone-draggable .row-I0anITcMkL {
margin: 0 auto
}
.drop-zone-draggable .row-I0anITcMkL {
box-shadow: none;
padding: 0;
background-color: var(--transparent);
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.drop-zone-draggable .col--P1KBwEgX2 {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.drop-zone-draggable #heading-dDopMDdHJn {
margin: 0
}
.drop-zone-draggable .cheading-dDopMDdHJn {
font-family: var(--headlinefont);
background-color: var(--transparent);
color: var(--color-m5i3v64t);
icon-color: var(--text-color);
font-weight: 400;
box-shadow: none;
padding: 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable #sub-heading-Vnk4AYUZKR {
margin: 0
}
.drop-zone-draggable .csub-heading-Vnk4AYUZKR {
font-family: var(--headlinefont);
background-color: var(--transparent);
color: var(--color-m5i4xm5y);
icon-color: var(--text-color);
font-weight: 400;
box-shadow: none;
padding: 10px 0 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable #paragraph-XsFB_dVUTE {
margin: 0
}
.drop-zone-draggable .cparagraph-XsFB_dVUTE {
font-family: var(--contentfont);
background-color: var(--transparent);
color: var(--color-m7t7wkxr);
icon-color: var(--text-color);
font-weight: medium;
box-shadow: none;
padding: 10px 0 0;
opacity: 1;
text-shadow: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
line-height: 1.3em;
letter-spacing: 0;
text-align: center
}
.drop-zone-draggable .button-YlcBZzyp1a {
margin: 30px 0 0;
text-align: center
}
.drop-zone-draggable .cbutton-YlcBZzyp1a {
font-family: var(--headlinefont);
background-color: var(--color-m5i4y70u);
color: var(--white);
secondary-color: var(--white);
text-decoration: none;
padding: 15px 40px;
border-color: var(--transparent);
border-width: 1px;
border-style: solid;
letter-spacing: 0;
text-transform: none;
width: auto%;
box-shadow: 0 0 5px 2px #7070705c;
text-shadow: none
}
#hl_main_popup-cJ9-exlLaT.popup-body {
position: absolute !important;
left: 50% !important;
bottom: auto !important;
transform: translate(-50%, 0) !important;
right: auto !important;
box-shadow: none;
padding: 20px;
margin-top: 0;
border-color: var(--gray);
border-width: 10px;
border-style: solid;
background-color: var(--white);
width: 720px
}
.--mobile #hl_main_popup-cJ9-exlLaT.popup-body {
width: 380px !important
}
@media screen and (min-width:0px) and (max-width:480px) {
#hl_main_popup-cJ9-exlLaT.popup-body {
width: 380px !important
}
}
#col--P1KBwEgX2>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
.heading-dDopMDdHJn {
font-weight: 900
}
.heading-dDopMDdHJn a,
.heading-dDopMDdHJn a * {
color: var(--link-color);
text-decoration: none
}
.heading-dDopMDdHJn a u,
.heading-dDopMDdHJn a:hover {
text-decoration: underline
}
.heading-dDopMDdHJn a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.heading-dDopMDdHJn h1,
.heading-dDopMDdHJn h2,
.heading-dDopMDdHJn h3,
.heading-dDopMDdHJn h4,
.heading-dDopMDdHJn h5,
.heading-dDopMDdHJn h6,
.heading-dDopMDdHJn ul li,
.heading-dDopMDdHJn.text-output {
font-size: 34px !important;
font-weight: 900
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.heading-dDopMDdHJn h1,
.heading-dDopMDdHJn h2,
.heading-dDopMDdHJn h3,
.heading-dDopMDdHJn h4,
.heading-dDopMDdHJn h5,
.heading-dDopMDdHJn h6,
.heading-dDopMDdHJn ul li,
.heading-dDopMDdHJn.text-output {
font-size: 3rem !important;
font-weight: 900
}
}
.heading-dDopMDdHJn.text-output h1:first-child:before,
.heading-dDopMDdHJn.text-output h2:first-child:before,
.heading-dDopMDdHJn.text-output h3:first-child:before,
.heading-dDopMDdHJn.text-output h4:first-child:before,
.heading-dDopMDdHJn.text-output h5:first-child:before,
.heading-dDopMDdHJn.text-output h6:first-child:before,
.heading-dDopMDdHJn.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
.sub-heading-Vnk4AYUZKR {
font-weight: 700
}
.sub-heading-Vnk4AYUZKR a,
.sub-heading-Vnk4AYUZKR a * {
color: var(--link-color);
text-decoration: none
}
.sub-heading-Vnk4AYUZKR a u,
.sub-heading-Vnk4AYUZKR a:hover {
text-decoration: underline
}
.sub-heading-Vnk4AYUZKR a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.sub-heading-Vnk4AYUZKR h1,
.sub-heading-Vnk4AYUZKR h2,
.sub-heading-Vnk4AYUZKR h3,
.sub-heading-Vnk4AYUZKR h4,
.sub-heading-Vnk4AYUZKR h5,
.sub-heading-Vnk4AYUZKR h6,
.sub-heading-Vnk4AYUZKR ul li,
.sub-heading-Vnk4AYUZKR.text-output {
font-size: 23px !important;
font-weight: 700
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.sub-heading-Vnk4AYUZKR h1,
.sub-heading-Vnk4AYUZKR h2,
.sub-heading-Vnk4AYUZKR h3,
.sub-heading-Vnk4AYUZKR h4,
.sub-heading-Vnk4AYUZKR h5,
.sub-heading-Vnk4AYUZKR h6,
.sub-heading-Vnk4AYUZKR ul li,
.sub-heading-Vnk4AYUZKR.text-output {
font-size: 1.8rem !important;
font-weight: 700
}
}
.sub-heading-Vnk4AYUZKR.text-output h1:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h2:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h3:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h4:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h5:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output h6:first-child:before,
.sub-heading-Vnk4AYUZKR.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
.paragraph-XsFB_dVUTE {
font-weight: 500
}
.paragraph-XsFB_dVUTE a,
.paragraph-XsFB_dVUTE a * {
color: var(--link-color);
text-decoration: none
}
.paragraph-XsFB_dVUTE a u,
.paragraph-XsFB_dVUTE a:hover {
text-decoration: underline
}
.paragraph-XsFB_dVUTE a s {
text-decoration: line-through
}
@media screen and (min-width:0px) and (max-width:480px) {
.paragraph-XsFB_dVUTE h1,
.paragraph-XsFB_dVUTE h2,
.paragraph-XsFB_dVUTE h3,
.paragraph-XsFB_dVUTE h4,
.paragraph-XsFB_dVUTE h5,
.paragraph-XsFB_dVUTE h6,
.paragraph-XsFB_dVUTE ul li,
.paragraph-XsFB_dVUTE.text-output {
font-size: 18px !important;
font-weight: 500
}
}
@media screen and (min-width:481px) and (max-width:10000px) {
.paragraph-XsFB_dVUTE h1,
.paragraph-XsFB_dVUTE h2,
.paragraph-XsFB_dVUTE h3,
.paragraph-XsFB_dVUTE h4,
.paragraph-XsFB_dVUTE h5,
.paragraph-XsFB_dVUTE h6,
.paragraph-XsFB_dVUTE ul li,
.paragraph-XsFB_dVUTE.text-output {
font-size: 1.35rem !important;
font-weight: 500
}
}
.paragraph-XsFB_dVUTE.text-output h1:first-child:before,
.paragraph-XsFB_dVUTE.text-output h2:first-child:before,
.paragraph-XsFB_dVUTE.text-output h3:first-child:before,
.paragraph-XsFB_dVUTE.text-output h4:first-child:before,
.paragraph-XsFB_dVUTE.text-output h5:first-child:before,
.paragraph-XsFB_dVUTE.text-output h6:first-child:before,
.paragraph-XsFB_dVUTE.text-output p:first-child:before {
color: var(--text-color);
content: '\';
font-family: '';
margin-right: 5px;
font-weight: 700
}
@media screen and (min-width:481px) and (max-width:10000px) {
.button-YlcBZzyp1a .button-icon-end,
.button-YlcBZzyp1a .button-icon-start,
.button-YlcBZzyp1a .main-heading-button {
font-size: 20px;
font-weight: 600
}
.button-YlcBZzyp1a .button-icon-start {
margin-right: 5px
}
.button-YlcBZzyp1a .button-icon-end {
margin-left: 5px
}
.button-YlcBZzyp1a .sub-heading-button {
font-size: 15px;
color: var(--white);
font-weight: 400
}
}
@media screen and (min-width:0px) and (max-width:480px) {
.button-YlcBZzyp1a .button-icon-end,
.button-YlcBZzyp1a .button-icon-start,
.button-YlcBZzyp1a .main-heading-button {
font-size: 20px;
font-weight: 600
}
.button-YlcBZzyp1a .button-icon-start {
margin-right: 5px
}
.button-YlcBZzyp1a .button-icon-end {
margin-left: 5px
}
.button-YlcBZzyp1a .sub-heading-button {
font-size: 15px;
color: var(--white);
font-weight: undefined
}
}
#section-RmjsQBn2NZ {
background: radial-gradient(1100px 520px at 88% -12%, rgba(39, 186, 234, .12), transparent 60%),
radial-gradient(900px 520px at -10% -20%, rgba(143, 213, 211, .12), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
}
#section-NxFANpNVjB {
background: radial-gradient(1000px 500px at 20% -10%, rgba(39, 186, 234, .10), transparent 60%),
radial-gradient(800px 480px at 100% 110%, rgba(255, 165, 0, .08), transparent 60%),
linear-gradient(180deg, #f9fcff 0%, #ffffff 100%) !important;
}
#section-6ubolPpyOi {
background: linear-gradient(180deg, #f9fcff 0%, #eef7fb 100%) !important;
}
/* ---- Navi+Header styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .section-RmjsQBn2NZ {
box-shadow: none;
padding: 20px 0 80px;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .section-RmjsQBn2NZ {
padding-bottom: 40px
}
}
.hl_page-preview--content .row-YV8566xGwp {
margin: 70px auto 0
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-YV8566xGwp {
margin-top: 0
}
}
.hl_page-preview--content .col-MsukgMsP1W,
.hl_page-preview--content .col-XmSfY6tXB9,
.hl_page-preview--content .row-YV8566xGwp,
.hl_page-preview--content .row-y_gbyH5ynN {
box-shadow: none;
padding: 0 15px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.hl_page-preview--content .col-MsukgMsP1W,
.hl_page-preview--content .col-XmSfY6tXB9,
.hl_page-preview--content .row-y_gbyH5ynN {
padding: 0;
margin: 0
}
.hl_page-preview--content .col-MsukgMsP1W,
.hl_page-preview--content .row-y_gbyH5ynN {
margin: 0 auto
}
.hl_page-preview--content .col-MsukgMsP1W {
padding: 10px 5px 10px 20px;
width: 42.7%;
margin: 0
}
.hl_page-preview--content .custom-code-Ds6xJrC81X {
margin: 0
}
.hl_page-preview--content .col-iCpVOmqLFf {
box-shadow: none;
padding: 10px 20px 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 57.3%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-Tn2xfG0bo3 {
margin: 0
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .custom-code-Tn2xfG0bo3 {
margin-top: 20px
}
}
.hl_page-preview--content .col-MMdsDa9-wN,
.hl_page-preview--content .row-6XF3TQGf-F {
margin: 0 auto 20px;
box-shadow: none;
padding: 0 15px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.hl_page-preview--content .col-MMdsDa9-wN {
padding: 0;
margin: 0
}
.hl_page-preview--content .custom-code-7yyv7PtCOl {
margin: 0
}
#section-RmjsQBn2NZ>.inner {
max-width: 1170px
}
#col-MMdsDa9-wN>.inner,
#col-MsukgMsP1W>.inner,
#col-XmSfY6tXB9>.inner,
#col-iCpVOmqLFf>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- Stripe Loop styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .row-iHXIFkOfor,
.hl_page-preview--content .section-Wau-RhF31u {
box-shadow: none;
padding: 0;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
.hl_page-preview--content .row-iHXIFkOfor {
margin: 0 auto;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-iHXIFkOfor {
padding-left: 0 !important;
padding-right: 0 !important
}
}
.hl_page-preview--content .col-OCw3PE7qVC {
box-shadow: none;
padding: 0;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-u8js7un-xo {
margin: 0
}
#section-Wau-RhF31u>.inner {
max-width: 100%
}
#col-OCw3PE7qVC>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- Section styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .section-NxFANpNVjB {
box-shadow: none;
padding: 0;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .section-NxFANpNVjB {
padding-bottom: 60px
}
}
.hl_page-preview--content .col-IG2zx_fLxs,
.hl_page-preview--content .row-lB7VT_aM58 {
margin: 0 auto;
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.hl_page-preview--content .col-IG2zx_fLxs {
padding: 10px 5px 10px 20px;
width: 50%;
margin: 0
}
.hl_page-preview--content .custom-code-HbD_WKuFn8 {
margin: 0;
width: auto;
height: auto
}
.hl_page-preview--content .col-6lqbg0Rhek {
box-shadow: none;
padding: 10px 20px 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 50%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-ZQ0WuxKvdb {
margin: 0;
width: auto;
height: auto
}
#section-NxFANpNVjB>.inner {
max-width: 1170px
}
#col-6lqbg0Rhek>.inner,
#col-IG2zx_fLxs>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- Cooperative VS Traditional styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .section-6ubolPpyOi {
box-shadow: none;
padding: 50px 0 20px;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .section-6ubolPpyOi {
padding-top: 40px;
padding-bottom: 0
}
}
.hl_page-preview--content .row-uYUwWtq9Bz {
margin: 20px auto 0;
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-uYUwWtq9Bz {
padding-top: 0
}
}
.hl_page-preview--content .col-GLwMSeE5bM {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-9Zwdpfroaj {
margin: 0
}
.hl_page-preview--content .row-MLB0v23dOF {
margin: 20px auto 0;
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-MLB0v23dOF {
padding-left: 15px !important;
padding-right: 15px !important
}
}
.hl_page-preview--content .col-L0F8vjYouP {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-iJdUVa6eEA {
margin: 0
}
.hl_page-preview--content .row-22CUYdtQpQ {
margin: 0 auto;
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-22CUYdtQpQ {
padding-bottom: 0
}
}
.hl_page-preview--content .col-K5HyUh-yvY {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-Nn8O7RP9kk {
margin: 0
}
#section-6ubolPpyOi>.inner {
max-width: 1170px
}
#col-GLwMSeE5bM>.inner,
#col-K5HyUh-yvY>.inner,
#col-L0F8vjYouP>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- CUI (Q) styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .section-PfsnW6sQF3 {
box-shadow: none;
padding: 60px 0 20px;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .section-PfsnW6sQF3 {
padding-top: 30px;
padding-bottom: 20px
}
}
.hl_page-preview--content .col-m5lRNsKZCg,
.hl_page-preview--content .row-tDO6YUd9Zh {
margin: 0 auto;
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.hl_page-preview--content .col-m5lRNsKZCg {
padding: 10px 5px 10px 40px;
width: 50%;
margin: 0
}
.hl_page-preview--content .custom-code-hgR8rdT_Ee {
margin: 0
}
.hl_page-preview--content .col-2Lu7KJiazt {
box-shadow: none;
padding: 10px 40px 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 50%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-upb4CsGPgI {
margin: 0
}
#section-PfsnW6sQF3>.inner {
max-width: 1170px
}
#col-2Lu7KJiazt>.inner,
#col-m5lRNsKZCg>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- Section styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .section-tmE2y4Tsz4 {
box-shadow: none;
padding: 20px 0 60px;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .section-tmE2y4Tsz4 {
padding-top: 20px;
padding-bottom: 30px
}
}
.hl_page-preview--content .row-uuFUnKqhIR {
margin: 0 auto;
box-shadow: none;
padding: 20px 5px 10px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-uuFUnKqhIR {
padding-right: 15px !important;
padding-left: 15px !important
}
}
.hl_page-preview--content .col-FqM6fDqvzP {
box-shadow: none;
padding: 0 5px 10px;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .col-FqM6fDqvzP {
padding-top: 0
}
}
.hl_page-preview--content .custom-code-HFz3JEEbUC {
margin: 0
}
.hl_page-preview--content .row-1Or-3QTdBO {
margin: 0 auto;
box-shadow: none;
padding: 20px 5px 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-1Or-3QTdBO {
padding-top: 20px;
padding-left: 10px !important;
padding-right: 10px !important
}
}
.hl_page-preview--content .col-fiTgBmUF4r {
box-shadow: none;
padding: 10px 5px;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .col-fiTgBmUF4r {
padding-bottom: 0
}
}
.hl_page-preview--content .custom-code-ZnsQI82pZ1 {
margin: 0
}
.hl_page-preview--content .col-SMemq3NIly,
.hl_page-preview--content .row-JeQmlgSKyJ {
margin: 0 auto;
box-shadow: none;
padding: 20px 5px;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid;
width: 100%
}
.hl_page-preview--content .col-SMemq3NIly {
padding: 10px 5px 0;
margin: 0
}
.hl_page-preview--content .custom-code-KPOMJl_aVn {
margin: 0
}
#section-tmE2y4Tsz4>.inner {
max-width: 1170px
}
#col-FqM6fDqvzP>.inner,
#col-SMemq3NIly>.inner,
#col-fiTgBmUF4r>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
/* ---- Section styles ----- */
:root {
--black: #000000;
--transparent: transparent
}
.hl_page-preview--content .row-nRY9gCXjFT,
.hl_page-preview--content .section-XPZSiDo52Y {
box-shadow: none;
padding: 0;
margin: 0;
background-color: var(--transparent);
backdrop-filter: none;
border-color: var(--black);
border-width: 2px;
border-style: solid
}
.hl_page-preview--content .row-nRY9gCXjFT {
margin: 0 auto;
width: 100%
}
@media screen and (min-width:0px) and (max-width:480px) {
.hl_page-preview--content .row-nRY9gCXjFT {
padding-left: 0 !important;
padding-right: 0 !important
}
}
.hl_page-preview--content .col-IvKK6n2-fJ {
box-shadow: none;
padding: 0;
background-color: var(--transparent);
backdrop-filter: none;
width: 100%;
border-color: var(--black);
border-width: 2px;
border-style: solid;
margin: 0
}
.hl_page-preview--content .custom-code-JNEBiYQO8a {
margin: 0
}
#section-XPZSiDo52Y>.inner {
max-width: 100%
}
#col-IvKK6n2-fJ>.inner {
flex-direction: column;
justify-content: center;
align-items: inherit;
flex-wrap: nowrap
}
#section-RmjsQBn2NZ {
background: radial-gradient(1100px 520px at 88% -12%, rgba(39, 186, 234, .12), transparent 60%),
radial-gradient(900px 520px at -10% -20%, rgba(143, 213, 211, .12), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
}
#section-NxFANpNVjB {
background: radial-gradient(1000px 500px at 20% -10%, rgba(39, 186, 234, .10), transparent 60%),
radial-gradient(800px 480px at 100% 110%, rgba(255, 165, 0, .08), transparent 60%),
linear-gradient(180deg, #f9fcff 0%, #ffffff 100%) !important;
}
#section-6ubolPpyOi {
background: linear-gradient(180deg, #f9fcff 0%, #eef7fb 100%) !important;
}
.flex {
display: flex
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.flex-grow {
flex-grow: 9999
}
.align-center {
align-items: center
}
.h-full {
height: 100%
}
.max-w-400 {
max-width: 400px
}
.text-right {
text-align: right
}
.d-grid {
display: grid
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.gap-1 {
gap: .3rem
}
.items-end {
align-items: flex-end
}
.relative {
position: relative
}
.gap-2 {
gap: .625rem
}
.mt-20 {
margin-top: 20px
}
.mt-8 {
margin-top: 32px
}
.ml-3 {
margin-left: .75rem
}
.mr-10 {
margin-right: 10px
}
.mt-4 {
margin-top: 1rem
}
.mb-4 {
margin-bottom: 1rem
}
.w-100 {
width: 100%
}
.h-100 {
height: 100%
}
.w-50 {
width: 50%
}
.w-25 {
width: 25%
}
.mw-100 {
max-width: 100%
}
.noBorder {
border: none !important
}
.iti__flag {
background-image: url(https://stcdn.leadconnectorhq.com/intl-tel-input/17.0.12/img/flags.png)
}
.pointer {
cursor: pointer
}
@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
.iti__flag {
background-image: url(https://stcdn.leadconnectorhq.com/intl-tel-input/17.0.12/img/flags@2x.png)
}
}
.iti__country {
display: flex;
justify-content: space-between
}
@media (min-width:768px) {
.hl_wrapper.nav-shrink .hl_wrapper--inner.page-creator,
body {
padding-top: 0
}
.hl_page-creator--menu {
left: 0;
top: 0;
z-index: 10
}
.hl_wrapper {
padding-left: 0
}
}
@media (min-width:1200px) {
.hl_wrapper.nav-shrink {
padding-left: 0 !important
}
}
html body .hl_wrapper {
height: 100vh;
overflow: hidden
}
body {
margin: 0;
-webkit-font-smoothing: antialiased
}
img {
border-style: none;
vertical-align: middle
}
.bg-fixed {
z-index: -1
}
.progress-outer {
background-color: #f5f5f5;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
font-size: 14px;
height: 35px;
line-height: 36px;
overflow: hidden;
padding-bottom: 0;
padding-top: 0;
width: 100%
}
.progress-inner {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
color: #fff;
float: left;
font-size: 14px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
transition: width .6s ease;
width: 0
}
.progress0 {
width: 0
}
.progress10 {
width: 10%
}
.progress20 {
width: 20%
}
.progress30 {
width: 30%
}
.progress40 {
width: 40%
}
.progress50 {
width: 50%
}
.progress60 {
width: 60%
}
.progress70 {
width: 70%
}
.progress80 {
width: 80%
}
.progress90 {
width: 90%
}
.progress100 {
width: 100%
}
.progressbarOffsetWhite {
background: #f5f5f5
}
.progressbarOffsetTransparentWhite {
background-color: hsla(0, 0%, 100%, .5)
}
.progressbarOffsetBlack {
background: #333
}
.progressbarOffsetTransparentBlack {
background-color: hsla(0, 0%, 49%, .5)
}
.text-white {
color: #fff
}
.text-bold {
font-weight: 700
}
.text-italic {
font-style: italic
}
.text-bold-italic {
font-style: italic;
font-weight: 700
}
.progressbarSmall {
font-size: 14px;
height: 35px;
line-height: 36px
}
.progressbarMedium {
font-size: 19px;
height: 45px;
line-height: 45px
}
.progressbarLarge {
font-size: 21px;
height: 65px;
line-height: 65px
}
.recaptcha-container {
margin-bottom: 1em
}
.recaptcha-container p {
color: red;
margin-top: 1em
}
.button-recaptcha-container div:first-child {
height: auto !important;
width: 100% !important
}
.card-el-error-msg {
align-items: center;
color: #e25950;
display: flex;
font-size: 13px;
justify-content: flex-start;
padding: 10px 0;
text-align: center
}
.card-el-error-msg svg {
color: #f87171;
margin-right: 2px
}
.hl-faq-child-heading {
border: none;
cursor: pointer;
justify-content: space-between;
outline: none;
padding: 15px;
width: 100%
}
.hl-faq-child-head,
.hl-faq-child-heading {
align-items: center;
display: flex
}
.v-enter-active,
.v-leave-active {
transition: opacity .2s ease-out
}
.v-enter-from,
.v-leave-to {
opacity: 0
}
.faq-separated-child {
margin-bottom: 10px
}
.hl-faq-child-panel img {
border-radius: 15px;
cursor: pointer
}
.hl-faq-child-heading-icon.left {
margin-right: 1em
}
.expand-collapse-all-button {
background-color: transparent;
border: 1px solid #d1d5db;
border-radius: 15px;
color: #3b82f6;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 16px;
margin: 1em 0;
padding: 5px 15px
}
.hl-faq-child-panel {
transition: padding .2s ease
}
.v-spinner .v-moon1 {
position: relative
}
.v-spinner .v-moon1,
.v-spinner .v-moon2 {
animation: v-moonStretchDelay .6s linear 0s infinite;
animation-fill-mode: forwards
}
.v-spinner .v-moon2 {
opacity: .8;
position: absolute
}
.v-spinner .v-moon3 {
opacity: .1
}
@keyframes v-moonStretchDelay {
to {
transform: rotate(1turn)
}
}
.generic-error-message {
color: red;
font-weight: 500;
margin-top: .5rem;
text-align: center
}
#faq-overlay {
background: var(--overlay);
height: 100vh;
opacity: .8;
width: 100vw
}
#faq-overlay,
#faq-popup {
position: fixed;
z-index: 1000
}
#faq-popup {
background: #fff;
height: auto;
left: 50%;
margin-left: -250px;
margin-top: -250px;
top: 50%;
width: 500px
}
#popupclose {
cursor: pointer;
float: right;
padding: 10px
}
.popupcontent {
height: auto !important;
width: 100% !important
}
#button {
cursor: pointer
}
.dark {
background-color: #000
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.spotlight {
background: linear-gradient(45deg, #00dc82, #36e4da 50%, #0047e1);
bottom: -30vh;
filter: blur(20vh);
height: 40vh
}
.z-10 {
z-index: 10
}
.right-0 {
right: 0
}
.left-0 {
left: 0
}
.fixed {
position: fixed
}
.text-black {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, var(--tw-text-opacity))
}
.overflow-hidden {
overflow: hidden
}
.min-h-screen {
min-height: 100vh
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}
.place-content-center {
place-content: center
}
.grid {
display: grid
}
.z-20 {
z-index: 20
}
.max-w-520px {
max-width: 520px
}
.mb-8 {
margin-bottom: 2rem
}
.text-8xl {
font-size: 6rem;
line-height: 1
}
.font-medium {
font-weight: 500
}
.mb-16 {
margin-bottom: 4rem
}
.leading-tight {
line-height: 1.25
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.font-light {
font-weight: 300
}
@media (min-width:640px) {
.sm-text-10xl {
font-size: 10rem;
line-height: 1
}
.sm-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.sm-px-0 {
padding-left: 0;
padding-right: 0
}
}
.full-center {
background-position: 50% !important;
background-repeat: repeat !important;
background-size: cover !important
}
.fill-width {
background-size: 100% auto !important
}
.fill-width,
.fill-width-height {
background-repeat: no-repeat !important
}
.fill-width-height {
background-size: 100% 100% !important
}
.no-repeat {
background-repeat: no-repeat !important
}
.repeat-x {
background-repeat: repeat-x !important
}
.repeat-y {
background-repeat: repeat-y !important
}
.repeat-x-fix-top {
background-position: top !important;
background-repeat: repeat-x !important
}
.repeat-x-fix-bottom {
background-position: bottom !important;
background-repeat: repeat-x !important
}
#overlay {
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
transition: opacity .3s ease;
width: 100%;
z-index: 999;
-webkit-overflow-scrolling: touch
}
#overlay.show {
opacity: 1
}
.popup-body {
background-color: #fff;
height: auto;
left: 50%;
min-height: 180px;
position: absolute;
top: 10%;
transition: transform .25s ease-in-out
}
.popup-body,
.popup-body.show {
transform: translate(-50%)
}
.closeLPModal {
cursor: pointer;
position: absolute;
right: -10px;
top: -10px;
z-index: 21
}
.settingsPModal {
font-size: 18px;
left: 40%;
padding: 10px;
position: absolute;
top: -40px;
width: 32px
}
.c-section>.inner {
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
z-index: 2
}
.c-row>.inner {
display: flex;
width: 100%
}
.c-column>.inner {
display: flex;
flex-direction: column;
height: 100%;
justify-content: inherit;
width: 100% !important
}
.c-wrapper {
position: relative
}
.previewer {
--vw: 100vh/100;
height: calc(100vh - 170px);
margin: auto;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
width: 100%
}
.c-element {
position: relative
}
.c-column {
flex: 1
}
.c-column,
.c-row {
position: relative
}
p+p {
margin-top: auto
}
.hl_page-creator--row.active {
border-color: #188bf6
}
.flip-list-move {
transition: transform .5s
}
.page-wrapper .sortable-ghost:before {
background: #188bf6 !important;
border-radius: 4px;
content: "";
height: 4px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%
}
.page-wrapper .sortable-ghost {
border: none !important;
position: relative
}
.active-drop-area:before {
color: grey;
content: "";
font-size: 12px;
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%)
}
.active-drop-area {
border: 1px dashed grey
}
.active-drop-area.is-empty {
min-height: 60px
}
.empty-component {
align-items: center;
border: 1px dashed #d7dde9;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.empty-component,
.empty-component-min-height {
min-height: 100px;
pointer-events: none
}
.dividerContainer {
width: 100%
}
.items-center {
align-items: center
}
.font-semibold {
font-weight: 600
}
.text-2xl {
font-size: 1.5rem
}
.text-sm {
font-size: .875rem
}
.w-full {
width: 100%
}
.mr-2 {
margin-right: .5rem
}
.mt-2 {
margin-top: .5rem
}
.justify-between {
justify-content: space-between
}
.text-lg {
font-size: 1.125rem
}
.font-base {
font-weight: 400
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center !important
}
.text-center {
text-align: center
}
.centered {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%
}
.mx-auto {
margin: 0 auto
}
@media only screen and (max-width:767px) {
.c-row>.inner {
flex-direction: column
}
.desktop-only {
display: none
}
.c-column,
.c-row {
width: 100% !important
}
.c-column,
.c-column>.inner,
.c-row>.inner,
.c-section,
.c-section>.inner {
padding-left: 0 !important;
padding-right: 0 !important
}
.c-column,
.c-column>.inner,
.c-row {
margin-left: 0 !important;
margin-right: 0 !important
}
.c-row {
padding-left: 10px !important;
padding-right: 10px !important
}
}
@media only screen and (min-width:768px) {
.mobile-only {
display: none
}
}
.c-button button {
outline: none;
position: relative
}
.fa,
.fab,
.fal,
.far,
.fas {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto
}
.c-column {
flex: 1 1 auto !important
}
.c-column>.inner.horizontal>div {
flex: 1
}
.c-row>.inner {
display: flex;
width: 100%
}
.c-nested-column .c-row>.inner {
width: 100% !important
}
.c-nested-column .inner {
border: none !important
}
.bgCover.bg-fixed:before {
background-attachment: fixed !important;
background-position: 50% !important;
background-repeat: repeat !important;
background-size: cover !important;
-webkit-background-size: cover !important
}
@supports (-webkit-touch-callout:inherit) {
.bgCover.bg-fixed:before {
background-attachment: scroll !important
}
}
.bgCover100.bg-fixed:before {
background-size: 100% auto !important;
-webkit-background-size: 100% auto !important
}
.bgCover100.bg-fixed:before,
.bgNoRepeat.bg-fixed:before {
background-repeat: no-repeat !important
}
.bgRepeatX.bg-fixed:before {
background-repeat: repeat-x !important
}
.bgRepeatY.bg-fixed:before {
background-repeat: repeat-y !important
}
.bgRepeatXTop.bg-fixed:before {
background-position: top !important;
background-repeat: repeat-x !important
}
.bgRepeatXBottom.bg-fixed:before {
background-position: bottom !important;
background-repeat: repeat-x !important
}
.bgCover {
background-attachment: fixed !important;
background-position: 50% !important;
background-repeat: repeat !important;
background-size: cover !important;
-webkit-background-size: cover !important
}
@supports (-webkit-touch-callout:inherit) {
.bgCover {
background-attachment: scroll !important
}
}
.bgCover100 {
background-size: 100% auto !important;
-webkit-background-size: 100% auto !important
}
.bgCover100,
.bgNoRepeat {
background-repeat: no-repeat !important
}
.bgRepeatX {
background-repeat: repeat-x !important
}
.bgRepeatY {
background-repeat: repeat-y !important
}
.bgRepeatXTop {
background-position: top !important
}
.bgRepeatXBottom,
.bgRepeatXTop {
background-repeat: repeat-x !important
}
.bgRepeatXBottom {
background-position: bottom !important
}
.cornersTop {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important
}
.cornersBottom {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important
}
.radius0 {
border-radius: 0
}
.radius1 {
border-radius: 1px
}
.radius2 {
border-radius: 2px
}
.radius3 {
border-radius: 3px
}
.radius4 {
border-radius: 4px
}
.radius5 {
border-radius: 5px
}
.radius10 {
border-radius: 10px
}
.radius15 {
border-radius: 15px
}
.radius20 {
border-radius: 20px
}
.radius25 {
border-radius: 25px
}
.radius50 {
border-radius: 50px
}
.radius75 {
border-radius: 75px
}
.radius100 {
border-radius: 100px
}
.radius125 {
border-radius: 125px
}
.radius150 {
border-radius: 150px
}
.borderTopBottom {
border-bottom-color: rgba(0, 0, 0, .7);
border-left: none !important;
border-right: none !important;
border-top-color: rgba(0, 0, 0, .7)
}
.borderTop {
border-bottom: none !important;
border-top-color: rgba(0, 0, 0, .7)
}
.borderBottom,
.borderTop {
border-left: none !important;
border-right: none !important
}
.borderBottom {
border-bottom-color: rgba(0, 0, 0, .7);
border-top: none !important
}
.borderFull {
border-color: rgba(0, 0, 0, .7)
}
@keyframes rocking {
0% {
transform: rotate(0deg)
}
25% {
transform: rotate(0deg)
}
50% {
transform: rotate(2deg)
}
75% {
transform: rotate(-2deg)
}
to {
transform: rotate(0deg)
}
}
.buttonRocking {
animation: rocking 2s infinite;
animation-timing-function: ease-out;
transition: .2s
}
.buttonPulseGlow {
animation: pulseGlow 2s infinite;
animation-timing-function: ease-in-out
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0)
}
25% {
box-shadow: 0 0 2.5px 1px hsla(0, 0%, 100%, .25)
}
50% {
box-shadow: 0 0 5px 2px hsla(0, 0%, 100%, .5)
}
85% {
box-shadow: 0 0 5px 5px hsla(0, 0%, 100%, 0)
}
to {
box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0)
}
}
.buttonBounce {
animation: bounce 1.5s infinite;
animation-timing-function: ease-in;
transition: .2s
}
@keyframes bounce {
15% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
35% {
box-shadow: 0 8px 5px -5px rgba(0, 0, 0, .25);
transform: translateY(-35%)
}
45% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
55% {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, .25);
transform: translateY(-20%)
}
70% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
80% {
box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .25);
transform: translateY(-10%)
}
90% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
95% {
box-shadow: 0 2px 3px -3px rgba(0, 0, 0, .25);
transform: translateY(-2%)
}
99% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
to {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
}
@keyframes elevate {
0% {
box-shadow: 0 0 0 0 transparent;
transform: translateY(0)
}
to {
box-shadow: 0 8px 5px -5px rgba(0, 0, 0, .25);
transform: translateY(-10px)
}
}
.buttonElevate:hover {
animation: elevate .2s forwards
}
.buttonElevate {
box-shadow: 0 0 0 0 transparent;
transition: .2s
}
.buttonWobble {
transition: .3s
}
.buttonWobble:hover {
animation: wobble .5s 1;
animation-timing-function: ease-in-out
}
@keyframes wobble {
0% {
transform: skewX(0deg)
}
25% {
transform: skewX(10deg)
}
50% {
transform: skewX(0deg)
}
75% {
transform: skewX(-10deg)
}
to {
transform: skewX(0deg)
}
}
.image-container img {
max-width: 100%;
vertical-align: middle
}
.sub-text ::-moz-placeholder {
color: #000;
opacity: 1
}
.sub-text ::placeholder {
color: #000;
opacity: 1
}
.image-container {
height: 100%;
width: 100%
}
.shadow5inner {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05)
}
.shadow10inner {
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
}
.shadow20inner {
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2)
}
.shadow30inner {
box-shadow: inset 0 2px 5px 2px rgba(0, 0, 0, .3)
}
.shadow40inner {
box-shadow: inset 0 2px 5px 2px rgba(0, 0, 0, .4)
}
.shadow5 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}
.shadow10 {
box-shadow: 0 1px 5px rgba(0, 0, 0, .1)
}
.shadow20 {
box-shadow: 0 1px 5px rgba(0, 0, 0, .2)
}
.shadow30 {
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .3)
}
.shadow40 {
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .4)
}
.sub-heading-button {
color: #fff;
font-weight: 400;
line-height: normal;
opacity: .8;
text-align: center
}
.wideSection {
max-width: 1120px
}
.midWideSection,
.wideSection {
margin-left: auto !important;
margin-right: auto !important
}
.midWideSection {
max-width: 960px
}
.midSection {
margin-left: auto !important;
margin-right: auto !important;
max-width: 720px
}
.c-section>.inner {
margin-left: auto;
margin-right: auto;
max-width: 1170px;
width: 100%
}
.c-column {
padding-left: 15px;
padding-right: 15px
}
.feature-img-circle img,
.img-circle,
.img-circle img {
border-radius: 50% !important
}
.feature-img-round-corners img,
.img-round-corners,
.img-round-corners img {
border-radius: 5px
}
.feature-image-dark-border img,
.image-dark-border {
border: 3px solid rgba(0, 0, 0, .7)
}
.feature-image-white-border img,
.image-white-border {
border: 3px solid #fff
}
.img-grey,
.img-grey img {
filter: grayscale(100%);
filter: gray;
-webkit-transition: all .6s ease
}
.button-shadow1 {
box-shadow: 0 1px 5px rgba(0, 0, 0, .2)
}
.button-shadow2 {
box-shadow: 0 1px 5px rgba(0, 0, 0, .4)
}
.button-shadow3 {
box-shadow: 0 1px 5px rgba(0, 0, 0, .7)
}
.button-shadow4 {
box-shadow: 0 8px 1px rgba(0, 0, 0, .1)
}
.button-shadow5 {
box-shadow: 0 0 25px rgba(0, 0, 0, .2), 0 0 15px rgba(0, 0, 0, .2), 0 0 3px rgba(0, 0, 0, .4)
}
.button-shadow6 {
box-shadow: 0 0 25px rgba(0, 0, 0, .4), 0 0 15px hsla(0, 0%, 100%, .2), 0 0 3px hsla(0, 0%, 100%, .4)
}
.button-shadow-sharp1 {
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2)
}
.button-shadow-sharp2 {
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .2)
}
.button-shadow-sharp3 {
box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .2)
}
.button-shadow-highlight {
box-shadow: none
}
.button-shadow-highlight:hover {
box-shadow: inset 0 0 0 0 hsla(0, 0%, 100%, .22), inset 0 233px 233px 0 hsla(0, 0%, 100%, .12)
}
.button-flat-line {
background-color: transparent !important;
border-width: 2px
}
.button-vp-5 {
padding-bottom: 5px !important;
padding-top: 5px !important
}
.button-vp-10 {
padding-bottom: 10px !important;
padding-top: 10px !important
}
.button-vp-15 {
padding-bottom: 15px !important;
padding-top: 15px !important
}
.button-vp-20 {
padding-bottom: 20px !important;
padding-top: 20px !important
}
.button-vp-25 {
padding-bottom: 25px !important;
padding-top: 25px !important
}
.button-vp-30 {
padding-bottom: 30px !important;
padding-top: 30px !important
}
.button-vp-40 {
padding-bottom: 40px !important;
padding-top: 40px !important
}
.button-vp-0 {
padding-bottom: 0 !important;
padding-top: 0 !important
}
.button-hp-5 {
padding-left: 5px !important;
padding-right: 5px !important
}
.button-hp-10 {
padding-left: 10px !important;
padding-right: 10px !important
}
.button-hp-15 {
padding-left: 15px !important;
padding-right: 15px !important
}
.button-hp-20 {
padding-left: 20px !important;
padding-right: 20px !important
}
.button-hp-25 {
padding-left: 25px !important;
padding-right: 25px !important
}
.button-hp-30 {
padding-left: 30px !important;
padding-right: 30px !important
}
.button-hp-40 {
padding-left: 40px !important;
padding-right: 40px !important
}
.button-hp-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.vs__dropdown-toggle {
background: #f3f8fb !important;
border: none !important;
height: 43px !important
}
.row-align-center {
margin: 0 auto
}
.row-align-left {
margin: 0 auto;
margin-left: 0 !important
}
.row-align-right {
margin: 0 auto;
margin-right: 0 !important
}
button,
input,
optgroup,
select,
textarea {
border-radius: unset;
font-family: unset;
font-size: unset;
line-height: unset;
margin: unset;
text-transform: unset
}
body {
font-weight: unset !important;
line-height: unset !important;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word
}
*,
:after,
:before {
box-sizing: border-box
}
.main-heading-group>div {
display: inline-block
}
.c-button span.main-heading-group,
.c-button span.sub-heading-group {
display: block
}
.time-grid-3 {
grid-template-columns: repeat(3, 100px)
}
.time-grid-3,
.time-grid-4 {
display: grid;
text-align: center
}
.time-grid-4 {
grid-template-columns: repeat(4, 100px)
}
@media screen and (max-width:767px) {
.time-grid-3 {
grid-template-columns: repeat(3, 80px)
}
.time-grid-4 {
grid-template-columns: repeat(4, 70px)
}
}
.time-grid .timer-box {
display: grid;
font-size: 15px;
grid-template-columns: 1fr;
text-align: center
}
.timer-box .label {
font-weight: 300
}
.c-button button {
cursor: pointer
}
.c-button>a {
text-decoration: none
}
.c-button>a,
.c-button>a span {
display: inline-block
}
.nav-menu-wrapper {
display: flex;
justify-content: space-between
}
.nav-menu-wrapper.default {
flex-direction: row
}
.nav-menu-wrapper.reverse {
flex-direction: row-reverse
}
.nav-menu-wrapper .branding {
align-items: center;
display: flex
}
.nav-menu-wrapper.default .branding {
flex-direction: row
}
.nav-menu-wrapper.reverse .branding {
flex-direction: row-reverse
}
.nav-menu-wrapper.default .branding .logo,
.nav-menu-wrapper.reverse .branding .title {
margin-right: 18px
}
.nav-menu-wrapper .branding .title {
align-items: center;
display: flex;
min-height: 50px;
min-width: 50px
}
.nav-menu {
align-items: center;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0
}
.nav-menu a {
text-decoration: none
}
.dropdown {
display: inline-block;
position: relative
}
.dropdown .dropdown-menu {
border: none;
box-shadow: 0 8px 16px 5px rgba(0, 0, 0, .1)
}
.dropdown-menu {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .3125rem;
color: #607179;
display: none;
float: left;
font-size: 1rem;
left: 0;
list-style: none;
margin: .125rem 0 0;
min-width: 10rem;
padding: .5rem 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000
}
.nav-menu .nav-menu-item.dropdown:hover>.dropdown-menu {
display: block
}
.nav-menu .dropdown-menu {
display: none;
list-style: none;
margin: 0;
padding: 0
}
.nav-menu-mobile {
display: none
}
.nav-menu-mobile i {
cursor: pointer;
font-size: 24px
}
#nav-menu-popup {
background: var(--overlay);
bottom: 0;
display: none;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
transition: opacity .3s ease;
width: 100%;
z-index: 100
}
#nav-menu-popup.show {
opacity: 1
}
#nav-menu-popup .nav-menu-body {
background-color: #fff;
height: 100%;
left: 0;
overflow: auto;
padding: 45px;
position: absolute;
top: 0;
width: 100%
}
#nav-menu-popup .nav-menu-body .close-menu {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
z-index: 100
}
#nav-menu-popup .nav-menu-body .close-menu:before {
content: "\f00d"
}
#nav-menu-popup .nav-menu {
align-items: center;
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0
}
#nav-menu-popup .nav-menu .nav-menu-item {
list-style: none;
text-align: left;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%
}
#nav-menu-popup .nav-menu .nav-menu-item .nav-menu-item-content {
display: flex;
position: relative
}
#nav-menu-popup .nav-menu-item .nav-menu-item-title {
flex-grow: 1;
margin: 0 1rem;
max-width: calc(100% - 2rem)
}
#nav-menu-popup .nav-menu .nav-menu-item .nav-menu-item-content .nav-menu-item-toggle {
cursor: pointer;
font-size: 24px;
position: absolute;
right: 0;
top: calc(50% - 12px)
}
#nav-menu-popup .nav-menu .nav-menu-item .nav-menu-item-content .nav-menu-item-toggle i {
font-size: 24px;
transition: transform .2s ease
}
#nav-menu-popup .nav-menu .nav-menu-item .nav-menu-item-content .nav-menu-item-toggle i:before {
content: "\f107"
}
#nav-menu-popup .nav-menu .nav-menu-item.active .nav-menu-item-content .nav-menu-item-toggle i {
transform: rotate(-180deg)
}
#nav-menu-popup .nav-menu .nav-menu-item .nav-dropdown-menu {
display: none;
max-height: 0;
opacity: 0;
overflow: auto;
padding: 0;
transition: all .3s ease-in-out;
visibility: hidden
}
#nav-menu-popup .nav-menu .nav-menu-item.active .nav-dropdown-menu {
display: block;
max-height: 600px;
opacity: 1;
visibility: visible
}
.form-error {
border: 2px solid var(--red);
border-radius: 8px;
cursor: pointer;
font-size: 20px;
margin-bottom: 10px;
padding: 6px 12px;
text-align: center
}
.form-error,
.form-error i {
color: var(--red)
}
.c-bullet-list ul li {
line-height: inherit
}
.c-bullet-list ul li.ql-indent-1 {
padding-left: 4.5em
}
.c-bullet-list ul li.ql-indent-2 {
padding-left: 7.5em
}
.c-bullet-list ul li.ql-indent-3 {
padding-left: 10.5em
}
.c-bullet-list ul li.ql-indent-4 {
padding-left: 13.5em
}
.c-bullet-list ul li.ql-indent-5 {
padding-left: 16.5em
}
.c-bullet-list ul li.ql-indent-6 {
padding-left: 19.5em
}
.c-bullet-list ul li.ql-indent-7 {
padding-left: 22.5em
}
.c-bullet-list ul li.ql-indent-8 {
padding-left: 25.5em
}
.c-rich-text .list-disc {
list-style-type: disc
}
.c-rich-text .list-square {
list-style-type: square
}
.c-rich-text .list-none {
list-style-type: none
}
.c-rich-text .list-circle {
list-style-type: circle
}
.c-rich-text .list-decimal {
list-style-type: decimal
}
.c-rich-text .list-upper-alpha {
list-style-type: upper-alpha
}
.c-rich-text .list-lower-alpha {
list-style-type: lower-alpha
}
.c-rich-text .list-upper-roman {
list-style-type: upper-roman
}
.c-rich-text .list-lower-roman {
list-style-type: lower-roman
}
.text-output ul li {
padding-left: 1.5em
}
.text-output ul li:before {
display: inline-block;
font-weight: 700;
margin-left: -1.5em;
margin-right: .3em;
text-align: right;
white-space: nowrap;
width: 1.2em
}
.svg-component svg {
max-height: 100%;
max-width: 100%
}
.border1 {
border-bottom: 3px solid rgba(0, 0, 0, .2) !important
}
.border2 {
border: 2px solid rgba(0, 0, 0, .55)
}
.border3 {
border: solid rgba(0, 0, 0, .15);
border-width: 1px 1px 2px;
padding: 5px
}
.border4 {
border: solid rgba(0, 0, 0, .35);
border-width: 1px 1px 2px;
padding: 1px !important
}
.shadow1 {
box-shadow: 0 10px 6px -6px rgba(0, 0, 0, .15)
}
.shadow2 {
box-shadow: 0 4px 3px rgba(0, 0, 0, .15), 0 0 2px rgba(0, 0, 0, .15)
}
.shadow3 {
box-shadow: 0 10px 6px -6px #999
}
.shadow4 {
box-shadow: 3px 3px 15px #212121a8
}
.shadow6 {
box-shadow: 0 10px 1px #ddd, 0 10px 20px #ccc
}
.background {
background-color: unset !important
}
@keyframes progress-bar-animation {
to {
background-position: 0 -3000px
}
}
@keyframes gradient {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
margin: unset
}
p {
margin: unset
}
.c-bullet-list,
.c-faq,
.c-heading,
.c-image-feature,
.c-paragraph,
.c-sub-heading {
word-break: break-word
}
h1:empty:after,
h2:empty:after,
h3:empty:after,
h4:empty:after,
h5:empty:after,
h6:empty:after,
p:empty:after {
content: "\00A0"
}
.w-3-4 {
width: 75%
}
.w-1-2 {
width: 50%
}
.tabs-container {
display: flex
}
@media screen and (max-width:767px) {
.nav-menu {
display: none
}
.nav-menu-mobile {
align-items: center;
display: flex
}
#faq-popup {
left: 5px !important;
margin-left: 0 !important;
width: 98% !important
}
.video-container {
width: 100% !important
}
.autoplay .vjs-big-play-button {
display: none !important
}
.autoplay:hover .vjs-control-bar {
display: flex !important
}
}
@font-face {
font-display: block;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 400;
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.eot);
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.woff2) format("woff2"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.woff) format("woff"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.ttf) format("truetype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
.far {
font-weight: 400
}
@font-face {
font-display: block;
font-family: Font Awesome\ 5 Free;
font-style: normal;
font-weight: 900;
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.eot);
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.woff2) format("woff2"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.woff) format("woff"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.ttf) format("truetype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}
.fa,
.far,
.fas {
font-family: Font Awesome\ 5 Free
}
.fa,
.fas {
font-weight: 900
}
@font-face {
font-display: block;
font-family: Font Awesome\ 5 Brands;
font-style: normal;
font-weight: 400;
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.eot);
src: url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.woff) format("woff"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"), url(https://stcdn.leadconnectorhq.com/funnel/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
.fab {
font-family: Font Awesome\ 5 Brands;
font-weight: 400
}
:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1
}
.animate__animated {
animation-duration: 1s;
animation-duration: var(--animate-duration);
animation-fill-mode: both
}
@media (prefers-reduced-motion:reduce),
print {
.animate__animated {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important
}
.animate__animated[class*=Out] {
opacity: 0
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.animate__fadeIn {
animation-name: fadeIn
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.animate__fadeInUp {
animation-name: fadeInUp
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.animate__fadeInDown {
animation-name: fadeInDown
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.animate__fadeInLeft {
animation-name: fadeInLeft
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.animate__fadeInRight {
animation-name: fadeInRight
}
@keyframes slideInUp {
0% {
transform: translate3d(0, 100%, 0);
visibility: visible
}
to {
transform: translateZ(0)
}
}
.animate__slideInUp {
animation-name: slideInUp
}
@keyframes slideInDown {
0% {
transform: translate3d(0, -100%, 0);
visibility: visible
}
to {
transform: translateZ(0)
}
}
.animate__slideInDown {
animation-name: slideInDown
}
@keyframes slideInLeft {
0% {
transform: translate3d(-100%, 0, 0);
visibility: visible
}
to {
transform: translateZ(0)
}
}
.animate__slideInLeft {
animation-name: slideInLeft
}
@keyframes slideInRight {
0% {
transform: translate3d(100%, 0, 0);
visibility: visible
}
to {
transform: translateZ(0)
}
}
.animate__slideInRight {
animation-name: slideInRight
}
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
20% {
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
transform: scale3d(.97, .97, .97)
}
to {
opacity: 1;
transform: scaleX(1)
}
}
.animate__bounceIn {
animation-duration: .75s;
animation-duration: calc(var(--animate-duration)*.75);
animation-name: bounceIn
}
@keyframes bounceInUp {
0%,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0) scaleY(5)
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(.9)
}
75% {
transform: translate3d(0, 10px, 0) scaleY(.95)
}
90% {
transform: translate3d(0, -5px, 0) scaleY(.985)
}
to {
transform: translateZ(0)
}
}
.animate__bounceInUp {
animation-name: bounceInUp
}
@keyframes bounceInDown {
0%,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3)
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(.9)
}
75% {
transform: translate3d(0, -10px, 0) scaleY(.95)
}
90% {
transform: translate3d(0, 5px, 0) scaleY(.985)
}
to {
transform: translateZ(0)
}
}
.animate__bounceInDown {
animation-name: bounceInDown
}
@keyframes bounceInLeft {
0%,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0) scaleX(3)
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0) scaleX(1)
}
75% {
transform: translate3d(-10px, 0, 0) scaleX(.98)
}
90% {
transform: translate3d(5px, 0, 0) scaleX(.995)
}
to {
transform: translateZ(0)
}
}
.animate__bounceInLeft {
animation-name: bounceInLeft
}
@keyframes bounceInRight {
0%,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0) scaleX(3)
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0) scaleX(1)
}
75% {
transform: translate3d(10px, 0, 0) scaleX(.98)
}
90% {
transform: translate3d(-5px, 0, 0) scaleX(.995)
}
to {
transform: translateZ(0)
}
}
.animate__bounceInRight {
animation-name: bounceInRight
}
@keyframes flip {
0% {
animation-timing-function: ease-out;
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
}
40% {
animation-timing-function: ease-out;
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
}
50% {
animation-timing-function: ease-in;
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
}
80% {
animation-timing-function: ease-in;
transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg)
}
to {
animation-timing-function: ease-in;
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
}
}
.animate__animated.animate__flip {
animation-name: flip;
backface-visibility: visible
}
@keyframes flipInX {
0% {
animation-timing-function: ease-in;
opacity: 0;
transform: perspective(400px) rotateX(90deg)
}
40% {
animation-timing-function: ease-in;
transform: perspective(400px) rotateX(-20deg)
}
60% {
opacity: 1;
transform: perspective(400px) rotateX(10deg)
}
80% {
transform: perspective(400px) rotateX(-5deg)
}
to {
transform: perspective(400px)
}
}
.animate__flipInX {
animation-name: flipInX;
backface-visibility: visible !important
}
@keyframes flipInY {
0% {
animation-timing-function: ease-in;
opacity: 0;
transform: perspective(400px) rotateY(90deg)
}
40% {
animation-timing-function: ease-in;
transform: perspective(400px) rotateY(-20deg)
}
60% {
opacity: 1;
transform: perspective(400px) rotateY(10deg)
}
80% {
transform: perspective(400px) rotateY(-5deg)
}
to {
transform: perspective(400px)
}
}
.animate__flipInY {
animation-name: flipInY;
backface-visibility: visible !important
}
@keyframes rollIn {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate(-120deg)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.animate__rollIn {
animation-name: rollIn
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
.animate__zoomIn {
animation-name: zoomIn
}
@keyframes lightSpeedInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0) skewX(30deg)
}
60% {
opacity: 1;
transform: skewX(-20deg)
}
80% {
transform: skewX(5deg)
}
to {
transform: translateZ(0)
}
}
.animate__lightSpeedInLeft {
animation-name: lightSpeedInLeft;
animation-timing-function: ease-out
}
@keyframes lightSpeedInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0) skewX(-30deg)
}
60% {
opacity: 1;
transform: skewX(20deg)
}
80% {
transform: skewX(-5deg)
}
to {
transform: translateZ(0)
}
}
.animate__lightSpeedInRight {
animation-name: lightSpeedInRight;
animation-timing-function: ease-out
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ---------------- TOKENS (CoopBusiness) ---------------- */
#coopb-nav {
--cb-blue: #38bded;
--cb-blue-hover: #26a7d6;
--ink: #0E1216;
--capsule-bg: #ffffff;
--capsule-ring: rgba(0, 0, 0, .06);
--capsule-inner: rgba(255, 255, 255, .75);
--shadow: 0 4px 12px rgba(0, 0, 0, .06), inset 0 1px 0 var(--capsule-inner);
--logo-h-desktop: 34px;
/* tweak here if needed */
--logo-h-mobile: 28px;
--btn-h: 44px;
--btn-px: 22px;
position: relative;
z-index: 1000;
background: transparent;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-webkit-tap-highlight-color: transparent;
}
/* Skip link (a11y) */
#coopb-nav .skip-link {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#coopb-nav .skip-link:focus {
position: fixed;
left: 16px;
top: 16px;
padding: 10px 14px;
background: #fff;
border: 1px solid var(--cb-blue);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
font: 600 14px/1 Inter;
outline: none;
z-index: 10000;
}
/* Capsule container */
#coopb-nav .wrap {
max-width: 1180px;
margin: 0 auto;
padding: 12px 18px;
background: var(--capsule-bg);
border: 1px solid var(--capsule-ring);
border-radius: 9999px;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr auto 1fr;
/* left | logo | right */
align-items: center;
gap: 12px;
}
/* Left links */
#coopb-nav .left {
display: flex;
align-items: center;
gap: 14px;
justify-self: start;
}
#coopb-nav .left a {
text-decoration: none;
color: var(--ink);
font-weight: 700;
font-size: 15px;
letter-spacing: .2px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid transparent;
transition: .2s ease;
}
#coopb-nav .left a:hover {
background: rgba(14, 18, 22, .06);
}
#coopb-nav .left a:focus-visible {
outline: 2px solid var(--cb-blue);
outline-offset: 3px;
}
/* Centered brand */
#coopb-nav .brand {
display: flex;
align-items: center;
justify-content: center;
}
#coopb-nav .brand img {
height: var(--logo-h-desktop);
width: auto;
display: block;
}
@media (max-width:880px) {
#coopb-nav .brand img {
height: var(--logo-h-mobile);
}
}
/* Right CTAs (aligned hard-right) */
#coopb-nav .right {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
justify-self: end;
/* push to far right of grid */
margin-left: auto;
/* ensure it hugs the right edge within the capsule */
}
/* Buttons */
#coopb-nav .btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--btn-h);
padding: 0 var(--btn-px);
border-radius: 9999px;
border: 1px solid transparent;
font-weight: 700;
font-size: 15px;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
#coopb-nav .btn:focus-visible {
outline: 2px solid var(--cb-blue);
outline-offset: 3px;
}
/* Primary (SIGN UP) */
#coopb-nav .btn-primary {
background: var(--cb-blue);
color: #fff;
box-shadow: 0 4px 10px rgba(56, 189, 237, .25);
}
#coopb-nav .btn-primary:hover {
background: var(--cb-blue-hover);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(56, 189, 237, .30);
}
#coopb-nav .btn-primary:active {
transform: translateY(0);
}
/* Ghost (Login) */
#coopb-nav .btn-ghost {
background: #fff;
color: var(--cb-blue);
border: 1px solid var(--cb-blue);
}
#coopb-nav .btn-ghost:hover {
background: rgba(56, 189, 237, .06);
}
/* Mobile hamburger */
#coopb-nav .hamburger {
display: none;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, .08);
background: #fff;
position: relative;
cursor: pointer;
justify-self: end;
}
#coopb-nav .hamburger span,
#coopb-nav .hamburger::before,
#coopb-nav .hamburger::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
height: 1.8px;
background: #0E1216;
border-radius: 2px;
transition: .25s ease;
}
#coopb-nav .hamburger span {
top: 19px
}
#coopb-nav .hamburger::before {
top: 12px
}
#coopb-nav .hamburger::after {
top: 26px
}
/* Drawer */
#coopb-nav .sheet {
position: fixed;
inset: 0;
display: none;
z-index: 9999;
}
#coopb-nav .backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .35);
opacity: 0;
transition: opacity .22s ease;
cursor: pointer;
}
#coopb-nav .panel {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: min(86vw, 360px);
background: #fff;
border-left: 1px solid rgba(0, 0, 0, .08);
transform: translateX(100%);
transition: transform .28s ease;
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
box-shadow: -20px 0 40px rgba(0, 0, 0, .18);
}
#coopb-nav .xbtn {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, .08);
background: #fff;
position: relative;
align-self: flex-end;
cursor: pointer;
}
#coopb-nav .xbtn::before,
#coopb-nav .xbtn::after {
content: "";
position: absolute;
top: 19px;
left: 10px;
right: 10px;
height: 1.8px;
background: #0E1216;
border-radius: 2px;
}
#coopb-nav .xbtn::before {
transform: rotate(45deg)
}
#coopb-nav .xbtn::after {
transform: rotate(-45deg)
}
#coopb-nav .mlinks {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
#coopb-nav .mlinks .btn {
width: 100%;
justify-content: center;
padding: 14px 18px;
font-size: 16px;
}
/* Open state */
#coopb-nav.open .sheet {
display: block;
}
#coopb-nav.open .backdrop {
opacity: 1;
}
#coopb-nav.open .panel {
transform: none;
}
#coopb-nav.open .hamburger span {
opacity: 0;
}
#coopb-nav.open .hamburger::before {
transform: translateY(7px) rotate(45deg);
}
#coopb-nav.open .hamburger::after {
transform: translateY(-7px) rotate(-45deg);
}
/* Responsive */
@media (max-width:960px) {
#coopb-nav .wrap {
grid-template-columns: auto 1fr auto;
}
#coopb-nav .left,
#coopb-nav .right {
display: none;
}
#coopb-nav .brand {
justify-content: flex-start;
}
#coopb-nav .hamburger {
display: inline-block;
}
}
@media (prefers-reduced-motion: reduce) {
#coopb-nav * {
transition: none !important;
animation: none !important;
}
}
:root {
--navy: #1c5f87;
--sky: #27baea;
--gold: #ffa500;
--teal: #8fd5d3;
--blue: #38bded;
--purple: #8000fc;
}
.coopc-video-block.align-right {
max-width: 560px;
margin-left: auto;
}
.coopc-video-block {
font-family: Inter, sans-serif;
}
/* Poster with your thumbnail as background */
.coopc-video-block .poster {
position: relative;
display: block;
aspect-ratio: 16/9;
width: 100%;
border-radius: 20px;
overflow: hidden;
color: #fff;
text-decoration: none;
background: url("../images/video-poster.png") center/cover no-repeat;
box-shadow: inset 0 0 80px rgba(0, 0, 0, .35), 0 20px 50px rgba(28, 95, 135, .25);
}
.coopc-video-block .poster::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: .22;
mix-blend-mode: overlay;
}
/* Chip label */
.coopc-video-block .chip {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .3);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
/* Play button */
.coopc-video-block .play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 68px;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
z-index: 2;
box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
/* Gradient triangle (clip-path) */
.coopc-video-block .play .tri {
width: 22px;
height: 22px;
background: linear-gradient(135deg, var(--blue), var(--purple));
clip-path: polygon(20% 15%, 20% 85%, 85% 50%);
-webkit-clip-path: polygon(20% 15%, 20% 85%, 85% 50%);
display: block;
margin-left: 2px;
/* optical center */
}
/* Pulse ring */
.coopc-video-block .pulse {
position: absolute;
inset: -12px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .45);
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
0% {
transform: scale(.7);
opacity: .8;
}
70% {
transform: scale(1.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* Sheen sweep */
.coopc-video-block .sheen {
position: absolute;
inset: -20%;
transform: rotate(20deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
animation: sheen 6s ease-in-out infinite;
z-index: 1;
}
@keyframes sheen {
0%,
70% {
transform: translateX(-80%) rotate(20deg);
opacity: 0;
}
80% {
opacity: .6;
}
100% {
transform: translateX(80%) rotate(20deg);
opacity: 0;
}
}
/* Footer bar */
.coopc-video-block .bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .15));
border-top: 1px solid rgba(255, 255, 255, .15);
}
.coopc-video-block .title {
font: 700 14px/1.2 "Plus Jakarta Sans", Inter, sans-serif;
}
.coopc-video-block .hint {
font: 600 12px/1 Inter, sans-serif;
opacity: .85;
}
/* New Caption under video */
.coopc-video-caption {
margin-top: 28px;
/* increased space */
font: 800 clamp(18px, 2vw, 22px)/1.3 "Plus Jakarta Sans", Inter, sans-serif;
text-align: center;
background: linear-gradient(135deg, var(--blue), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hover polish (desktop) */
@media (hover:hover) {
.close-btn:hover {
background: rgba(255, 255, 255, .25);
color: var(--sky);
transform: scale(1.05);
}
}
/* Mobile tuning */
@media(max-width:768px) {
.coopc-video-block.align-right {
max-width: 100%;
}
.coopc-video-block .play {
width: 56px;
height: 56px;
}
.coopc-video-block .play .tri {
width: 18px;
height: 18px;
}
#coopc-video-modal .dialog .close-btn {
top: -10px !important;
right: -10px !important;
width: 40px;
height: 40px;
font-size: 18px;
}
}
#coopb-right-content,
#coopb-right-content * {
box-sizing: border-box
}
#coopb-right-content {
--blue: #38bded;
--purple: #8000fc;
--ink: #0E1216;
--pad-x: clamp(14px, 3vw, 24px);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
#coopb-right-content .stack {
max-width: 620px;
margin: 0 auto;
padding: clamp(14px, 2vw, 18px) var(--pad-x);
}
/* Title */
#coopb-right-content .title {
margin: 0 0 .6rem 0;
font: 800 clamp(28px, 3.4vw, 40px)/1.08 "Plus Jakarta Sans", Inter;
letter-spacing: .01em;
color: var(--blue);
}
/* keep 2-line feel on wide screens but allow wrap on mobile */
#coopb-right-content .title .br {
display: block
}
/* Copy */
#coopb-right-content .copy {
margin: .6rem 0 1.2rem 0;
font: 600 clamp(14px, 1.15vw, 18px)/1.65 Inter;
color: var(--ink);
}
/* CTA (global CoopBusiness style) */
#coopb-right-content .actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: .6rem
}
#coopb-right-content .btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(48px, 6vw, 56px);
padding: 0 clamp(22px, 3vw, 36px);
border-radius: 9999px;
border: 0;
font: 700 clamp(14px, 1.2vw, 16px)/1 Inter;
color: #fff;
text-decoration: none;
cursor: pointer;
background: #38bded;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
white-space: nowrap;
}
#coopb-right-content .btn:hover {
background: #26a7d6;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(56, 189, 237, .32);
}
/* Subtle divider accent (optional) */
#coopb-right-content .accent {
width: min(180px, 40%);
height: 4px;
border-radius: 4px;
margin: .5rem 0 1rem 0;
background: linear-gradient(90deg, var(--blue), var(--purple));
}
/* Responsive center on narrow columns */
@media (max-width: 980px) {
#coopb-right-content .stack {
text-align: center
}
#coopb-right-content .actions {
justify-content: center
}
}
/* Adjustables */
#wpif-img-marquee {
--strip-height: 56px;
/* visible bar height */
--speed: 28s;
/* lower = faster */
--gap: 0px;
/* space between repeats */
--radius: 0;
/* set to e.g. 10px if you want rounded corners */
--shadow: 0 0 0 rgba(0, 0, 0, 0);
/* add subtle shadow if desired */
}
#wpif-img-marquee .frame {
height: var(--strip-height);
width: 100%;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
position: relative;
}
/* The moving track contains two identical groups for seamless looping */
#wpif-img-marquee .track {
display: flex;
width: max-content;
/* expand to content width */
animation: wpif-marquee var(--speed) linear infinite;
will-change: transform;
}
#wpif-img-marquee .group {
display: flex;
align-items: center;
gap: var(--gap);
}
#wpif-img-marquee img {
height: var(--strip-height);
width: auto;
display: block;
user-select: none;
pointer-events: none;
/* purely decorative ticker */
}
/* Pause on hover (optional) */
#wpif-img-marquee .frame:hover .track {
animation-play-state: paused;
}
/* Animation moves left by exactly one group's width (track is 2x groups) */
@keyframes wpif-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Speed/height tweak for smaller screens if needed */
@media (max-width:768px) {
#wpif-img-marquee {
--strip-height: 46px;
--speed: 24s;
}
}
#coopb-about-left,
#coopb-about-left * {
box-sizing: border-box
}
#coopb-about-left {
--blue: #38bded;
--purple: #8000fc;
--ink: #0E1216;
--muted: #6c7a86;
--x: clamp(18px, 4vw, 32px);
--y: clamp(28px, 7vw, 72px);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
#coopb-about-left .wrap {
max-width: 720px;
margin: 0 auto;
padding: var(--y) var(--x)
}
.eyebrow {
display: inline-block;
margin: 0 0 .8rem 0;
color: var(--muted);
font: 800 12px/1 Inter;
letter-spacing: .14em;
text-transform: uppercase
}
/* Gradient title */
.h1 {
margin: 0;
font: 800 clamp(32px, 4.8vw, 54px)/1.06 "Plus Jakarta Sans", Inter;
letter-spacing: .01em;
background: linear-gradient(90deg, var(--blue), var(--purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.accent {
width: min(180px, 38%);
height: 4px;
border-radius: 4px;
margin: .6rem 0 1.2rem 0;
background: linear-gradient(90deg, var(--blue), var(--purple))
}
.lead {
margin: 0 0 .9rem 0;
color: var(--ink);
font: 600 clamp(14px, 1.2vw, 16px)/1.7 Inter;
max-width: 58ch
}
.lead b {
font-weight: 800
}
.para {
margin: 0 0 1.3rem 0;
color: var(--ink);
font: 600 clamp(14px, 1.2vw, 16px)/1.7 Inter;
max-width: 58ch
}
/* Tagline */
.tag-wrap {
display: flex;
align-items: stretch;
gap: 12px;
margin-top: clamp(14px, 2vw, 18px)
}
.tag-bar {
width: 5px;
border-radius: 6px;
background: linear-gradient(180deg, var(--blue), var(--purple));
flex: 0 0 5px
}
.tag-block {
font-weight: 800;
color: var(--ink);
line-height: 1.08;
letter-spacing: .02em;
font-size: clamp(22px, 3.1vw, 34px)
}
.tag-block .l1,
.tag-block .l2 {
display: block
}
/* CTA */
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: clamp(16px, 2.6vw, 22px)
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: clamp(48px, 6vw, 56px);
padding: 0 clamp(22px, 3vw, 36px);
border: 0;
border-radius: 9999px;
cursor: pointer;
font: 700 clamp(14px, 1.6vw, 16px)/1 Inter;
color: #fff;
background: #38bded;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease
}
.btn:hover {
background: #26a7d6;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(56, 189, 237, .32)
}
/* Scope */
#coopb-right-grid-clean,
#coopb-right-grid-clean * {
box-sizing: border-box
}
/* Design tokens */
#coopb-right-grid-clean {
--accent: #38bded;
/* primary brand blue */
--ink: #0E1216;
/* text color */
--muted: #6b7280;
/* secondary text (not used here but handy) */
--card-bg: #ffffff;
--card-br: #e6edf5;
/* hairline border */
--shadow-sm: 0 8px 18px rgba(2, 12, 27, .06);
--shadow-lg: 0 16px 34px rgba(2, 12, 27, .12);
--r: 14px;
/* card radius */
--gap: 16px;
/* grid gap */
--pad: 16px;
/* card padding */
--h: 108px;
/* min height per card */
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
/* Grid: 3 rows × 2 cols */
#coopb-right-grid-clean .wrap {
max-width: 620px;
margin: 0 auto;
display: grid;
gap: var(--gap);
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(var(--h), auto);
align-items: stretch;
}
/* Card */
#coopb-right-grid-clean .card {
position: relative;
background: var(--card-bg);
border: 1px solid var(--card-br);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
padding: var(--pad) calc(var(--pad) + 4px);
display: flex;
align-items: center;
gap: 14px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
transform: translateY(8px);
opacity: 0;
animation: enter .5s ease-out forwards;
}
/* stagger entrance */
#coopb-right-grid-clean .card:nth-child(1) {
animation-delay: .04s
}
#coopb-right-grid-clean .card:nth-child(2) {
animation-delay: .10s
}
#coopb-right-grid-clean .card:nth-child(3) {
animation-delay: .16s
}
#coopb-right-grid-clean .card:nth-child(4) {
animation-delay: .22s
}
#coopb-right-grid-clean .card:nth-child(5) {
animation-delay: .28s
}
#coopb-right-grid-clean .card:nth-child(6) {
animation-delay: .34s
}
#coopb-right-grid-clean .card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: #dbe5ef;
}
/* Icon chip (no gradient): thin accent ring + faint tint */
#coopb-right-grid-clean .chip {
width: 50px;
height: 50px;
flex: 0 0 50px;
border-radius: 12px;
position: relative;
display: grid;
place-items: center;
background: #f5fbff;
/* very light blue tint */
border: 1px solid rgba(56, 189, 237, .35);
/* accent ring */
}
#coopb-right-grid-clean svg {
width: 24px;
height: 24px;
display: block;
color: var(--accent)
}
/* Label */
#coopb-right-grid-clean .label {
font: 700 16px/1.2 Inter, system-ui, sans-serif;
color: var(--ink);
letter-spacing: .01em;
}
/* Animations */
@keyframes enter {
to {
transform: translateY(0);
opacity: 1
}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
#coopb-right-grid-clean .card {
animation: none;
transform: none;
opacity: 1
}
#coopb-right-grid-clean .card:hover {
transform: none
}
}
/* Mobile: stack at small widths */
@media (max-width:580px) {
#coopb-right-grid-clean .wrap {
grid-template-columns: 1fr;
max-width: 420px
}
}
/* Scope */
#coopb-dollaraday-rail,
#coopb-dollaraday-rail * {
box-sizing: border-box
}
/* Tokens */
#coopb-dollaraday-rail {
--blue: #38bded;
--blue-ink: #1ea0c7;
--purple: #8000fc;
--purple-soft: #b487ff;
--green: #7bc35b;
--green-soft: #a9e07f;
--ink: #0E1216;
--hair: #E8EDF2;
--paper: #fff;
--h1: clamp(36px, 5vw, 58px);
--label: clamp(14px, 1.2vw, 17px);
}
#coopb-dollaraday-rail .wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
display: grid;
gap: 18px;
justify-items: center;
text-align: center;
}
#coopb-dollaraday-rail .h1 {
margin: 0 0 38px 0;
/* Increased from 18px to 38px */
color: var(--ink);
font: 800 var(--h1)/1.06 "Plus Jakarta Sans", Inter, system-ui;
letter-spacing: -.02em;
text-wrap: balance;
}
#coopb-dollaraday-rail .h1 b {
color: var(--blue)
}
/* Rail */
#coopb-dollaraday-rail .rail {
position: relative;
width: 100%;
display: grid;
gap: 18px;
}
#coopb-dollaraday-rail .line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg, rgba(56, 189, 237, .0), rgba(56, 189, 237, .35), rgba(128, 0, 252, .35), rgba(123, 195, 91, .35), rgba(56, 189, 237, .0));
-webkit-mask: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
animation: cbdr-shimmer 3.2s linear infinite;
}
@keyframes cbdr-shimmer {
0% {
filter: hue-rotate(0deg)
}
100% {
filter: hue-rotate(360deg)
}
}
@media (prefers-reduced-motion: reduce) {
#coopb-dollaraday-rail .line {
animation: none
}
}
#coopb-dollaraday-rail .nodes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 20px);
position: relative;
}
/* Mobile */
@media(max-width:820px) {
#coopb-dollaraday-rail .line {
display: none
}
#coopb-dollaraday-rail .nodes {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
#coopb-dollaraday-rail .node {
width: 96%;
max-width: 560px;
margin: 0 auto;
}
}
/* Node */
#coopb-dollaraday-rail .node {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: 16px;
background: color-mix(in oklab, #ffffff 90%, rgba(255, 255, 255, .6));
border: 1px solid rgba(0, 0, 0, .06);
box-shadow: 0 6px 18px rgba(2, 12, 27, .08), inset 0 1px 0 rgba(255, 255, 255, .7);
backdrop-filter: saturate(140%) blur(6px);
transition: .24s;
min-height: 84px;
overflow: hidden;
}
#coopb-dollaraday-rail .node:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(2, 12, 27, .12)
}
/* Premium icon container */
#coopb-dollaraday-rail .ring {
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
position: relative;
background: #fff;
border: 1px solid var(--hair);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px rgba(2, 12, 27, .06);
overflow: hidden;
will-change: transform, filter;
transition: transform .35s cubic-bezier(.2, .6, .2, 1), filter .35s;
filter: drop-shadow(0 4px 12px rgba(2, 12, 27, .08));
}
/* Spinning conic halo */
#coopb-dollaraday-rail .ring::after {
content: "";
position: absolute;
inset: -1px;
background: conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), var(--g1));
opacity: .22;
animation: cbdr-spin 6s linear infinite;
}
@keyframes cbdr-spin {
to {
transform: rotate(360deg)
}
}
/* Soft inner glow */
#coopb-dollaraday-rail .ring::before {
content: "";
position: absolute;
inset: 2px;
border-radius: 12px;
background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%);
mix-blend-mode: screen;
opacity: .06;
animation: cbdr-glow 3.2s ease-in-out infinite;
}
@keyframes cbdr-glow {
0%,
100% {
opacity: .06;
transform: translateY(0)
}
50% {
opacity: .18;
transform: translateY(-1px)
}
}
/* Hover */
#coopb-dollaraday-rail .node:hover .ring {
transform: translateY(-1px) rotateX(6deg) rotateY(3deg);
filter: drop-shadow(0 10px 24px rgba(2, 12, 27, .16));
}
#coopb-dollaraday-rail .node:hover .ring::before {
animation-duration: 1.8s;
opacity: .22;
}
/* Icon line art “breathe” */
#coopb-dollaraday-rail .ring svg {
width: 26px;
height: 26px;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
position: relative;
z-index: 1;
transform-origin: center;
animation: cbdr-breathe 2.8s ease-in-out infinite;
}
@keyframes cbdr-breathe {
0% {
transform: scale(1)
}
50% {
transform: scale(1.045)
}
100% {
transform: scale(1)
}
}
@media (prefers-reduced-motion: reduce) {
#coopb-dollaraday-rail .ring,
#coopb-dollaraday-rail .ring::before,
#coopb-dollaraday-rail .ring::after,
#coopb-dollaraday-rail .ring svg,
#coopb-dollaraday-rail .line {
animation: none !important;
transform: none !important;
}
#coopb-dollaraday-rail .ring {
filter: none
}
}
/* Labels */
#coopb-dollaraday-rail .label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
width: 100%;
font: 800 var(--label)/1.15 "Plus Jakarta Sans", Inter, system-ui;
color: var(--ink);
background:
linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)),
radial-gradient(120% 140% at 0% 0%, rgba(0, 0, 0, .04), transparent 40%);
border: 1px solid rgba(0, 0, 0, .06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(2, 12, 27, .06);
transition: .24s;
white-space: normal;
word-break: break-word;
text-wrap: balance;
}
/* Theming */
#coopb-dollaraday-rail .n-earn {
--g1: #38bded;
--g2: #1ea0c7;
--g3: #7bdcf5
}
#coopb-dollaraday-rail .n-learn {
--g1: #8000fc;
--g2: #b487ff;
--g3: #a36bff
}
#coopb-dollaraday-rail .n-cui {
--g1: #7bc35b;
--g2: #a9e07f;
--g3: #6bb64f
}
#coopb-dollaraday-rail .n-earn .ring svg {
stroke: url(#grad-earn)
}
#coopb-dollaraday-rail .n-learn .ring svg {
stroke: url(#grad-learn)
}
#coopb-dollaraday-rail .n-cui .ring svg {
stroke: url(#grad-cui)
}
#coopb-whatyouget-pro,
#coopb-whatyouget-pro * {
box-sizing: border-box
}
#coopb-whatyouget-pro {
--blue: #38bded;
--purple: #8000fc;
--green: #7bc35b;
--ink: #0E1216;
--sub: #3B4450;
--hair: #E9EEF4;
--panel: #FFFFFF;
--h: clamp(28px, 4.6vw, 50px);
--title: clamp(18px, 2vw, 22px);
--body: clamp(14px, 1.6vw, 16px);
--lh: 1.60;
--r: 18px;
--shadow: 0 12px 26px rgba(2, 12, 27, .06);
--shadow-hover: 0 18px 36px rgba(2, 12, 27, .10);
--gap-lg: clamp(18px, 2.4vw, 26px);
--gap-xl: clamp(26px, 3.6vw, 40px);
/* Equalize paragraph block height so card bottoms align */
--p-lines: 3;
/* Motion tokens */
--lift: -4px;
--ring: rgba(56, 189, 237, .18);
}
@media (max-width:980px) {
#coopb-whatyouget-pro {
--p-lines: 4
}
}
/* Container */
#coopb-whatyouget-pro .wrap {
max-width: 1180px;
margin: 0 auto;
display: grid;
gap: var(--gap-xl);
perspective: 1000px;
}
/* Heading (kept styles but element removed) */
#coopb-whatyouget-pro .h {
margin: 0 0 clamp(6px, 1.2vw, 14px) 0;
text-align: center;
color: var(--ink);
font: 800 var(--h)/1.12 "Plus Jakarta Sans", Inter, system-ui;
letter-spacing: -.01em;
text-wrap: balance;
}
#coopb-whatyouget-pro .h .em {
background: linear-gradient(90deg, var(--blue), var(--purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Grid */
#coopb-whatyouget-pro .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-lg);
align-items: stretch;
}
@media (max-width:980px) {
#coopb-whatyouget-pro .grid {
grid-template-columns: 1fr
}
}
/* Card */
#coopb-whatyouget-pro .card {
background: var(--panel);
border: 1px solid var(--hair);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: clamp(18px, 3vw, 28px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 100%;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
transform-style: preserve-3d;
will-change: transform, box-shadow, filter;
position: relative;
}
#coopb-whatyouget-pro .card:hover {
transform: translateY(var(--lift));
box-shadow: var(--shadow-hover);
border-color: color-mix(in oklab, var(--blue), #fff 70%);
filter: saturate(1.03);
}
/* Accent bar — add a touch more space so icon/ring never touches it */
#coopb-whatyouget-pro .card::before {
content: "";
display: block;
height: 4px;
width: 60%;
border-radius: 999px;
margin-bottom: 16px;
background: linear-gradient(90deg, var(--blue), var(--purple));
background-size: 200% 100%;
animation: barShift 3.6s linear infinite paused;
position: relative;
z-index: 2;
}
#coopb-whatyouget-pro .card:hover::before {
animation-play-state: running
}
#coopb-whatyouget-pro .card--academy::before {
background: linear-gradient(90deg, var(--purple), var(--blue));
background-size: 200% 100%
}
#coopb-whatyouget-pro .card--bits::before {
background: linear-gradient(90deg, var(--green), var(--blue));
background-size: 200% 100%
}
/* Icon wrap + controlled glow ring (no upward overlap) */
#coopb-whatyouget-pro .icon-wrap {
width: 108px;
height: 108px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #fff 55%, #f7fbff 56%, #eaf4fb 100%);
display: grid;
place-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px rgba(2, 12, 27, .10);
flex: 0 0 auto;
margin-bottom: 20px;
position: relative;
transform: translateZ(20px);
transition: transform .25s ease;
z-index: 1;
}
/* Do NOT move upward on hover */
#coopb-whatyouget-pro .card:hover .icon-wrap {
transform: translateZ(26px) translateY(0);
}
/* Tighter ring so it won’t touch the bar */
#coopb-whatyouget-pro .icon-wrap::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
box-shadow: 0 0 0 0 var(--ring);
opacity: .0;
transition: opacity .25s ease;
}
#coopb-whatyouget-pro .card:hover .icon-wrap::after {
animation: ringPulse 1.6s ease-out forwards;
opacity: 1;
}
/* Icon — bob downward only */
#coopb-whatyouget-pro .ico {
width: 62%;
height: auto;
display: block;
transform: translateZ(30px);
}
#coopb-whatyouget-pro .card:hover .ico {
animation: bobDown 1.6s ease-in-out infinite, microTilt 2.6s ease-in-out infinite;
}
/* Titles */
#coopb-whatyouget-pro .t {
margin: 0 0 8px 0;
font: 800 var(--title)/1.2 "Plus Jakarta Sans", Inter;
letter-spacing: .005em;
transform: translateZ(8px);
transition: transform .25s ease;
}
#coopb-whatyouget-pro .card:hover .t {
transform: translateZ(12px)
}
#coopb-whatyouget-pro .t--nft {
color: var(--blue)
}
#coopb-whatyouget-pro .t--academy {
color: var(--purple)
}
#coopb-whatyouget-pro .t--bits {
color: var(--green)
}
/* Paragraph */
#coopb-whatyouget-pro .p {
margin: 0;
color: var(--sub);
font: 500 var(--body)/var(--lh) Inter, system-ui;
max-width: 30ch;
min-height: calc(var(--body) * var(--lh) * var(--p-lines));
display: flex;
align-items: flex-start;
justify-content: center;
text-wrap: balance;
transform: translateZ(4px);
transition: transform .25s ease;
}
#coopb-whatyouget-pro .card:hover .p {
transform: translateZ(8px)
}
/* CTA */
#coopb-whatyouget-pro .cta {
display: flex;
justify-content: center;
margin-top: 12px
}
/* Collision-proof button reset + reapply intended styles */
#coopb-whatyouget-pro .cta>a.btn {
all: unset;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: clamp(48px, 6vw, 56px) !important;
padding: 0 clamp(22px, 3vw, 36px) !important;
border-radius: 9999px !important;
background: #38bded !important;
color: #fff !important;
font: 700 clamp(14px, 1.6vw, 16px)/1 Inter, system-ui !important;
text-decoration: none !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25) !important;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
outline: none;
transform: translateZ(12px);
}
#coopb-whatyouget-pro .cta>a.btn:hover {
background: #26a7d6 !important;
transform: translateZ(12px) translateY(-2px) !important;
box-shadow: 0 10px 26px rgba(56, 189, 237, .32) !important;
}
#coopb-whatyouget-pro .cta>a.btn:focus-visible {
outline: 2px solid #26a7d6 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 3px rgba(56, 189, 237, .45) !important;
}
/* Reveal */
@media (prefers-reduced-motion: no-preference) {
#coopb-whatyouget-pro .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s ease, transform .45s ease
}
#coopb-whatyouget-pro.is-in .reveal {
opacity: 1;
transform: translateY(0)
}
#coopb-whatyouget-pro .card:nth-child(1) {
transition-delay: .05s
}
#coopb-whatyouget-pro .card:nth-child(2) {
transition-delay: .12s
}
#coopb-whatyouget-pro .card:nth-child(3) {
transition-delay: .19s
}
}
/* Keyframes */
@keyframes barShift {
0% {
background-position: 0% 50%
}
100% {
background-position: 200% 50%
}
}
@keyframes ringPulse {
0% {
box-shadow: 0 0 0 0 var(--ring)
}
100% {
box-shadow: 0 0 0 14px rgba(56, 189, 237, 0)
}
}
@keyframes bobDown {
0%,
100% {
transform: translateZ(30px) translateY(0)
}
50% {
transform: translateZ(30px) translateY(4px)
}
}
@keyframes microTilt {
0%,
100% {
transform: translateZ(30px) rotateZ(0deg)
}
50% {
transform: translateZ(30px) rotateZ(-1.2deg)
}
}
/* Motion safety */
@media (prefers-reduced-motion: reduce) {
#coopb-whatyouget-pro .card,
#coopb-whatyouget-pro .t,
#coopb-whatyouget-pro .p,
#coopb-whatyouget-pro .icon-wrap,
#coopb-whatyouget-pro .ico {
transition: none !important;
animation: none !important;
transform: none !important
}
#coopb-whatyouget-pro .card::before {
animation: none !important
}
#coopb-whatyouget-pro .reveal {
opacity: 1 !important;
transform: none !important
}
}
#coopb-steps-finalfix,
#coopb-steps-finalfix * {
box-sizing: border-box;
}
#coopb-steps-finalfix {
--blue: #38bded;
--purple: #8000fc;
--green: #7bc35b;
--ink: #0E1216;
--sub: #3B4450;
--h1: clamp(32px, 4.8vw, 56px);
--subh: clamp(15px, 1.4vw, 18px);
--h3: clamp(18px, 1.6vw, 20px);
--body: clamp(14px, 1.2vw, 16px);
--circle: clamp(56px, 6vw, 74px);
--rail-h: 3px;
--btn-h: clamp(46px, 6vw, 54px);
--btn-px: clamp(18px, 3vw, 28px);
--btn-fs: clamp(14px, 1.6vw, 16px);
isolation: isolate;
}
#coopb-steps-finalfix .wrap {
max-width: 1160px;
margin: 0 auto;
padding: clamp(36px, 7vh, 80px) 16px;
display: grid;
gap: clamp(28px, 5vh, 40px);
text-align: center;
}
/* ===== TITLE ===== */
#coopb-steps-finalfix header {
position: relative;
z-index: 2;
}
#coopb-steps-finalfix .h1 {
margin: 0;
display: block !important;
visibility: visible !important;
font: 800 var(--h1)/1.08 "Plus Jakarta Sans", Inter, system-ui !important;
letter-spacing: -.02em;
color: var(--ink) !important;
}
#coopb-steps-finalfix .title-text {
color: var(--ink);
}
@supports (-webkit-background-clip:text) or (background-clip:text) {
#coopb-steps-finalfix .title-text {
background: linear-gradient(90deg, var(--blue), var(--purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
#coopb-steps-finalfix .sub {
margin: 8px auto 0;
max-width: 780px;
color: var(--sub);
font: 500 var(--subh)/1.6 Inter, system-ui;
}
/* ===== TIMELINE ===== */
#coopb-steps-finalfix .steps {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2vw, 28px);
align-items: start;
text-align: center;
}
#coopb-steps-finalfix .rail {
position: absolute;
left: 8%;
right: 8%;
top: calc(var(--circle)/2);
height: var(--rail-h);
border-radius: 10px;
z-index: 0;
background: linear-gradient(90deg, #dfe8f1, #e8eef6, #dfe8f1);
overflow: hidden;
}
#coopb-steps-finalfix .rail::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--blue), var(--purple), var(--green));
background-size: 200% 100%;
animation: railMove 12s linear infinite;
opacity: .35;
}
@keyframes railMove {
0% {
background-position: 0% 50%
}
100% {
background-position: 200% 50%
}
}
/* Steps */
#coopb-steps-finalfix .step {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
justify-items: center;
opacity: 0;
transform: translateY(22px);
}
#coopb-steps-finalfix.is-in .step {
opacity: 1;
transform: translateY(0);
transition: .6s ease;
}
#coopb-steps-finalfix.is-in .step:nth-of-type(1) {
transition-delay: .12s
}
#coopb-steps-finalfix.is-in .step:nth-of-type(2) {
transition-delay: .30s
}
#coopb-steps-finalfix.is-in .step:nth-of-type(3) {
transition-delay: .48s
}
/* Hover highlight */
#coopb-steps-finalfix .step::before {
content: "";
position: absolute;
top: calc(var(--circle)/2 - var(--rail-h)/2);
left: 10%;
right: 10%;
height: var(--rail-h);
border-radius: 10px;
background: linear-gradient(90deg, var(--blue), var(--purple), var(--green));
opacity: 0;
transition: .25s ease;
z-index: -1;
}
#coopb-steps-finalfix .step:hover::before {
height: 6px;
opacity: .9
}
/* Circles */
#coopb-steps-finalfix .circle {
width: var(--circle);
height: var(--circle);
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font: 800 clamp(16px, 1.6vw, 18px)/1 "Plus Jakarta Sans";
box-shadow: 0 10px 22px rgba(2, 12, 27, .12);
position: relative;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
#coopb-steps-finalfix .c1 {
background: linear-gradient(135deg, #3fc6ef, #1ea0c7)
}
#coopb-steps-finalfix .c2 {
background: linear-gradient(135deg, #8a3eff, #b487ff)
}
#coopb-steps-finalfix .c3 {
background: linear-gradient(135deg, #7bc35b, #a7df7f)
}
/* Ring on hover */
#coopb-steps-finalfix .circle::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: conic-gradient(from 0deg, rgba(255, 255, 255, .0) 0 60%, rgba(255, 255, 255, .6) 60% 72%, rgba(255, 255, 255, 0) 72%);
mask: radial-gradient(circle at 50% 50%, transparent calc(50% - 3px), #000 calc(50% - 2px));
opacity: 0;
transform: rotate(0deg);
transition: opacity .2s ease;
}
#coopb-steps-finalfix .step:hover .circle,
#coopb-steps-finalfix .step:focus-within .circle {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(2, 12, 27, .18);
filter: saturate(1.05);
}
#coopb-steps-finalfix .step:hover .circle::after,
#coopb-steps-finalfix .step:focus-within .circle::after {
opacity: 1;
animation: ringSpin 1.6s linear infinite;
}
@keyframes ringSpin {
to {
transform: rotate(360deg)
}
}
/* Titles & body */
#coopb-steps-finalfix .title {
margin: 0;
font: 700 var(--h3)/1.25 Inter, system-ui;
color: var(--ink);
transition: color .2s ease, background .2s ease;
}
#coopb-steps-finalfix .step:hover .title {
background: linear-gradient(90deg, var(--blue), var(--purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
#coopb-steps-finalfix .copy {
margin: 0;
max-width: 300px;
color: var(--sub);
font: 500 var(--body)/1.65 Inter, system-ui;
}
/* ===== CTA (collision-proof) ===== */
#coopb-steps-finalfix .cta {
display: flex;
justify-content: center;
margin-top: 6px
}
/* Reset anything global and re-assert our intended styles */
#coopb-steps-finalfix .cta>a.btn {
all: unset;
/* wipe global .btn / a styles elsewhere */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: var(--btn-h) !important;
padding: 0 var(--btn-px) !important;
border-radius: 9999px !important;
background: #38bded !important;
color: #fff !important;
font: 700 var(--btn-fs)/1 Inter, system-ui !important;
text-decoration: none !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25) !important;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
#coopb-steps-finalfix .cta>a.btn:hover {
background: #26a7d6 !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 26px rgba(56, 189, 237, .32) !important;
}
#coopb-steps-finalfix .cta>a.btn:focus-visible {
outline: 2px solid #26a7d6 !important;
outline-offset: 3px !important;
}
/* Responsive */
@media(max-width:860px) {
#coopb-steps-finalfix .steps {
grid-template-columns: 1fr;
gap: 32px
}
#coopb-steps-finalfix .rail {
display: none
}
#coopb-steps-finalfix .step::before {
display: none
}
}
@media(prefers-reduced-motion:reduce) {
#coopb-steps-finalfix * {
animation: none !important;
transition: none !important
}
}
/* Scope & stability only inside this block */
#coopb-paid-left {
position: relative;
isolation: isolate
}
#coopb-paid-left,
#coopb-paid-left * {
box-sizing: border-box
}
/* Neutralize common global resets that can bleed in */
#coopb-paid-left h1,
#coopb-paid-left h2,
#coopb-paid-left p {
margin: 0
}
/* Kill any global ::before/::after that might draw lines/decoration */
#coopb-paid-left .heading::before,
#coopb-paid-left .heading::after,
#coopb-paid-left .line::before,
#coopb-paid-left .line::after,
#coopb-paid-left .para::before,
#coopb-paid-left .para::after {
content: none !important;
display: none !important;
}
/* Re-apply your exact styles (with local hard reset where collisions are common) */
#coopb-paid-left .heading {
/* local reset */
all: unset;
display: block;
margin: 0 0 10px 0;
font: 800 clamp(30px, 4.8vw, 54px)/1.06 "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
color: #38bded;
letter-spacing: .01em;
text-wrap: balance;
text-align: left;
}
#coopb-paid-left .line {
/* local reset */
all: unset;
display: block;
margin: 0 0 12px 0;
font: 800 clamp(18px, 2.3vw, 22px)/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
color: #0E1216;
text-align: left;
text-decoration: none;
}
#coopb-paid-left .para {
/* local reset */
all: unset;
display: block;
margin: 0;
font: 600 clamp(14px, 1.2vw, 16px)/1.7 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
color: #0E1216;
text-align: left;
max-width: 56ch;
}
#coopb-paid-left .actions {
/* keep your layout */
margin-top: 18px;
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-start
}
#coopb-paid-left .btn {
/* local reset */
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: clamp(48px, 6vw, 56px);
padding: 0 clamp(22px, 3vw, 36px);
border-radius: 9999px;
border: 1px solid transparent;
font: 700 clamp(14px, 1.6vw, 16px)/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
color: #fff;
background: #38bded;
text-decoration: none !important;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
-webkit-tap-highlight-color: transparent;
}
#coopb-paid-left .btn:hover {
background: #26a7d6;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(56, 189, 237, .32);
}
#coopb-paid-left .btn:focus-visible {
outline: 2px solid #38bded;
outline-offset: 2px;
}
/* Responsive centering (unchanged) */
@media (max-width:980px) {
#coopb-paid-left .heading,
#coopb-paid-left .line,
#coopb-paid-left .para,
#coopb-paid-left .actions {
text-align: center;
justify-content: center
}
}
/* Scope */
#coopb-wallet-43-balanced,
#coopb-wallet-43-balanced * {
box-sizing: border-box
}
#coopb-wallet-43-balanced {
--w: min(560px, 100%);
--r: 22px;
--blue: #38bded;
--purple: #8000fc;
--ink: #0E1216;
--vh: 100dvh;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bot: env(safe-area-inset-bottom, 0px);
--popup-margin: 64px;
--safeH: calc(var(--vh) - var(--safe-top) - var(--safe-bot));
}
/* Poster (4:3) */
#coopb-wallet-43-balanced .poster {
width: var(--w);
aspect-ratio: 4/3;
margin-inline: auto;
position: relative;
overflow: hidden;
border-radius: var(--r);
background: linear-gradient(180deg, #0f2431, #0b1d27);
box-shadow: 0 26px 66px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
isolation: isolate;
}
/* Texture */
#coopb-wallet-43-balanced .texture {
position: absolute;
inset: 0;
opacity: .12;
pointer-events: none;
background:
linear-gradient(to right, #fff 1px, transparent 1px) 0 0/26px 26px,
linear-gradient(to bottom, #fff 1px, transparent 1px) 0 0/26px 26px;
mix-blend: overlay;
}
/* Content grid */
#coopb-wallet-43-balanced .inner {
position: absolute;
inset: 12px;
display: grid;
gap: 10px;
grid-template-columns: 1.05fr 1.35fr;
grid-template-rows: auto 1fr;
min-width: 0;
min-height: 0;
}
/* LEFT — Balance */
#coopb-wallet-43-balanced .balance {
grid-column: 1;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 16px;
padding: 14px;
background: linear-gradient(135deg, #2aa6d2, #1b7fa7 55%, #4322a6);
color: #fff;
box-shadow: 0 18px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
position: relative;
overflow: hidden;
}
#coopb-wallet-43-balanced .bal-label {
font: 600 clamp(11px, 1.2vw, 12px)/1.1 Inter, system-ui;
letter-spacing: .08em;
opacity: .95;
white-space: nowrap
}
#coopb-wallet-43-balanced .bal-amt {
font: 800 clamp(20px, 2.5vw, 28px)/1 "Plus Jakarta Sans", Inter;
text-wrap: balance
}
#coopb-wallet-43-balanced .chips {
display: flex;
flex-wrap: wrap;
gap: 8px
}
#coopb-wallet-43-balanced .chip {
padding: .45em .7em;
border-radius: 9999px;
font: 700 clamp(10px, 1vw, 12px)/1 Inter;
background: #ffffffee;
color: #08202b;
border: 1px solid rgba(0, 0, 0, .06);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RIGHT — Activity panel */
#coopb-wallet-43-balanced .panel {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
border-radius: 16px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
overflow: hidden;
}
#coopb-wallet-43-balanced .panel-head {
padding: 10px 14px;
color: #d6eaf6;
font: 700 clamp(11px, 1.2vw, 13px)/1 Inter;
display: flex;
align-items: center;
gap: .6em;
border-bottom: 1px solid rgba(255, 255, 255, .06);
min-height: 40px;
}
#coopb-wallet-43-balanced .dot {
width: .6em;
height: .6em;
border-radius: 9999px;
background: linear-gradient(135deg, #38bded, #8000fc);
box-shadow: 0 0 .6em rgba(56, 189, 237, .6)
}
#coopb-wallet-43-balanced .list {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden
}
#coopb-wallet-43-balanced .scroll {
position: absolute;
inset: 0 auto auto 0;
right: 0;
animation: cbw-tx 10s linear infinite
}
@keyframes cbw-tx {
0% {
transform: translateY(0)
}
90% {
transform: translateY(-50%)
}
100% {
transform: translateY(0)
}
}
#coopb-wallet-43-balanced .row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: .7em;
align-items: center;
padding: .78em 1em;
color: #d6eaf6;
border-bottom: 1px solid rgba(255, 255, 255, .06);
font: 600 clamp(11px, 1.2vw, 13px)/1.3 Inter;
min-width: 0;
}
#coopb-wallet-43-balanced .ico {
width: 2.1em;
height: 2.1em;
border-radius: 8px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(56, 189, 237, .18), rgba(128, 0, 252, .18));
border: 1px solid rgba(255, 255, 255, .12);
color: #fff;
font-weight: 800;
}
#coopb-wallet-43-balanced .desc {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
#coopb-wallet-43-balanced .time {
color: #9fc7da;
font-size: .85em;
font-weight: 600
}
#coopb-wallet-43-balanced .amt {
font-weight: 800;
color: #fff;
white-space: nowrap
}
#coopb-wallet-43-balanced .pos {
color: #76df9a
}
#coopb-wallet-43-balanced .neg {
color: #f5a8a8
}
/* Decorative rotating ring */
#coopb-wallet-43-balanced .ring {
position: absolute;
left: 14px;
right: 50%;
top: 14px;
bottom: 14%;
border-radius: 9999px;
opacity: .14;
filter: blur(.2px);
pointer-events: none;
background:
radial-gradient(closest-side, rgba(255, 255, 255, .55) 94%, transparent 96%),
conic-gradient(from 0deg, rgba(56, 189, 237, .7), rgba(128, 0, 252, .7), rgba(56, 189, 237, .7));
mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 64%);
animation: cbw-spin 18s linear infinite;
}
@keyframes cbw-spin {
to {
transform: rotate(360deg)
}
}
/* Play button */
#coopb-wallet-43-balanced .play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 9999px;
display: grid;
place-items: center;
cursor: pointer;
z-index: 5;
border: 1px solid rgba(0, 0, 0, .06);
background: #ffffffee;
backdrop-filter: blur(6px);
box-shadow: 0 16px 36px rgba(2, 12, 27, .24), inset 0 1px 0 rgba(255, 255, 255, .88);
transition: transform .18s ease, box-shadow .18s ease;
}
#coopb-wallet-43-balanced .play:hover {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 22px 48px rgba(2, 12, 27, .28)
}
#coopb-wallet-43-balanced .play svg {
width: 28px;
height: 28px;
fill: url(#cbG43b)
}
/* ---------- LIGHTBOX styles ----------
We define them twice:
1) Scoped under #coopb-wallet-43-balanced (when inside component)
2) Global .cb-lb (when portaled into )
*/
/* 1) Scoped */
#coopb-wallet-43-balanced .lightbox {
position: fixed;
inset: 0;
display: none;
z-index: 10100;
align-items: center;
justify-content: center;
}
#coopb-wallet-43-balanced .lightbox.show {
display: flex
}
#coopb-wallet-43-balanced .scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#coopb-wallet-43-balanced .panel-video {
position: relative;
width: min(1100px, 94vw);
max-height: calc(var(--safeH) - var(--popup-margin));
aspect-ratio: 16/9;
background: #000;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
margin: auto;
}
@media (max-aspect-ratio: 16/9) {
#coopb-wallet-43-balanced .panel-video {
width: min(94vw, calc((var(--safeH) - var(--popup-margin)) * 16 / 9));
}
}
#coopb-wallet-43-balanced .video-wrap {
position: absolute;
inset: 0
}
#coopb-wallet-43-balanced .panel-video iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block !important;
border: 0 !important;
background: #000;
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
transform: none !important;
}
#coopb-wallet-43-balanced .lb-x {
position: absolute;
right: 12px;
top: calc(12px + var(--safe-top));
width: 44px;
height: 44px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, .08);
cursor: pointer;
z-index: 2;
}
#coopb-wallet-43-balanced .lb-x::before,
#coopb-wallet-43-balanced .lb-x::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
top: 21px;
height: 2px;
background: #0E1216;
border-radius: 2px
}
#coopb-wallet-43-balanced .lb-x::before {
transform: rotate(45deg)
}
#coopb-wallet-43-balanced .lb-x::after {
transform: rotate(-45deg)
}
/* 2) Global (applies after portal to ) */
.cb-lb {
position: fixed;
inset: 0;
display: none;
z-index: 10100;
align-items: center;
justify-content: center;
}
.cb-lb.show {
display: flex
}
.cb-lb>.scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cb-lb .panel-video {
position: relative;
width: min(1100px, 94vw);
/* Use viewport/safe-areas when portaled (fallback values if CSS vars absent) */
max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 64px);
aspect-ratio: 16/9;
background: #000;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
margin: auto;
}
@media (max-aspect-ratio: 16/9) {
.cb-lb .panel-video {
width: min(94vw, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 64px) * 16 / 9));
}
}
.cb-lb .video-wrap {
position: absolute;
inset: 0
}
.cb-lb .panel-video iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: #000;
}
.cb-lb .lb-x {
position: absolute;
right: 12px;
top: calc(12px + env(safe-area-inset-top, 0px));
width: 44px;
height: 44px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, .08);
cursor: pointer;
z-index: 2;
}
.cb-lb .lb-x::before,
.cb-lb .lb-x::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
top: 21px;
height: 2px;
background: #0E1216;
}
@media (max-width:640px) {
#coopb-wallet-43-balanced .panel-video,
.cb-lb .panel-video {
border-radius: 12px
}
#coopb-wallet-43-balanced .lb-x,
.cb-lb .lb-x {
width: 48px;
height: 48px
}
#coopb-wallet-43-balanced .lb-x::before,
#coopb-wallet-43-balanced .lb-x::after,
.cb-lb .lb-x::before,
.cb-lb .lb-x::after {
top: 23px
}
}
@media (prefers-reduced-motion:reduce) {
#coopb-wallet-43-balanced * {
animation: none !important;
transition: none !important
}
}
/* --- Scoped fix: block global .line overrides --- */
#cbt-section .line {
position: static !important;
inset: auto !important;
transform: none !important;
height: auto !important;
background: none !important;
-webkit-mask: none !important;
mask: none !important;
animation: none !important;
box-shadow: none !important;
}
/* Scope everything */
#cbt-section,
#cbt-section * {
box-sizing: border-box
}
/* Wrapper */
#cbt-section .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px
}
/* Header typography */
#cbt-section header {
text-align: center;
margin-bottom: 40px
}
#cbt-section .heading {
margin: 0 0 12px 0;
font: 800 clamp(30px, 4.8vw, 54px)/1.06 "Plus Jakarta Sans", Inter;
color: #0E1216;
letter-spacing: .01em;
text-wrap: balance;
}
#cbt-section .heading strong {
background: linear-gradient(90deg, #38bded, #8000fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#cbt-section .line {
margin: 0 0 12px 0;
font: 800 clamp(18px, 2.3vw, 22px)/1.45 Inter;
color: #0E1216;
}
#cbt-section .para {
margin: 0 auto;
max-width: 56ch;
font: 600 clamp(14px, 1.2vw, 16px)/1.7 Inter;
color: #0E1216;
}
/* Button */
#cbt-section .actions {
margin-top: 32px;
display: flex;
justify-content: center
}
/* Collision-proof CTA: reset and re-apply intended styles */
#cbt-section .actions>a.btn {
all: unset;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: clamp(48px, 6vw, 56px) !important;
padding: 0 clamp(22px, 3vw, 36px) !important;
border-radius: 9999px !important;
background: #38bded !important;
color: #fff !important;
font: 700 clamp(14px, 1.6vw, 16px)/1 Inter, system-ui !important;
text-decoration: none !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25) !important;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
}
#cbt-section .actions>a.btn:hover {
background: #26a7d6 !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 26px rgba(56, 189, 237, .32) !important;
}
#cbt-section .actions>a.btn:focus-visible {
outline: 2px solid #26a7d6 !important;
outline-offset: 3px !important;
}
/* ===== Desktop layout ===== */
#cbt-section .desk {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
#cbt-section .video-box {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
#cbt-section .frame {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 10px;
overflow: hidden;
background: #000
}
#cbt-section .frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
border-radius: 10px
}
/* Desktop thumbs */
#cbt-section .scroll-column {
height: 480px;
overflow: hidden;
border-radius: 12px;
background: #f8f8f8;
padding: 8px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .05);
border: 1px solid #e9eef4;
}
#cbt-section .scroll-wrapper {
height: 100%;
overflow-y: auto;
scroll-behavior: smooth
}
#cbt-section .thumbs-vertical {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px
}
@media (max-width:1060px) {
#cbt-section .thumbs-vertical {
grid-template-columns: repeat(2, 1fr)
}
}
#cbt-section .thumb {
position: relative;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
border: 1px solid #eef3f8;
aspect-ratio: 16/9;
}
@supports not (aspect-ratio:16/9) {
#cbt-section .thumb {
height: 0;
padding-top: 56.25%
}
#cbt-section .thumb>* {
position: absolute;
inset: 0
}
}
#cbt-section .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .2s ease
}
#cbt-section .thumb:hover img {
transform: scale(1.03)
}
#cbt-section .thumb::after {
content: "";
position: absolute;
right: 8px;
bottom: 8px;
width: 36px;
height: 36px;
border-radius: 999px;
background: #ffffffee;
backdrop-filter: blur(4px);
box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
-webkit-mask: url('data:image/svg+xml;utf8,') center/58% no-repeat;
mask: url('data:image/svg+xml;utf8,') center/58% no-repeat;
}
/* ===== Mobile layout ===== */
#cbt-section .mob {
display: none
}
@media (max-width: 900px) {
#cbt-section .desk {
display: none
}
#cbt-section .mob {
display: block
}
#cbt-section .mob .video-box {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .08)
}
#cbt-section .mob .rail-wrap {
position: relative;
margin-top: 14px;
}
#cbt-section .mob .rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 80%;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
}
#cbt-section .mob .rail::-webkit-scrollbar {
height: 6px
}
#cbt-section .mob .rail::-webkit-scrollbar-thumb {
background: #dfe7ee;
border-radius: 999px
}
#cbt-section .mob .mthumb {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid #eef3f8;
aspect-ratio: 16/9;
scroll-snap-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
#cbt-section .mob .mthumb img {
width: 100%;
height: 100%;
object-fit: cover
}
#cbt-section .mob .mthumb::after {
content: "";
position: absolute;
right: 8px;
bottom: 8px;
width: 32px;
height: 32px;
border-radius: 999px;
background: #ffffffee;
backdrop-filter: blur(4px);
box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
-webkit-mask: url('data:image/svg+xml;utf8,') center/58% no-repeat;
mask: url('data:image/svg+xml;utf8,') center/58% no-repeat;
}
/* subtle edges to hint scroll */
#cbt-section .mob .rail-wrap::before,
#cbt-section .mob .rail-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 36px;
pointer-events: none;
}
#cbt-section .mob .rail-wrap::before {
left: -2px;
background: linear-gradient(90deg, #fff, transparent)
}
#cbt-section .mob .rail-wrap::after {
right: -2px;
background: linear-gradient(270deg, #fff, transparent)
}
}
@media (max-width: 900px) {
.cbt-mobile {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 16px;
background: #ffffff;
overflow: hidden;
}
.cbt-mobile header {
text-align: center;
margin-bottom: 16px;
}
.cbt-mobile .heading {
font: 800 24px/1.2 "Plus Jakarta Sans", Inter, system-ui;
margin: 0 0 6px;
color: #0E1216;
}
.cbt-mobile .heading b {
background: linear-gradient(90deg, #38bded, #8000fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cbt-mobile .sub {
font: 600 14px/1.4 Inter, system-ui;
color: #0E1216;
margin: 0;
}
.scroll-wrapper {
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
margin: 12px 0 18px;
-webkit-overflow-scrolling: touch;
}
.scroll-row {
display: flex;
gap: 12px;
animation: scrollRow 80s linear infinite;
/* slower */
width: max-content;
}
.scroll-wrapper:hover .scroll-row {
animation-play-state: paused;
}
@keyframes scrollRow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.thumb-mobile {
min-width: 140px;
height: 90px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
background: #f4f4f4;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
border: 1px solid #eef3f8;
}
.thumb-mobile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-mobile::after {
content: "▶";
position: absolute;
font-size: 16px;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
.video-box-mobile {
width: 100%;
background: #ffffff;
border-radius: 12px;
padding: 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.video-box-mobile iframe {
width: 100%;
height: 220px;
border: none;
border-radius: 10px;
display: block;
}
.cbt-mobile .actions {
margin-top: 20px;
display: flex;
justify-content: center;
}
.cbt-mobile .btn {
height: 48px;
padding: 0 24px;
border-radius: 9999px;
font: 700 14px/1 Inter, system-ui;
color: #fff;
background: #38bded;
text-decoration: none;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cbt-mobile .btn:active {
transform: translateY(1px);
box-shadow: 0 6px 16px rgba(56, 189, 237, .25);
}
}
@media (min-width: 901px) {
.cbt-mobile {
display: none;
}
}
/* ---------- Scope & stability ---------- */
#cb-options {
position: relative;
isolation: isolate;
perspective: 1200px
}
#cb-options,
#cb-options * {
box-sizing: border-box
}
#cb-options h1,
#cb-options h2,
#cb-options h3,
#cb-options p {
margin: 0
}
#cb-options a {
text-decoration: none
}
/* ----- Local reset for the stacked token labels ----- */
#cb-options .lines {
all: unset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.2
}
#cb-options .line {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
font: 800 clamp(10px, 1.2vw, 12px)/1.2 Inter;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink);
padding: 4px 8px;
border-radius: 999px;
background: #f8fbfe;
border: 1px solid color-mix(in oklab, var(--c) 30%, #d8e4ef 70%);
max-width: 100%;
}
#cb-options .line::before,
#cb-options .line::after {
content: none !important;
display: none !important
}
/* ---------- Tokens & design variables ---------- */
#cb-options {
--blue: #38bded;
--purple: #8000fc;
--green: #7bc35b;
--ink: #0E1216;
--paper: #fff;
--ring: #e9eef3;
--muted: #344054;
--r: 18px;
--shadow: 0 8px 24px rgba(2, 12, 27, .08);
--shadow-lg: 0 18px 40px rgba(2, 12, 27, .12);
}
/* 🔹 No outer padding at all */
#cb-options .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0
}
/* Title with proper breathing room above cards */
#cb-options .heading {
margin: 0 0 clamp(36px, 5vw, 64px);
text-align: center;
letter-spacing: .01em;
text-wrap: balance;
font: 800 clamp(30px, 4.6vw, 48px)/1.06 "Plus Jakarta Sans", Inter, system-ui;
color: var(--ink);
}
#cb-options .heading b {
color: var(--blue)
}
/* Grid layout */
#cb-options .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px
}
@media (max-width:1020px) {
#cb-options .grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width:680px) {
#cb-options .grid {
grid-template-columns: 1fr
}
}
/* Subtle entrance animation */
@keyframes cb-fadeUp {
from {
opacity: 0;
transform: translateY(12px) scale(.985)
}
to {
opacity: 1;
transform: translateY(0) scale(1)
}
}
/* Per-card glow color */
#cb-options .card {
--glow: #38bded
}
#cb-options .grid article:nth-child(2) {
--glow: #8000fc
}
#cb-options .grid article:nth-child(3) {
--glow: #7bc35b
}
/* Card base + smooth hover (lift + glow + sheen + slight 3D tilt) */
#cb-options .card {
position: relative;
overflow: hidden;
border-radius: var(--r);
background: var(--paper);
border: 1px solid var(--ring);
padding: 22px 18px 20px;
box-shadow: var(--shadow);
transition:
transform .42s cubic-bezier(.2, .6, .2, 1),
box-shadow .42s cubic-bezier(.2, .6, .2, 1),
border-color .42s cubic-bezier(.2, .6, .2, 1),
background .42s cubic-bezier(.2, .6, .2, 1);
will-change: transform, box-shadow;
transform-style: preserve-3d;
animation: cb-fadeUp .6s both;
}
#cb-options .card:nth-child(1) {
animation-delay: .02s
}
#cb-options .card:nth-child(2) {
animation-delay: .08s
}
#cb-options .card:nth-child(3) {
animation-delay: .14s
}
/* Sheen sweep */
#cb-options .card::after {
content: "";
position: absolute;
inset: -20%;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
transform: translateX(-40%) rotate(6deg);
opacity: 0;
pointer-events: none;
transition: transform .8s cubic-bezier(.2, .6, .2, 1), opacity .35s ease;
}
#cb-options .card:hover {
transform: translateY(-8px) scale(1.01) rotateX(.6deg) rotateY(.6deg);
border: 1px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(180deg,
color-mix(in oklab, var(--glow) 55%, #ffffff 45%),
color-mix(in oklab, var(--glow) 15%, #dfe6ee 85%)) border-box;
box-shadow:
0 10px 28px color-mix(in oklab, var(--glow) 22%, transparent),
0 18px 40px rgba(2, 12, 27, .12);
}
#cb-options .card:hover::after {
transform: translateX(40%) rotate(6deg);
opacity: 1
}
/* Highlight middle card */
#cb-options .card.best {
border: 2px solid var(--purple);
box-shadow: 0 12px 28px rgba(128, 0, 252, .18)
}
#cb-options .badge {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
background: var(--purple);
color: #fff;
font: 700 12px/1 Inter;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 3px 8px rgba(128, 0, 252, .28);
z-index: 1;
}
/* Token */
#cb-options .token {
--c: #38bded;
width: min(180px, 48vw);
aspect-ratio: 1/1;
margin: 22px auto 14px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border: 10px solid color-mix(in oklab, var(--c) 70%, #ffffff 30%);
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c) 35%, #000 0%), 0 10px 18px rgba(2, 12, 27, .06);
transition: transform .36s cubic-bezier(.2, .6, .2, 1), box-shadow .36s cubic-bezier(.2, .6, .2, 1);
text-align: center;
will-change: transform, box-shadow;
transform: translateZ(1px);
}
#cb-options .card:hover .token {
transform: translateY(-2px) scale(1.025)
}
#cb-options .token .num {
font: 800 clamp(40px, 5.8vw, 64px)/1 "Plus Jakarta Sans", Inter;
color: var(--ink);
margin-bottom: 6px;
}
#cb-options .token.blue {
--c: #38bded
}
#cb-options .token.purple {
--c: #8000fc
}
#cb-options .token.green {
--c: #7bc35b
}
/* Titles & body */
#cb-options .title {
margin: 10px 0 2px;
text-align: center;
color: var(--ink);
font: 800 clamp(18px, 2vw, 22px)/1.22 Inter;
}
#cb-options .body {
margin: 0 auto;
max-width: 42ch;
text-align: center;
color: var(--muted);
font: 600 clamp(14px, 1.2vw, 16px)/1.7 Inter;
}
#cb-options .accent-b {
color: var(--blue)
}
.accent-p {
color: var(--purple)
}
.accent-g {
color: var(--green)
}
/* Extra space before CTA button */
#cb-options .actions {
margin-top: clamp(48px, 6vw, 72px);
display: flex;
justify-content: center
}
/* Collision-proof CTA */
#cb-options .actions>a.btn {
all: unset;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: clamp(48px, 6vw, 56px) !important;
padding: 0 clamp(22px, 3vw, 36px) !important;
border-radius: 9999px !important;
background: var(--blue) !important;
color: #fff !important;
font: 700 clamp(14px, 1.6vw, 16px)/1 Inter, system-ui !important;
cursor: pointer !important;
box-shadow: 0 6px 18px rgba(56, 189, 237, .25) !important;
transition: transform .28s cubic-bezier(.2, .6, .2, 1), box-shadow .28s cubic-bezier(.2, .6, .2, 1), background .28s cubic-bezier(.2, .6, .2, 1) !important;
white-space: nowrap;
}
#cb-options .actions>a.btn:hover {
background: #26a7d6 !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 26px rgba(56, 189, 237, .32) !important;
}
#cb-options .actions>a.btn:focus-visible {
outline: 2px solid #26a7d6 !important;
outline-offset: 3px !important
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
#cb-options .card,
#cb-options .token,
#cb-options .actions>a.btn {
transition: none !important;
animation: none !important;
transform: none !important
}
#cb-options .card::after {
display: none !important
}
}
/* Scope & reset inside footer only */
#coopb2-footer,
#coopb2-footer * {
box-sizing: border-box;
}
#coopb2-footer :where(h1, h2, h3, p, ul, ol, li) {
margin: 0;
padding: 0;
}
#coopb2-footer a,
#coopb2-footer button {
pointer-events: auto;
text-decoration: none;
}
/* Tokens & rhythm */
#coopb2-footer {
--blue: #38bded;
--purple: #8000fc;
--green: #7bc35b;
--bg1: #0b0f14;
--bg2: #0c1016;
--ink: #E9EEF4;
--muted: #9AA6B2;
--card: rgba(255, 255, 255, .04);
--card-bd: rgba(255, 255, 255, .10);
--s0: 8px;
--s1: 12px;
--s2: 16px;
--s3: 22px;
--s4: 28px;
--s5: 36px;
--s6: 56px;
--pull-up: 0px;
/* set to 40px if you want overlap */
--rail-pad-x: 32px;
--rail-pad-y: 16px;
/* Collision safety */
position: relative;
z-index: 2147483647;
isolation: isolate;
contain: paint;
pointer-events: auto;
display: block;
margin-top: calc(var(--pull-up) * -1);
padding-top: calc(var(--s5) + var(--pull-up));
padding-bottom: var(--s6);
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
text-align: center;
background:
radial-gradient(1100px 520px at 50% -10%, rgba(56, 189, 237, .10), transparent 55%),
radial-gradient(900px 420px at 80% 120%, rgba(128, 0, 252, .08), transparent 60%),
linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}
@media (max-width: 768px) {
#coopb2-footer {
margin-top: 0;
padding-top: var(--s5);
}
}
#coopb2-footer .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Logo */
#coopb2-footer .logo-wrap {
width: clamp(170px, 22vw, 240px);
margin: 0 auto var(--s3);
}
#coopb2-footer .logo-link {
display: inline-block;
}
#coopb2-footer .logo {
display: block;
width: 100%;
height: auto;
}
/* Headline */
#coopb2-footer .headline {
margin: var(--s3) auto var(--s4);
font: 800 clamp(26px, 3.8vw, 42px)/1.08 "Plus Jakarta Sans", Inter, system-ui;
letter-spacing: .01em;
text-wrap: balance;
background: linear-gradient(90deg, var(--blue), var(--purple), var(--green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Quick Links rail */
#coopb2-footer .rail {
max-width: 1100px;
margin: 0 auto var(--s4);
display: flex;
border-radius: 16px;
overflow: hidden;
background: var(--card);
border: 1px solid var(--card-bd);
box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
#coopb2-footer .rail a {
flex: 1 1 0;
display: flex;
justify-content: center;
align-items: center;
padding: var(--rail-pad-y) var(--rail-pad-x);
font-weight: 600;
font-size: 15.5px;
color: var(--ink);
white-space: nowrap;
transition: background .18s ease, transform .18s ease, color .18s ease;
}
#coopb2-footer .rail a+a {
border-left: 1px solid var(--card-bd);
}
#coopb2-footer .rail a:hover {
background: rgba(255, 255, 255, .06);
color: #fff;
transform: translateY(-2px);
}
@media (max-width:900px) {
#coopb2-footer .rail {
flex-direction: column;
}
#coopb2-footer .rail a {
white-space: normal;
padding: 14px 20px;
}
#coopb2-footer .rail a+a {
border-left: none;
border-top: 1px solid var(--card-bd);
}
}
/* Social */
#coopb2-footer .social {
display: flex;
justify-content: center;
gap: calc(var(--s2) + 2px);
margin: var(--s4) 0 var(--s3);
}
#coopb2-footer .sbtn {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, rgba(56, 189, 237, .22), rgba(128, 0, 252, .22));
border: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
transition: transform .18s ease, background .18s ease;
}
#coopb2-footer .sbtn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(56, 189, 237, .32), rgba(128, 0, 252, .30));
}
#coopb2-footer .sbtn svg {
width: 18px;
height: 18px;
display: block;
}
/* Divider — slightly tighter above legal links */
#coopb2-footer .rule {
height: 1px;
background: rgba(255, 255, 255, .12);
max-width: 1100px;
margin: 0 auto var(--s1);
/* 12px gap to legal block */
}
/* Legal block — decrease © ↔ links spacing a bit */
#coopb2-footer .cb2-legalBlock {
display: grid;
grid-auto-flow: row;
row-gap: var(--s1);
/* 12px between © and links */
justify-items: center;
margin: 0;
padding: 0;
}
#coopb2-footer .copy {
color: var(--muted);
font: 600 13.5px/1.5 Inter, sans-serif;
}
#coopb2-footer .legal {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--s2);
/* 16px between links */
line-height: 1.5;
}
#coopb2-footer .legal a {
color: var(--ink);
font: 600 13.5px/1.5 Inter, sans-serif;
}
#coopb2-footer .legal a:hover {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}