:root {
    font-size: 11.64px;

    --background-gradient: linear-gradient(186.25deg, #BBFCFD -9.15%, #BAF9FD -2.09%, #9840E5 33.8%, #392D5D 78.25%, #392d5d 175.13%);
    --secondary-gradient: linear-gradient(179.88deg, #6846A4 0.77%, #3C246A 19.53%, #262626 71.57%);
    --rectangle-color: rgba(230, 213, 255, 1);
    --btn-purple: rgba(154, 63, 255, 1);
    --dark-purple: #332260;
    --price-color: #9840E5;
    --light-purple: #E6D5FF;
    --page-font: 'Assistant', sans-serif, serif;

    /* All font sizes in rem */
    --huge-font-size: 3.75rem; /* 60px / 16 */
    --title-font-size: 3.4375rem; /* 55px */
    --smaller-title-font-size: 2.75rem; /* 44px */
    --secondary-title-size: 2.5rem; /* 40px */
    --medium-title-size: 2rem; /* 32px */
    --extra-text-font-size: 1.5625rem; /* 25px */
    --bigger-normal-font-size: 1.125rem; /* 18px */
    --normal-font-size: 1rem; /* 16px */
    --small-font-size: 0.875rem; /* 14px */
    --tiny-font-size: 0.5rem; /* 8px */
}

.sticky-bar-wrapper .image-container .mobile,
.main-layout .mobile {
    display: block;
}

.sticky-bar-wrapper .image-container .desktop,
.main-layout .desktop {
    display: none;
}

.main-layout button {
    font-size: var(--normal-font-size);
    font-weight: 400;
    border-radius: 12px;
    color: white;
    padding: 10px 20px;
    background-color: transparent;
    cursor: pointer;
}

#pro_page_v2 .main-layout input,
#pro_page_v2 .main-layout input::placeholder {
    border: none;
    background-color: transparent;
    font-size: var(--small-font-size);
    color: white;
    border-bottom: 2px solid white;
    padding: 25px 0px 7px;
}

#pro_page_v2 .main-layout input::placeholder {
    border-bottom: unset;
}

.main-layout .purple-button,
.transparent-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 135%;
    text-align: right;
    background: var(--btn-purple);
    color: white;
    padding: 11px 13px;
    border: none;
    cursor: pointer;
    gap: 18px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    width: max-content;
    white-space: nowrap;
    font-size: 1.125rem;
    min-width: max-content;
}

.transparent-button {
    background: transparent;
    color: white;
    border: 2px solid var(--light-purple)
}

.main-layout .purple-button:hover:not(.white-hover) {
    background: rgba(154, 63, 255, 0.8);
}

.main-title {
    font-size: var(--title-font-size);
    font-weight: bold;
}

.smaller-title {
    font-size: var(--smaller-title-font-size);
    font-weight: bold;
}


.extra-text {
    font-size: var(--extra-text-font-size);
}

.huge-numbers {
    font-size: var(--huge-font-size);
    font-weight: bold;
}

.secondary-title {
    font-size: var(--secondary-title-size);
}

.medium-title {
    font-size: var(--medium-title-size);
}

.bigger-normal-font {
    font-size: var(--bigger-normal-font-size);
}

.normal-font {
    font-size: var(--normal-font-size);
}

.small-font {
    font-size: var(--small-font-size);
}

* {
    box-sizing: border-box;
    font-family: var(--page-font);
}

.main-layout {
    background: var(--background-gradient);
    background-size: cover;
    min-height: 100vh;
    width: 100vw;
}

.lower.main-layout {
    background: var(--secondary-gradient);
    position: relative;
    overflow: hidden;
}

.relative {
    position: relative;
}

.image-container img {
    width: 100%;
}

.header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.upper.main-layout > *:not(:is(.pro-header-container, .benefits-container, .benefits-comment, .carousel-media, #footer, .back-to-top, #header_nav )),
.lower.main-layout > *:not(:is(.pro-header-container, .benefits-container, .benefits-comment, .sticky-bar-wrapper, #footer, .back-to-top, #header_nav )) {
    width: 95%;
    margin: 0 auto;
}

.pro-header-img .first-banner {
    width: 100%;
    padding: 45px 44px 0;
    height: 100%;
}

.pro-header .video-area {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
}

.pro-header-container {
    margin: 0 17px;
    padding-top: 18px;
}

.pro-header-container .video-container video {
    border: 2px solid white;
}

.pro-header-container .video-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    z-index: 5;
    width: 70vw;
    border-radius: 16px;
    border: inherit;
}

.hero-image-text-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 8%;
    width: 100%;
    padding: 4%;
    justify-content: space-between;
    gap: 19px;
}

.hero-image-text-container * {
    flex-basis: 50%;
}

.video-container video {
    position: relative;
    z-index: 10;
    width: inherit;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.pro-header-container .hero-image-text-container .card-info {
    position: absolute;
    top: 50%;
    width: 50%;
    z-index: 15;
    left: 10%;
    transform: translateY(-50%);
}

.htzone-card-text-container .rectangle-text,
.pro-header-container .hero-image-text-container .rectangle-text {
    position: absolute;
    background-color: var(--rectangle-color);
    width: 106px;
    height: 92px;
    bottom: -26px;
    opacity: 1;
    border-radius: 8px;
    left: 25px;
    text-align: center;
    font-weight: bold;
    padding-top: 70px;
}

.pro-header-container .hero-image-text-container .header-text {
    z-index: 20;
    display: flex;
    flex-direction: column;
    right: 15%;
    color: white;
    font-size: var(--normal-font-size);
    max-width: 450px;
}

.pro-header-container .hero-image-text-container .main-title {
    font-size: var(--secondary-title-size);
}

.first-banner img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: absolute;
}

.header-pro-logo {
    max-width: 80px;
    margin-bottom: 2px;
}

.pro-header-container .hero-image-text-container .extra-text {
    letter-spacing: 0.5px;
    line-height: 30px;
    margin-bottom: 10px;
}

.benefits-container {
    transform: translateY(-55px);
    display: grid;
    grid-template-columns: unset;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin: 0 36px;
}

.benefits-container li.benefit-container h6 {
    height: auto;
    width: 131%;
    font-family: Assistant, serif;
}

.benefits-container li.benefit-container h6 > * {
    line-height: 1.15;
}

li.benefit-container > *:not(a) {
    line-height: 117%;
    flex-basis: 25%;
}


li.benefit-container > li p {
    width: 13vw;
    line-height: 121.8%;
    margin: 0;
}

.benefits-container li {
    display: grid;
    grid-template-columns: auto 88px;
    grid-template-rows: 52px auto;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 33px 24px 25px;
    text-align: right;
    background: white;
    min-height: 208px;
}

.benefits-container li .image-container {
    width: 64px;
    height: 64px;
    grid-row: 1;
    grid-column: 2;
    margin-right: 26%;
}

.benefits-container li .image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benefits-container li.benefit-container .custom-text > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 71px;
    margin-top: 15%;
}

.benefits-container li.benefit-container .custom-text {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
}

.benefits-container li .extra-text {
    grid-row: 1;
    grid-column: 1;
}

.benefits-container li > *:not(.image-container) {
    width: 119%;
}

.benefits-container li > *:not(.image-container) * {
    background: transparent !important;
}

.benefits-container li .arrow-btn {
    text-align: left;
    align-self: end;
    height: auto;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}

.benefits-container li:last-child {
    background: linear-gradient(to left, #964FE1 37%, #332260 131%, #262626 100%);
    color: white;
}

.benefits-container li:last-child .arrow-icon path {
    fill: white;
}

.submit-btn {
    background: linear-gradient(16.67deg, #000000 2.43%, #727272 104.13%);
    border-radius: 100000px;
    color: #FFFFFF;
    width: 180px;
    height: 35px;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    border: none;
}

.arrow-btn {
    bottom: 20px;
    left: 20px;
}

li.benefit-container > *,
li.benefit-container > h6 p,
li.benefit-container > div p {
    margin: 0;
}

.upper.main-layout .benefits-comment {
    text-align: justify;
    color: var(--light-purple);
    letter-spacing: 0.2px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
    line-height: 14px;
    width: 100%;
}

.explanation-grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: 86px;
    row-gap: 16px;
    margin-top: 50px !important;
}

.explanation-titles {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: white;
    gap: 112px;
}


.explanation-titles .example-title {
    font-weight: unset;
    font-size: var(--secondary-title-size);
}

.explanation-grid .explanation-title.medium-title {
    color: white;
    font-weight: bold;
    white-space: nowrap;
}

.explanation-grid .explanation-title.example-title {
    grid-row: 3;
}

.explanation-grid .explanation-title {
    color: white;
    font-weight: 100;
    margin-right: 8%;
    font-size: 24pt;
}

.explanation-grid .how-does-it-work {
    background-color: white;
    border-radius: 15px;
    padding: 11% 7% 15% 7%;
    display: flex;
    flex-direction: column;
    gap: 29px;
    line-height: 22px;
}

.explanation-grid .how-does-it-work p {
    font-size: 1.37457rem;
    line-height: 1.08;
}

.explanation-grid .how-does-it-work .yours-hers h6 {
    justify-self: center;
}

.explanation-grid .how-does-it-work .icon-container {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin-left: 10px;
}

.yours-hers .line {
    max-width: 100%;
    display: inline-block;
    margin-top: 25px;
}

.explanation-grid .examples {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.explanation-grid .example {
    display: flex;
    min-height: 200px;
    border-radius: 15px;
    background-color: white;
    align-items: center;
    justify-content: space-around;
    grid-column: unset;
    flex-direction: column;
    margin-top: -10px;
    padding-bottom: 19px;
}

.example .huge-numbers > span {
    font-size: 20px;
    margin-right: 1px;
}

.explanation-grid .how-does-it-work .revenue {
    font-size: 18px;
}

.explanation-grid .example > div {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    padding: 4px 7% 0;
}

.explanation-grid .example .left-numbers {
    width: 144px;
}

.explanation-grid .example h6 {
    line-height: 108%;
    font-weight: bold;
}

.lower-box-wrapper .revenue-comment {
    text-align: center;
    color: var(--light-purple);
    align-self: center;
    line-height: 14px;
    margin-top: 3%;
    letter-spacing: 0.2px;
}

.explanation-grid .colored-price {
    color: var(--price-color);
}

.explanation-grid .how-does-it-work .joined-revenue {
    display: flex;
    align-items: center;
    gap: 0%;
}

.explanation-grid .how-does-it-work .joined-revenue > h6 {
    line-height: 1.24;
    font-size: 1.37457rem;
}

.lower-box-wrapper .lower-box {
    border-radius: 15px;
    border: 2px solid white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 46px 50px;
    margin-top: 7px !important;
}

.explanation-grid .revenue-comment {
    text-align: left;
    color: white;
    align-self: end;
}

.lower-box-wrapper .lower-box > * {
    color: white;
}

.lower-box-wrapper .lower-box .text-container {
    flex-basis: 60%;
}

.lower-box-wrapper .lower-box .text-container .small-font {
    padding-left: 26%;
    line-height: 13px;
    padding-top: 3%;
    letter-spacing: 0.4px;
}

.lower-box-wrapper .lower-box .icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 60px;
    padding: 10px;
    border-radius: 18px;
}

.lower-box-wrapper .lower-box .icon-grid .infobox-container {
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: center;
}

.lower-box-wrapper .lower-box .icon-grid .infobox-container .normal-font {
    line-height: 115%;
    font-size: 1.37457rem;
}

.lower-box .icon-grid .infobox-container .image-container img {
    width: 90px;
    height: 90px;
}

.couple-banner-container .couple-text {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    top: 7%;
    left: 10%;
    right: 11.5%;
    color: white;
    flex-direction: column;
}

.couple-banner-container .couple-text .normal-font {
    line-height: 22px;
    padding: 9px 0 12px 0;
    font-weight: lighter;
    font-size: 1.25rem;
}

.couple-banner-container .image-container .couple-banner {
    position: relative;
    margin-top: 7%;
    object-fit: cover;
    overflow-y: hidden;
    height: 80%;
    border-radius: 15px;
    width: 100%;
}

.couple-banner-container.relative .image-container {
    height: fit-content;
}

.couple-banner-container .image-container .couple-banner img {
    width: 100%;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 37.9%, rgba(0, 0, 0, 0.75) 55.44%),
    linear-gradient(95.23deg, rgba(187, 252, 253, 0.072) 31.45%, rgba(106, 26, 177, 0.36) 98.78%);
}

.couple-banner-container .couple-text .fast-join {
    padding: 8px 25px;
    width: 186px;
    height: 44px;
    bottom: -30%;
    margin-top: 5%;
}

.couple-banner-container .couple-text .pro-logo {
    max-width: 64px;
    margin-bottom: 7px;
    margin-right: 3px;
}

.lower.main-layout .q-and-a-container {
    background-color: #F6F6F6;
    border-radius: 18px;
    padding: 64px 27px 34px;
    margin-top: 24px !important;
    font-size: var(--normal-font-size);
    position: relative;
    z-index: 5;
}

.lower.main-layout .q-and-a-container .icon {
    color: var(--btn-purple);
    font-size: xx-large;
}

.lower.main-layout .q-and-a-container h2 {
    margin-bottom: 52px;
    line-height: 120%;
    font-size: 3.49040rem;
}

.lower.main-layout .q-and-a-container .accordion {
    border-bottom: 2px solid #E6D5FF;
    padding: 10px 0;
}

.lower.main-layout .q-and-a-container .accordion.closed .answer {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.lower.main-layout .q-and-a-container .accordion .answer {
    max-height: 100%;
    overflow-y: hidden;
    transition: max-height 1s ease-in-out;
}

.lower.main-layout .q-and-a-container .question-text {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    color: rgba(43, 43, 43, 1);
    font-size: 1.54639rem;
}

.lower.main-layout .terms-and-conditions-container {
    color: white;
    padding: 45px 21px;
    line-height: 23px;
    text-align: justify;
    z-index: 5;
    position: relative;
}

.lower.main-layout .terms-and-conditions-container a {
    color: blue;
}

.lower.main-layout .gradient-circle {
    border-radius: 2940.435px;
    opacity: 0.75;
    background: #9840E5;
    filter: blur(250px);
    position: absolute;
    width: 200vw !important;
    left: -50%;
    bottom: -50px;
    height: 90vh;
    pointer-events: none;
}

div#footer {
    width: 100vw;
    position: relative;
}

.lower.main-layout .is-pro-container {
    background: linear-gradient(58.48deg, #BBFCFD -69.54%, #BAF9FD -51.59%, #9840E5 -22.28%, #332260 90.6%, #262626 144.28%);
    height: 536px;
    border-radius: 18px;
    color: white;
    overflow: hidden;
}

.lower.main-layout .is-pro-container .is-pro-form {
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    text-align: right;
    max-width: 100%;
    margin: -10px 11%;
    padding-top: 40px;
    flex-direction: column;
    position: relative;
    z-index: 30;
}

.pro_popup_text_wrap .pro_popup_text {
    text-align: center;
    margin: 10px;
}

.lower.main-layout .is-pro-container img:not(.header-pro-logo) {
    position: absolute;
    bottom: 0;
    left: 23px;
    pointer-events: none;
    height: 50%;
    z-index: 5;
}

.is-pro-container .is-pro-form div:not(.input-container) {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    line-height: 120%;
    font-size: 1.54639rem;
}

.is-pro-container .is-pro-form .pro_popup_text_wrap {
    flex-direction: column !important;
}

.is-pro-container .is-pro-form div.secondary-title {
    font-size: 2.490401396160558rem;
    font-weight: bold;
    width: 100%;
    flex-wrap: wrap;
}

.lower.main-layout .is-pro-container img:not(.header-pro-logo) {
    display: none;
}

.is-pro-container .is-pro-form div.bigger-normal-font {
    font-size: 1.54639rem !important;
}

.is-pro-container .is-pro-form .pro_popup_text_wrap {
    flex-direction: column !important;
}

.is-pro-container .is-pro-form div.secondary-title {
    font-size: 2.4rem;
    font-weight: bold;
    width: 100%;
    flex-wrap: wrap;
}

.lower.main-layout .is-pro-container img:not(.header-pro-logo):not(.lamp.mobile) {
    display: none;
}

.is-pro-container .is-pro-form div.bigger-normal-font {
    font-size: 1.54639rem !important;
}

.pro_popup_text.padding {
    padding: 0 16%;
}

.is-pro-container .is-pro-form .input-container {
    width: 214%;
    max-width: 95%;
}

.is-pro-container .more-info {
    padding: 8px 20px;
    width: 143px;
    height: 44px;
    justify-content: flex-end;
    font-size: 14px;
}

.is-pro-container .is-pro-form .input-container .error {
    color: red;
    margin-top: 10px;
    font-size: 12px;
}

.is-pro-container .is-pro-form .pro_popup_join_card.pro_butt {
    direction: rtl;
}

.is-pro-container .is-pro-form .pro_popup_text_wrap {
    display: flex;
    flex-direction: column;
}

.is-pro-container .pro_popup_text_wrap .pro_popup_join_card.pro_butt {
    direction: rtl;
}

.is-pro-container .is-pro-form .secondary-title {
    font-weight: bold;
    direction: ltr;
    gap: 2px;
}

.is-pro-container .is-pro-form div img {
    height: 42px;
    margin: 0 10px;
}

.is-pro-container .is-pro-form input {
    width: 100%;
}

.pro-check-again a {
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}

.pro-check-again a:hover {
    color: #993ffd;
}

.pro_popup_text .pro_popup_color {
    display: contents;
}

.upper.main-layout .pro-shop-container {
    display: flex;
    align-items: center;
    position: relative;
    color: white;
    flex-direction: column;
    gap: 30px;
    margin-top: 90px !important;
    margin-bottom: 50px !important;
}

.upper.main-layout .pro-shop-container .video-container video {
    width: 100%;
    height: auto;
    border-radius: 32px;
    object-fit: cover;
}

.upper.main-layout .pro-shop-container .pro-shop-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 27px;
    margin-top: -10%;
}

.pro-shop-container .pro-shop-text .main-title img {
    width: 97px;
    height: 50px;
}

.pro-shop-container .pro-shop-text .take-me-there {
    width: 212px;
    height: 44px;
    justify-content: flex-end;
    gap: 12%;
    font-size: 14px;
}

.pro-shop-container .small-font {
    text-align: center;
    color: var(--light-purple);
    letter-spacing: 0.2px;
    max-width: 80%;
    line-height: 14px;
    width: 100%;
}

.white-hover:hover {
    background-color: white;
    border: 1px solid var(--light-purple);
    color: var(--dark-purple);
}

.upper.main-layout .discount-text-container {
    text-align: center;
    color: white;
    padding-top: 3%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.discount-text-container .transparent-button.gift_cards {
    margin-top: 3%;
    width: 225px;
    height: 44px;
    justify-content: flex-end;
    gap: 12%;
}

.upper.main-layout .discount-text-container .discount-up-to {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1%;
    white-space: nowrap;
}

.upper.main-layout .discount-text-container .discount-up-to .normal-font {
    position: relative;
    bottom: 22px;
}

.upper.main-layout .discount-text-container .secondary-title {
    font-weight: bold;
    line-height: 29px;
}

.upper.main-layout .discount-text-container .normal-font {
    line-height: 135%;
}

.upper.main-layout .discount-text-container .bigger-normal-font {
    line-height: 135%;
}

.upper.main-layout .carousel-media video {
    width: 100%;
    height: 30%;
    padding-top: 6%;
}

.lower.main-layout .htzone-card .card-image {
    width: 73%;
    height: auto;
    object-fit: contain;
    z-index: 10;
    margin-left: 42%;
    position: relative;
}

.lower.main-layout .htzone-card .htzone-card-text-container {
    place-items: center;
    position: relative;
    color: rgba(38, 38, 38, 1);
    width: 100%;
    max-width: 700px;
}

.htzone-card-text-container .fireworks-gif {
    position: absolute;
    left: 61%;
    max-width: 51%;
    height: auto;
    z-index: 15;
    pointer-events: none;
    top: 0;
}

.lower.main-layout .htzone-card .card-description-text {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 29%;
    width: 62%;
    align-items: start;
    max-width: 100%;
    height: auto;
    position: absolute;
    text-align: right;
    left: 6%;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 8px;
    top: 19%;
    z-index: 6;
    padding: 4%;
    font-size: 1.37457rem;
}

.htzone-card-text-container .card-description-text .logo-circle {
    position: absolute;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 20;
    bottom: 83%;
    right: 75%;
}

.lower.main-layout .htzone-card .card-description-text .tiny-company-logo {
    width: 100%; /* scales inside circle */
    height: auto;
    object-fit: contain;
    position: relative; /* remove absolute here */
}

.lower.main-layout .htzone-card {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    padding: 7px 0;
    gap: 25px;
    max-width: 900px;
    color: white;
    margin: auto;
}

.htzone-card-text-container .card-description-text .bow {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 25px;
    height: 25px;
    max-width: none;
    max-height: none;
    display: block;
    position: absolute;
    bottom: 78%;
    left: 61%;
    z-index: 10;
}


.htzone-card-text-container .rectangle-text {
    height: auto;
    text-align: unset;
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 4% 23% 4% 2%;
    position: absolute;
    width: 53%;
    bottom: 16%;
    border-radius: 8px;
    left: 6%;
    z-index: 5;
}

.lower.main-layout .htzone-card .card-description-text .normal-font:not(.bold) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

.htzone-card-text-container .card-description-text .normal-font {
    margin-right: 27%;
    margin-left: -5%;
    margin-top: 2%;
    font-size: inherit;
}

.lower.main-layout .htzone-card .card-description-text .bold.short-text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.lower.main-layout .htzone-card .secondary-title {
    font-weight: bold;
}

.lower.main-layout .htzone-card .card-description-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    max-width: 500px;
}
.lower.main-layout .htzone-card .card-description-container .main-title {
    line-height: 42px;
}

.htzone-card .card-description-container .fast-join {
    width: 225px;
    height: 44px;
    justify-content: flex-end;
    gap: 12%;
    font-size: 14px;
}

.lower.main-layout .htzone-card .description {
    font-size: var(--extra-text-font-size);
    line-height: 135%;
    width: 307px;
}

.sticky-bar-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    position: sticky;
    bottom: 0;
    z-index: 100;
    margin-bottom: -5%;
    margin-top: -3%;
    overflow: hidden;
    width: 100vw;
}

.sticky-bar-wrapper .image-container .sticky-bar-img.mobile {
    width: 100vw;
}

.sticky-text-container {
    top: 21%;
    left: 27.2%;
    flex-direction: column-reverse;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
    z-index: 2;
    text-align: right;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.sticky-text-container .quick-check {
    width: 44vw;
    height: 44px;
    padding: 0 2px;
    justify-content: center;
    font-size: 14px;
}

#footer {
    margin-top: unset;
}

@media only screen and (min-width: 900px) and (max-width: 1200px) {
    .lower.main-layout .q-and-a-container h2 {
        font-size: var(--secondary-title-size);
    }

    .is-pro-container .is-pro-form div.bigger-normal-font {
        font-size: var(--bigger-normal-font-size) !important;
    }

    .is-pro-container .is-pro-form div.secondary-title {
        font-size: 2.490401396160558rem;
    }

    .is-pro-container .is-pro-form div.bigger-normal-font {
        font-size: 1.54639rem !important;
    }

    .lower.main-layout .is-pro-container img:not(.header-pro-logo) {
        display: block;
    }

    .lower-box-wrapper .lower-box .icon-grid .infobox-container .normal-font {
        line-height: 115%;
        font-size: 1.125rem;
    }

    .explanation-grid .example h6 {
        line-height: 0.918;
        font-size: 1.125rem;
        font-weight: normal;
    }

    .explanation-grid .how-does-it-work p {
        font-size: 1.125rem;
        line-height: 1.248;
    }

    .benefits-container {
        grid-template-columns: unset;
        grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    .sticky-bar-wrapper .image-container .desktop,
    .main-layout .mobile {
        display: block;
    }

    .sticky-bar-wrapper .image-container .mobile,
    .main-layout .desktop {
        display: none;
    }

    .hero-image-text-container {
        flex-direction: column;
        padding: 4%;
    }

    .lower-box-wrapper .lower-box .icon-grid {
        gap: 10px;
    }

    .lower-box-wrapper .lower-box .icon-grid .infobox-container {
        align-items: center;
        display: flex;
        flex-direction: row
    }

    .lower-box-wrapper .lower-box .text-container .small-font {
        padding-left: 0;
    }

    .lower-box-wrapper .lower-box .text-container .secondary-title {
        padding-bottom: 15px;
    }

    .upper.main-layout .pro-shop-container .pro-shop-text {
        display: flex;
        flex-direction: column;
        align-items: normal;
        text-align: right;
        gap: 27px;
    }

    .couple-banner-container .couple-text .bigger-normal-font {
        padding: 2% 0 3% 19%;
        letter-spacing: 0.5;
        line-height: 1.35;
    }

    .couple-banner-container .couple-text .pro-logo {
        max-width: 99px;
        margin-bottom: 10px;
    }


    .sticky-text-container {
        top: 21%;
        left: 37.2%;
        flex-direction: row;
        position: absolute;
        display: flex;
        align-items: center;
        gap: 14px;
        color: white;
        z-index: 2;
        text-align: right;
        font-weight: bold;
        letter-spacing: 0.5px;
    }
}

@media only screen and (min-width: 1200px) {
    .lower.main-layout .q-and-a-container h2 {
        font-size: var(--secondary-title-size);
    }

    .is-pro-container .is-pro-form div.secondary-title {
        font-size: var(--secondary-title-size) !important;
    }

    .lower.main-layout .is-pro-container img:not(.header-pro-logo):not(.lamp.mobile) {
        display: block;
    }

    .is-pro-container .is-pro-form div.bigger-normal-font {
        font-size: var(--bigger-normal-font-size) !important;
    }

    .lower-box-wrapper .lower-box .icon-grid .infobox-container .normal-font {
        line-height: 115%;
        font-size: 1.125rem;
    }
    .explanation-grid .example h6 {
        line-height: 0.918;
        font-size: 1.125rem;
        font-weight: normal;
    }

    .explanation-grid .how-does-it-work p {
        font-size: 1.125rem;
        line-height: 1.248;
    }

    .upper.main-layout > *:not(:is(.pro-header-container, .benefits-container, .benefits-comment, .carousel-media, #footer, .back-to-top, #header_nav )),
    .lower.main-layout > *:not(:is(.pro-header-container, .benefits-container, .benefits-comment, .sticky-bar-wrapper, #footer, .back-to-top, #header_nav )) {
        width: 70%;
    }

    :root {
        font-size: 16px;
    }

    .pro-header-container .hero-image-text-container .extra-text {
        margin-bottom: 30px;
        margin-top: 8px;
    }

    .benefits-container {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: unset;
        margin: 10px 140px;
        gap: 20px;
    }

    .sticky-bar-wrapper .image-container .mobile,
    .main-layout .mobile {
        display: none;
    }


    .sticky-bar-wrapper .image-container .desktop,
    .main-layout .desktop {
        display: block;
    }

    .hero-image-text-container {
        flex-direction: row-reverse;
        padding: 2% 11%;
        top: 168px;
        gap: unset;
    }

    .pro-header-container .video-container {
        width: 40vw;
        top: -37px;
    }

    .pro-header-container .hero-image-text-container .rectangle-text {
        top: -40px;
        bottom: unset;
        right: 25px;
        left: unset;
        padding-top: 10px;
        border-radius: 12px;
        width: 144px;
    }

    .benefits-container li {
        position: relative;
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 20px;
        text-align: right;
        grid-template-rows: 73px auto;
    }

    .benefits-container li .benefits-extra-text > * {
        line-height: 1.35;
        font-size: 1.125rem;
    }

    .benefit-container .image-container {
        grid-column: 1;
        grid-row: 1;
    }

    /* extra-text under image */
    .benefits-container li .extra-text {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 8px;
    }

    .benefits-container li.benefit-container .custom-text {
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: start;
    }

    .benefits-container li .arrow-btn {
        grid-row: 4;
    }

    .benefits-container li:last-child {
        background: linear-gradient(201.62deg, #964FE1 11.83%, #332260 90.84%, #262626 131.39%);
    }

    .benefits-container li .image-container {
        width: 70px;
        height: 70px;
        grid-row: 1;
        grid-column: 1;
        margin-right: unset;
    }

    .explanation-grid .how-does-it-work .revenue.colored-price {
        font-size: var(--extra-text-font-size);
        line-height: 119%;
        letter-spacing: 0.3px;
    }

    .explanation-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto repeat(2, 205px) 25px auto;
    }

    .explanation-grid .explanation-title {
        margin-right: unset;
    }

    .explanation-grid .example .left-numbers {
        width: 173px;
    }

    .explanation-grid .example {
        grid-column: 2;
        height: 192px;
        width: unset;
        flex-wrap: wrap;
        margin-left: unset;
        flex-direction: row;
        margin-top: unset;
        border-radius: 18px;
    }

    .explanation-grid .how-does-it-work {
        padding: 34px 7%;
        display: flex;
        grid-row: 2 / -1;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: flex-start;
        margin-left: unset;
        background-color: white;
        border-radius: 18px;
        gap: 19px;
    }

    .explanation-grid .how-does-it-work .yours-hers {
        font-size: 1.125rem;
    }

    .lower-box-wrapper .lower-box .icon-grid {
        gap: 30px 70px;
    }

    .lower-box-wrapper .lower-box .icon-grid .infobox-container {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .lower-box .icon-grid .infobox-container .image-container img {
        width: 98px;
        height: 98px;
    }

    .lower.main-layout .is-pro-container .is-pro-form {
        align-items: center;
        max-width: 40%;
        margin: 0 auto;
        text-align: center;
    }

    .lower.main-layout .is-pro-container img:not(.header-pro-logo) {
        left: 0;
        height: 100%;
    }

    .lower.main-layout .q-and-a-container {
        padding: 44px 117px 84px;
        margin-top: 47px !important;
    }

    .q-and-a-container .main-title {
        color: rgba(38, 38, 38, 1);
        font-size: var(--smaller-title-font-size);
    }

    .lower.main-layout .q-and-a-container .question-text {
        font-size:  1.125rem;
    }

    .lower.main-layout .htzone-card {
        flex-direction: row; /* image left, text right */
        padding: 0;
        align-items: center;
        max-width: unset;
        margin-bottom: 15px;
    }

    .lower.main-layout .htzone-card > * {
        width: unset;
        text-align: unset;
    }

    .lower.main-layout .htzone-card .card-description-container {
        align-items: flex-start;
        text-align: right;
        gap: 20px;
    }

    .upper.main-layout .discount-text-container {
        max-width: 50%;
        padding-top: 2%;
    }

    .discount-text-container .transparent-button.gift_cards {
        width: 237px;
    }

    .upper.main-layout .carousel-media video {
        padding-top: 25px;
        height: unset;
    }

    .couple-banner-container .couple-text {
        left: 39%;
        right: 5.5%;
        top: 13%;
    }

    .couple-banner-container .couple-text .normal-font {
        font-size: 1.13rem;
    }

    .couple-banner-container .couple-text .main-title {
        line-height: 1.04;
    }

    .pro-shop-container .small-font {
        text-align: unset;
    }

    .couple-banner-container .couple-text .fast-join {
        padding: 17px 30px;
        margin-top: 2%;
    }

    .upper.main-layout .pro-shop-container {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .lower-box-wrapper .lower-box {
        flex-direction: row;
        margin-top: 20px !important;
        border-radius: 18px;
        border: 3px solid white;
        height: 268px;
    }

    .explanation-grid .explanation-title.example-title {
        grid-row: unset;
    }

    .explanation-grid .example > div {
        display: unset;
        width: unset;
        justify-content: unset;
        padding: unset;
    }

    .lower-box-wrapper .lower-box .text-container .small-font {
        padding-left: 0;
    }

    .lower-box-wrapper .lower-box .text-container .secondary-title {
        padding-bottom: 15px;
        padding-left: 13%;
    }

    .upper.main-layout .pro-shop-container .pro-shop-text {
        display: flex;
        flex-direction: column;
        align-items: normal;
        text-align: right;
        gap: 27px;
    }

    .couple-banner-container .couple-text .bigger-normal-font {
        padding: 2% 0 3% 19%;
        letter-spacing: 0.5;
        line-height: 1.35;
    }

    .lower.main-layout .htzone-card .card-description-text {
        display: flex;
        width: 63%;
        left: 11%;
        top: 20%;
        padding-top: 6%;
        padding-bottom: 6%;
        padding-right: 24%;
        padding-left: 6%;
        flex-direction: column;
        border-radius: 12px;
        font-size: 1rem;
    }

    .lower.main-layout .htzone-card .card-description-text > * {
        font-size: 1.0625rem;
        line-height: 1.14;
    }

    .lower.main-layout .htzone-card .card-description-text .bold > * {
        line-height: 1.24;
    }

    .htzone-card-text-container .card-description-text .bow {
        left: 40%;
        top: 5%;
        width: 35px;
        height: 35px;
    }

    .lower.main-layout .htzone-card .description {
        width: 437px;
    }

    .htzone-card-text-container .card-description-text .logo-circle {
        position: absolute;
        width: 95px;
        height: 95px;
        right: 87%;
    }

    .htzone-card-text-container .rectangle-text {
        padding: 2.5% 3% 2.5% 2%;
        width: 37%;
        bottom: 20%;
        right: 5px;
        border-radius: 12px;
        font-size: 1.0625rem;
    }

    .lower.main-layout .htzone-card .secondary-title {
        font-weight: bold;
        font-size: var(--title-font-size);
    }

    .benefits-container li .image-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin-left: 100%;
    }

    .pro-header-container {
        margin: 0 30px;
        padding-top: 41px;
    }

    .pro-header-container .hero-image-text-container .main-title {
        font-size: var(--title-font-size);
    }

    .hero-image-text-container {
        top: 106px;
    }

    .is-pro-container .is-pro-form .input-container {
        width: 100%;
        max-width: unset;
    }

    #pro_page_v2 .main-layout input,
    #pro_page_v2 .main-layout input::placeholder {
        padding: 10px 0 6px;
    }

    .sticky-text-container {
        top: 28%;
        left: 38%;
        flex-direction: row;
    }

    .sticky-text-container .quick-check {
        width: 8.8vw;
    }

    .upper.main-layout .benefits-comment {
        text-align: center;
        max-width: 68%;
        padding-left: 0;
        line-height: 20px;
    }

    .explanation-grid .how-does-it-work .icon-container {
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        padding: 0 9px;
    }

    .explanation-grid .how-does-it-work .revenue.colored-price {
        font-size: var(--extra-text-font-size);
    }

    .explanation-grid .revenue-comment {
        text-align: left;
        align-self: end;
        margin-top: unset;
    }

    .header-pro-logo {
        max-width: 134px;
        margin-bottom: 10px;
    }

    .couple-banner-container .couple-text .pro-logo {
        max-width: 99px;
        margin-bottom: 10px;
    }

    .benefits-container li > *:not(.image-container) {
        width: 95%;
    }

    .is-pro-container .is-pro-form .secondary-title {
        margin: 2% -55% 0 !important;
        flex-direction: row-reverse;
    }

    .example .huge-numbers > span {
        font-size: 30px;
    }

    .example .receive {
        margin-top: 9%;
    }

    .example .huge-numbers.colored-price {
        margin-top: 11%;
    }

    .is-pro-container .more-info {
        padding: 11px 13px;
    }

    .yours-hers .line {
        display: unset;
    }

    .is-pro-container .is-pro-form div:not(.input-container) {
        margin: 2% 0 0;
        font-size: 1.125rem;
    }

    .pro_popup_text.padding {
        padding: unset;
    }

    .explanation-grid .how-does-it-work .yours-hers h6 {
        justify-self: unset;
    }

    .main-layout .purple-button,
    .transparent-button {
        border-radius: 12px;
    }
    .benefits-container li.benefit-container .custom-text > * {
        margin-top: 5%;
        width: 107%;
        margin-bottom: 6%;
    }

    .joined-revenue .icon-container {
        margin: -12px;
    }
}

/* =========================================
   STICKY BAR (pure CSS, keeps sticky behavior)
   ========================================= */

/* 0) Hide old image-based bar if present */
.sticky-bar-wrapper .image-container,
.sticky-bar-wrapper .image-container img.sticky-bar-img {
    display: none !important;
}

/* 1) DO NOT change your sticky behavior. We purposely
      DO NOT override .sticky-bar-wrapper { position: sticky; bottom:0; }.
      We only normalize margins and visibility so the new bar fits cleanly. */
.sticky-bar-wrapper {
    margin-bottom: 0; /* avoid previous negative margins clipping the bulge */
    margin-top: 0;
    overflow: visible; /* bulge needs to overflow upward */
}

/* 2) The bar element itself with seamless gradient */
.sticky-bar {
    width: 100vw;
    position: relative;
    height: 48px; /* reduced height for sleeker look */
    background: linear-gradient(90deg, #3e266f 0%, #803ac6 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    overflow: visible; /* allow the bulge to show */
}

/* 3) Centered "bulge" with matching gradient colors */
.sticky-bar::after {
    content: "";
    position: absolute;
    top: -8px; /* smaller, more subtle bulge */
    left: 50%;
    transform: translateX(-50%);
    width: 140px; /* narrower bulge width */
    height: 8px; /* much smaller bulge height */
    /* Matching gradient colors for the notch */
    background: linear-gradient(90deg, #4c2a80 0%, #592e91 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    filter: drop-shadow(0 -1px 3px rgba(0, 0, 0, .3));
}

/* Enhanced browser support with oklab color space */
@supports (background: linear-gradient(in oklab, red, blue)) {
    .sticky-bar {
        background: linear-gradient(in oklab 90deg, #3e266f 0%, #803ac6 100%);
    }

    .sticky-bar::after {
        background: linear-gradient(in oklab 90deg, #4c2a80 0%, #592e91 100%);
    }
}

/* 4) Content layout (stop the old absolute positioning) */
.sticky-text-container {
    position: static !important;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 0 20px;
    color: #fff;
    text-align: right;
    font-weight: 700;
    justify-content: center;
}

/* 5) Button sits "on" the bulge, centered */
.sticky-text-container .quick-check {
    cursor: pointer;
    z-index: 90;
}

/* 6) Mobile (<900px): stack text, shrink bulge/button a touch */
@media (max-width: 899.98px) {
    .sticky-bar {
        height: 94px;
    }

    .sticky-bar::after {
        width: 180px;
        height: 6px;
        top: -6px;
        background-size: 100vw 50px; /* Adjust for mobile height (44px + 6px) */
    }

    .sticky-text-container {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 10px;
        padding: 12px 16px 36px;
    }

    .sticky-text-container .normal-font {
        font-size: 18px;
    }

    .sticky-text-container .quick-check {
        top: -24px;
        font-size: 13px;
        padding: 8px 12px;
        width: 23%;
    }
}

/* 7) Your mid breakpoint (900–1200px) */
@media only screen and (min-width: 900px) and (max-width: 1200px) {
    .sticky-bar {
        height: 100px;
    }
    .sticky-text-container {
        flex-direction: column-reverse;
    }

    .sticky-text-container button {
        padding: 8px 12px !important;
        width: 25% !important;
    }

    .sticky-bar::after {
        width: 360px;
    }
}

/* 8) Desktop (>=1200px) */
@media only screen and (min-width: 1200px) {
    .sticky-bar {
        height: 68px;
    }

    .sticky-bar::after {
        width: 164px;
        height: 12px;
        top: -12px;
        transform: translateX(-214px);
        background-size: 100vw 56px; /* Total height (48px + 8px) */
    }

    .sticky-text-container {
        gap: 32px;
        padding: 0 24px 23px;
    }

    .sticky-text-container .quick-check {
        top: -10px;
        font-size: 14px;
    }
}

#footer {
    margin-top: unset !important;
}