#gfield_instruction_7_12 {
    display: none;
}

.unit-selection p{
    font-size: 20px;
    color: #000000;
    margin-bottom: 0;
}

.unit-selection p.muted{
   color: #696969; 
}

.seperator{
    display: block;
    width: 100%;
    height: 1px;
    background-color: #AFAFBA;
}

.pricing-flow {
    margin-block: 100px 50px;
}

.pricing-calculator-header {
    text-align: center;
    margin-bottom: 50px;
}

.pricing-calculator-header.head-main h2 {
    text-transform: none;
}

.pricing-heading {
    text-align: center;
    margin-bottom: 40px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.pricing-grid + .pricing-grid{
    margin-top: 30px;
}

.billing-toggle {
    display: inline-flex;
    background: #FFF;
    border-radius: 30px;
    overflow: hidden;
    border: 2px solid #AFAFBA;
}

.billing-btn {
    flex: 1;
    min-width: 145px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: capitalize;
    color: #696969;
}

.billing-btn.active {
    background: linear-gradient(91.4deg, #040B20 14.47%, #1A2E66 105.9%);
    color: #FFFFFF;
    border-radius: 30px;
}

.billing-text {
    text-align: center;
}

.billing-text h5 {
    margin-bottom: 8px;
}

.billing-text p {
    margin: 0;
    font-size: 20px;
}

.managers-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(90deg, rgba(61, 169, 252, 0.05) 0%, rgba(255, 255, 255, 0.1) 51.44%, rgba(36, 101, 150, 0.05) 99.99%);
    border-radius: 10px;
    text-align: center;
}

.managers-box span {
    font-size: 20px;
}

.tier-labels {
    width: 100%;
    display: flex;
    font-size: 20px;
    line-height: 1.5;
}

.tier-labels>span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    text-align: center;
    font-size: clamp(11px, 1.5vw, 18px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--foreground);
    background: var(--bg);
    padding: 10px 14px;
}

.tier-labels>span:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.tier-labels>span:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.tier-labels>span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--bg);
}

.range-slider-ui {
    width: 100%;
    margin-top: 24px;
}

.range-slider-ui .range-slider {
    width: 100%;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Slider for Chrome / Edge / Safari */
.range-slider-ui .range-slider::-webkit-slider-runnable-track {
    height: 20px;
    background: #F2F2F7;
    border-radius: 99px;
}

.range-slider-ui .range-slider::-moz-range-track {
    height: 20px;
    background: #F2F2F7;
    border-radius: 99px;
}

/* Chrome / Safari / Edge */
.range-slider-ui .range-slider::-webkit-slider-thumb {
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #8BC34A;
    box-shadow: 2px 2px 17.6px 2px #000000A1 inset;
    margin-top: -14px;
    /* centers thumb on track */
}

/* Firefox */
.range-slider-ui .range-slider::-moz-range-thumb {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #8BC34A;
    box-shadow: 2px 2px 17.6px 2px #000000A1 inset;
}

.range-slider-ui .range-labels {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.pricing-right {
}

.glb-price {
    font-size: 42px;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.glb-price small {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
}

.glb-price p.muted{
    font-weight: 400;
}

.extra-price {
    font-size: 20px;
    line-height: 1.5;
    color: #696969;
    margin-top: 2px;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 9px 40px;
    background: #FFF;
    border-radius: 99px;
    font-size: 20px;
    line-height: 1.5;
    border: 1px solid var(--secondary-blue);
}

.billing-note {
    width: 100%;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--secondary-blue);
    padding-block: 24px;
    border-block: 1px solid #AFAFBA;
}

.features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.features li {
    font-size: 20px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.features li:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    position: static;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.2903%2024.2667C14.7319%2024.2667%2016.1594%2023.9827%2017.4913%2023.431C18.8232%2022.8793%2020.0334%2022.0707%2021.0527%2021.0513C22.0721%2020.032%2022.8807%2018.8218%2023.4324%2017.4899C23.9841%2016.158%2024.2681%2014.7305%2024.2681%2013.2889C24.2681%2011.8473%2023.9841%2010.4197%2023.4324%209.08786C22.8807%207.75598%2022.0721%206.54579%2021.0527%205.52641C20.0334%204.50703%2018.8232%203.69841%2017.4913%203.14673C16.1594%202.59504%2014.7319%202.3111%2013.2903%202.3111C10.3788%202.3111%207.58655%203.46768%205.52782%205.52641C3.46908%207.58515%202.3125%2010.3774%202.3125%2013.2889C2.3125%2016.2004%203.46908%2018.9926%205.52782%2021.0513C7.58655%2023.1101%2010.3788%2024.2667%2013.2903%2024.2667ZM13.0073%2017.7288L19.1061%2010.4103L17.2325%208.84897L11.9876%2015.1417L9.27363%2012.4265L7.5489%2014.1512L11.2082%2017.8105L12.1523%2018.7546L13.0073%2017.7288Z%22%20fill%3D%22%2384CC16%22%2F%3E%3C%2Fsvg%3E") !important;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 4px;
    flex-shrink: 0;
}

.features li strong{
    font-weight: 500;
}

.features li p{
    margin-bottom: 0;
}

.feat-title,
.feat-sub-title,
.desc-title,
p.feat-sub-title{
    margin-bottom: 12px;
}

.features + p{
    margin-top: 12px;
}

.pricing-note strong {
    font-weight: 600;
}

.pricing-calculator-footer .cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
}

.start-btn {
    background: #0b1b3f;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 30px;
    margin-right: 10px;
}

.checkout-btn {
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ccc;
    background: white;
}

.step {
    display: none;
    position: relative;
    z-index: 1;
}

.step.active {
    display: block;
}

.business-options {
    display: flex;
    gap: 50px;
    justify-content: center;
}

.business-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 30px;
    background: #FFF;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
}


.business-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 227px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 24px;
    background: rgba(61, 169, 252, 0.08);
    border-radius: 999px;
}

.business-card .icon-wrapper img {
    max-width: 110px;
    transition: all 0.3s ease-in-out;
}

.business-card .business-card-content {
    max-width: 578px;
}

.business-card .business-card-content h5 {
    margin-bottom: 12px;
}

.business-card-content p {
    font-size: 20px;
    margin-bottom: 0;
}

.business-card:hover {
    border-color: #1A2E66;
}

.business-card:hover .icon-wrapper img {
    transform: translateY(-10px);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: absolute;
    top: -50px;
    left: 0;
    color: #696969;
}

.unit-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 30px;
    border-radius: 30px;
    background-color: #FFF;
    border: 1px solid rgba(242, 242, 247, 1);
}

.unit-selection:not(.pricing-right){
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.05);
}

.price-unit-section{
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: space-between;
    gap: 20px;
}

.price-unit-section  .price-section-header {
    margin-bottom: 0;
    color: #282828;
}

.price-section .price-section-header {
    margin-bottom: 8px;
}

.unit-counter {
    height: 48px;
    display: flex;
    justify-content: center;
    font-size: 40px;
    line-height: 1.55;
    font-weight: 600;
}

.unit-counter #unit-count {
    min-width: 160px;
    text-align: center;
    border: 1px solid rgba(175, 175, 186, 1) !important;
    border-inline: 0;
    outline: none;
}

.unit-counter button {
    width: 80px;
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    color: #FFF;
    background: rgba(26, 46, 102, 1);
    border: 1px solid rgba(175, 175, 186, 1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.unit-counter button:hover {
    background: var(--secondary-blue);
}

.unit-counter button:active {
    transform: scale(0.98);
}

.unit-counter button.unit-minus {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.unit-counter button.unit-plus {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.unit-counter .jcf-number {
    height: auto;
    font-size: 24px;
    border: none !important;
}

.unit-counter .jcf-btn-inc,
.unit-counter .jcf-btn-dec {
    display: none;
}

.unit-note {
    max-width: 1024px;
    margin: 0 auto;
    background: linear-gradient(90deg, rgba(61, 169, 252, 0.05) 0%, rgba(255, 255, 255, 0.1) 51.44%, rgba(36, 101, 150, 0.05) 99.99%);
    padding: 30px 24px;
    border-radius: 12px;
    text-align: center;
}

.manager-cta {
    text-align: center;
    margin-top: 30px;
}

.pro-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pro-plan .price-per-unit {
    color: #696969;
    font-size: 20px;
    border-bottom: 1px solid #AFAFBA;
    max-width: 716px;
    width: 100%;
    padding-bottom: 12px;
    margin-block: 10px 12px;
}

.pro-plan .plan-note {
    font-size: 20px;
}

.standard-plan {
    display: flex;
    align-items: center;
    gap: 12px;
}

.standard-plan .standard-plan-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.standard-plan .standard-plan-title::before {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.8889%2033.7778C19.1068%2033.7778%2021.3029%2033.3409%2023.352%2032.4922C25.401%2031.6434%2027.2629%2030.3994%2028.8311%2028.8311C30.3994%2027.2629%2031.6434%2025.401%2032.4922%2023.352C33.3409%2021.3029%2033.7778%2019.1068%2033.7778%2016.8889C33.7778%2014.671%2033.3409%2012.4748%2032.4922%2010.4258C31.6434%208.37674%2030.3994%206.51492%2028.8311%204.94664C27.2629%203.37836%2025.401%202.13434%2023.352%201.28559C21.3029%200.436844%2019.1068%200%2016.8889%200C12.4097%206.67455e-08%208.11392%201.77936%204.94664%204.94664C1.77936%208.11392%200%2012.4097%200%2016.8889C0%2021.3681%201.77936%2025.6639%204.94664%2028.8311C8.11392%2031.9984%2012.4097%2033.7778%2016.8889%2033.7778ZM16.4535%2023.7195L25.8362%2012.4602L22.9539%2010.0583L14.8847%2019.7394L10.7094%2015.5622L8.056%2018.2156L13.6856%2023.8452L15.1381%2025.2977L16.4535%2023.7195Z%22%20fill%3D%22%2384CC16%22/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px;
    display: inline-block;
    flex-shrink: 0;
}


.standard-plan p {
    margin: 0;
    font-size: 20px;
    color: #000000;
}


.info-badge {
    padding: 12px 24px;
    border: 1px solid rgba(233, 168, 0, 1);
    background: rgba(233, 168, 0, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.info-badge .info-icon {
    flex-shrink: 0;
}

.info-badge p {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 0;
}


/* Pricing Accordion */

.pricing-flexbox{
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
}

.pricing-accordion{
    position: relative;
    flex: 1;
    width: 100%;
    padding: 20px 30px;
    border: 1px solid #F2F2F7;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.05);
    background-color: #FFF;
    border-radius: 24px;
}

.pricing-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.pricing-accordion-header .accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    flex-shrink: 0;
    background: rgba(139, 195, 74, 0.08);
}
.pricing-accordion-header .accordion-icon.blue {
    background: rgba(61, 169, 252, 0.08);
}

.accordion-header-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.accordion-header-content p{
    font-size: 20px;
    color: #000;
}

.accordion-header-content > *{
    margin-bottom: 0;
}
.pricing-accordion-header .accordion-arrow{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: transparent url("./arrow-dark-topward.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.open .pricing-accordion-header .accordion-arrow {
    transform: rotate(180deg);
    transition: all 0.3s ease-in-out;
}

.pricing-accordion-content{
    padding-top: 24px;
    display: none;
}

.pricing-accordion-content p{
   font-size: 20px;
   line-height: 1.4; 
   margin-bottom: 0;
   color: #000;
}

.pricing-accordion-content p + p{
    margin-top: 24px;
}


.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pricing-feature + .pricing-feature{
    margin-top: 20px;
}

.pricing-feature .feature-left{
    flex-shrink: 0;
    margin-top: 4px;
}

.feature-main{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-main-title{
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}
.feature-main-title .feature-main-tag{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 3px 15px;
    border: 1px solid rgba(26, 46, 102, 1);
    border-radius: 50px;
}

@media screen and (max-width: 1079px) {
    .pricing-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }
    
    .pricing-flexbox{
        gap: 24px;
        margin-top: 24px;
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {

    .unit-selection p{
        font-size: 16px;
    }
    .pricing-flow {
        margin-block: 50px 25px;
    }

    .business-options {
        flex-direction: column;
        gap: 32px;
    }

    .pricing-calculator-header {
        text-align: center;
        margin-bottom: 38px;
    }

    .business-card-content p {
        font-size: 16px;
    }

    .business-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .business-card .icon-wrapper {
        width: 150px;
    }

    .business-card .icon-wrapper img {
        max-width: 75px;
    }

    .managers-box span {
        font-size: 18px;
    }

    .tier-labels>span {
        padding: 8px;
    }

    .range-slider-ui .range-slider::-webkit-slider-runnable-track {
        height: 14px;
    }

    .range-slider-ui .range-slider::-moz-range-track {
        height: 14px;
    }

    .range-slider-ui .range-slider::-webkit-slider-thumb {
        width: 32px;
        height: 32px;
        margin-top: -10px;
    }

    .range-slider-ui .range-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
    }

    .range-slider-ui .range-labels {
        margin-top: 8px;
        font-size: 16px;
    }

    .plan-badge {
        padding: 8px 32px;
        font-size: 16px;
        line-height: 1.5;
    }

    .glb-price {
        font-size: 32px;
    }

    .glb-price small {
        font-size: 18px;
        line-height: 1.5;
    }

    .extra-price {
        font-size: 16px;
        line-height: 1.5;
    }

    .billing-note {
        padding-block: 16px;
        font-size: 16px;
    }

    .billing-text p {
        font-size: 16px;
    }

    .features {
        gap: 15px;
    }

    .features li {
        font-size: 16px;
        gap: 16px;
    }

    .back-link {
        top: -25px;
    }

    .pricing-container {
        padding-top: 20px;
    }

    .pricing-calculator-footer .cta-buttons {
        margin-top: 32px;
    }

    .unit-selection {
        gap: 20px;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .price-unit-section{
        flex-direction: column;
        text-align: center;
    }

    .unit-counter {
        font-size: 32px;
        line-height: 1.75;
    }

    .unit-counter button {
        width: 64px;
        font-size: 32px;
    }

    .unit-counter #unit-count {
        min-width: 120px;
    }

    .unit-note {
        padding: 24px 20px;
    }

    .pro-plan .price-per-unit,
    .pro-plan .plan-note {
        font-size: 16px;
    }

    .pro-plan .price-per-unit {
        margin-top: 4px;
    }

    .standard-plan p {
        font-size: 16px;
    }

    .standard-plan .standard-plan-title {
        line-height: 1.5;
    }

    .standard-plan .standard-plan-title::before {
        width: 28px;
        height: 28px;
        background-size: 28px;
        margin-top: 8px;
    }
    .info-badge{
        padding: 12px 16px;
    }

    .info-badge p{
        font-size: 16px;
    }

    .accordion-header-content p,
    .pricing-accordion-content p {
        font-size: 16px;
    }

    .pricing-accordion-content p + p {
        margin-top: 20px;
    }

    .pricing-accordion{
        padding: 80px 16px 20px;
    }

    .feature-main{
        font-size: 16px;
        gap: 8px;
    }

    .feature-main-title{
        flex-wrap: wrap;
        gap: 4px;
    }

    .pricing-accordion-header .accordion-icon{
        position: absolute;
        top: 18px;
    }
}