/* ==========================================================================
   1. Base Setup & Desktop Canvas Engine
   ========================================================================== */
body {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
    background: linear-gradient(180deg, #0e31a0, #8238ec 50%);
}

/*
 * NEW: Scale wrapper.
 * The desktop canvas below is built from fixed rem/absolute positions
 * calculated for a 1440px design. That only ever looked right at exactly
 * that width. Anything between the mobile breakpoint (48rem/768px) and
 * 1440px had nothing to reflow it, so text/images overlapped or ran off
 * screen when resizing (this is what you saw in the video).
 *
 * This wrapper scales the whole desktop canvas down as a single unit for
 * any width in that gap, using JS to compute the scale factor. Above
 * 1440px it behaves exactly as before (centered, no scale). Below 768px
 * it hands off untouched to the existing mobile layout.
 */
.canvas-scale-wrapper {
    width: 100%;
    overflow-x: hidden;
}

article {
    padding: 5rem 0rem;
}

.desktop-1 {
    width: 90rem;
    /* fixed 1440px design canvas */
    /* height: 345rem; */
    position: relative;
    /* background-color: #fff; */
    overflow-x: hidden;
    text-align: center;
    font-size: 1.125rem;
    color: #fff;
    font-family: Poppins, sans-serif;
        transform-origin: top left;
}

.logo-link,
.contact-btn-wrapper,
.cta-wrapper-1,
.cta-wrapper-2,
.cta-wrapper-3 {
    text-decoration: none;
}

/* --- Navbar Components --- */
.banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.desktop-1-item {
    position: absolute;
    top: 6.6175rem;
    left: 0;
    background: linear-gradient(180deg, #0e31a0, #8238ec 60%);
    width: 100%;
    height: 283.98125rem;
    z-index: 1;
}

.image-2-icon {
    position: absolute;
    top: 43rem;
    left: 0;
    width: 100%;
    object-fit: fill;
    z-index: 2;
}

/* --- Hero Layout --- */
.providing-a-better-container {
    position: absolute;
    top: 15.38375rem;
    left: 8.37375rem;
    font-size: 2.8125rem;
    line-height: 3.5625rem;
    display: inline-block;
    text-align: left;
    width: 47.2875rem;
    height: 17.73125rem;
    z-index: 3;
}

.claritys-innovative-computer {
    position: absolute;
    top: 28.958125rem;
    left: 8.37375rem;
    font-size: 1rem;
    line-height: 1.9375rem;
        text-align: left;
        display: inline-block;
        width: 37.15625rem;
        height: 17.73125rem;
        z-index: 3;
}

.image-1-icon {
    position: absolute;
    top: 12.785625rem;
    left: 47.583125rem;
    width: 40.2875rem;
    height: 36.21875rem;
    object-fit: cover;
    z-index: 3;
}

.desktop-1-inner {
    position: absolute;
    top: 66.155rem;
    left: 37.176875rem;
    border-radius: 5.625rem;
    background-color: #b3e4bd;
    color: #0a132e;
    width: 15.64375rem;
    height: 3.4rem;
    z-index: 4;
    text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
}

.desktop-1-inner:hover,
.desktop-1-inner:focus {
    background-color: #8238EC !important;
    color: #fff !important;
}

/* --- Value Prop Layout --- */
.unlock-the-value {
    position: absolute;
    top: 49.005625rem;
    left: 21.3575rem;
    font-size: 2.8125rem;
    line-height: 3.5625rem;
    display: inline-block;
    color: #0a132e;
    width: 47.2875rem;
    height: 7.75rem;
    z-index: 3;
}

.engage-was-designed {
    position: absolute;
    top: 58.01375rem;
    left: 16.920625rem;
    font-size: 1rem;
    line-height: 1.9375rem;
    color: #0a132e;
    display: inline-block;
    width: 56.15625rem;
    height: 9.15rem;
    z-index: 3;
}

.image-3-icon {
    position: absolute;
    top: 76.896875rem;
    left: 12.51375rem;
    width: 66.0375rem;
    height: 36.125rem;
    object-fit: cover;
    border-radius: 50px;
    z-index: 4;
}

.timeslot-figma-file {
    position: absolute;
    top: 28.075625rem;
    left: -62.554375rem;
    font-size: 1.75rem;
    line-height: 1.9375rem;
    text-align: left;
    display: inline-block;
    width: 47.2875rem;
    height: 17.73125rem;
    z-index: 3;
}

/* --- Companion Layout --- */
.wave-background-holder {
    position: absolute;
    top: 97.460625rem;
    left: -4.925625rem;
    width: 99.85rem;
    height: 99.85rem;
    z-index: 2;
}

.image-4-wave-icon {
    position: absolute;
    top: 10rem;
        left: 10rem;
        width: 80%;
        height: 80%;
    object-fit: contain;
    z-index: 1;
}

.image-4-icon {
    position: absolute;
    top: 43rem;
    left: 0;
    width: 100%;
    object-fit: fill;
    z-index: 2;
}

.image-5-icon {
    position: absolute;
    top: 111.401875rem;
    left: -8.335rem;
    width: 106.66875rem;
    height: 71.04375rem;
    object-fit: contain;
    z-index: 4;
}

.engage-is-more-container {
    position: absolute;
    top: 185.0025rem;
    left: 16.920625rem;
    font-size: 2.8125rem;
    line-height: 3.5625rem;
    display: inline-block;
    width: 56.15625rem;
    height: 7.75rem;
    z-index: 4;
}

.engage-strengthens-the {
    position: absolute;
    top: 194.186875rem;
    left: 15.315625rem;
    font-size: 1rem;
    line-height: 1.9375rem;
    display: inline-block;
    width: 59.36875rem;
    height: 9.15rem;
    z-index: 4;
}

/* --- Brand Content Grid --- */
.partners-logos-container {
    position: absolute;
    top: 207.466875rem;
    left: 50%;
    transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: max-content;
    height: 9.53125rem;
    z-index: 4;
}

.partner-logo-slot {
    position: relative;
    flex: 0 0 9.53125rem;
    width: 9.53125rem;
    height: 9.53125rem;
    z-index: 4;
}

.partner-logo-slot+.partner-logo-slot {
    margin-left: -0.9rem;
}

.partner-logo-slot:nth-child(1) {
    z-index: 1;
}

.partner-logo-slot:nth-child(2) {
    z-index: 2;
}

.partner-logo-slot:nth-child(3) {
    z-index: 3;
}

.partner-logo-slot:nth-child(4) {
    z-index: 4;
}

.partner-logo-slot:nth-child(5) {
    z-index: 5;
}

.partner-logo-slot:nth-child(6) {
    z-index: 6;
}

.partner-logo-slot:nth-child(7) {
    z-index: 7;
}

.partner-logo-slot:nth-child(8) {
    z-index: 8;
}

.partner-logo-link {
    display: block;
    width: 100%;
    height: 100%;
}

.partner-logo-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8e9ec;
    border: 0.5rem solid #fff;
    box-sizing: border-box;
}

.partner-logo-image {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.join-our-incredible {
    position: absolute;
    top: 222.30625rem;
    left: 12.6575rem;
    font-size: 2.8125rem;
    line-height: 3.5625rem;
    display: inline-block;
    color: #0a132e;
    width: 64.6875rem;
    height: 7.75rem;
    z-index: 4;
}

.weve-partnered-with {
    position: absolute;
    top: 231.314375rem;
    left: 16.920625rem;
    font-size: 1rem;
    line-height: 1.9375rem;
    color: #0a132e;
    display: inline-block;
    width: 56.15625rem;
    height: 9.15rem;
    z-index: 4;
}

.rectangle-div,
.rectangle-div-partner {
    position: absolute;
    top: 241.84rem;
    left: 37.176875rem;
    border-radius: 5.625rem;
    background-color: #b3e4bd;
    color: #0a132e;
    width: 15.64375rem;
    height: 3.4rem;
    z-index: 4;
    text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
}

.rectangle-div:hover,
.rectangle-div:focus,
.rectangle-div-partner:hover,
.rectangle-div-partner:focus {
    background-color: #8238EC !important;
    color: #fff !important;
}

/* --- Testimonials --- */
.b {
    width: 100px !important;
        height: 100px !important;
        justify-self: center;
        margin-bottom: 3rem;
}

.engage-makes-it {
    position: absolute;
    top: 265.006875rem;
    left: 8.345rem;
    font-size: 2.8125rem;
    line-height: 3.5625rem;
    font-weight: 300;
    display: inline-block;
    width: 73.3125rem;
    height: 7.70625rem;
    z-index: 4;
}

.betsy-weber-lmhc-container {
    position: absolute;
    top: 278.291875rem;
    left: 35.40625rem;
    font-size: 1rem;
    line-height: 1.9375rem;
    display: inline-block;
    width: 19.1875rem;
    height: 9.15rem;
    color: #b3e4bd;
    z-index: 4;
}

.betsy-weber-lmhc {
    line-height: 1.9375rem;
}

.chief-clinical-officer-ocala {
    color: #fff;
    line-height: 1.9375rem;
}

.section-testimonial {
    position: absolute;
    top: 285rem;
    /* left: 0;
    width: 100%;
    height: 31.5rem;
        */
    z-index: 4;
}

.compliance-content {
    text-align: left;
}

.testimonials-stack {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

.testimonial-item {
    position: relative;
    padding: 1.5rem;
    /* margin-bottom: 5rem; */
}

.section-testimonial .b,
.section-testimonial .engage-makes-it,
.section-testimonial .betsy-weber-lmhc-container {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
}

.section-testimonial .b {
    line-height: 0.3;
}

.section-testimonial .engage-makes-it {
    margin-bottom: 2.5rem;
}

/* --- Footer Elements --- */
.banner2 {
    position: absolute;
    top: 289.73625rem;
    left: 0;
    z-index: 5;
}

.better-business {
    color: #b3e4bd;
}

.image-2-icon {
    object-fit: cover;
    object-position: center top;
}

.image-4-icon {
    object-fit: contain;
    object-position: center;
}

@media (max-width: 48rem) {
    .section-hero {
        overflow: hidden;
    }

        .image-2-icon {
            position: absolute !important;
            left: 50% !important;
            bottom: -0.0625rem !important;
            top: auto !important;
            transform: translateX(-50%) !important;
            width: 120% !important;
            height: auto !important;
            min-height: 16rem !important;
            max-width: none !important;
            object-fit: cover !important;
            object-position: center top !important;
            z-index: 0 !important;
            pointer-events: none;
        }

        .section-companion {
            overflow: hidden;
        }

        .wave-background-holder {
            width: 100% !important;
            max-width: 100vw !important;
            height: auto !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
        }

        .image-4-icon {
            width: 100% !important;
            height: auto !important;
            min-height: 18rem !important;
            object-fit: cover !important;
            object-position: center bottom !important;
        }

}



/* ==========================================================================
   Compliance Section
   ========================================================================== */
.section-compliance {
    width: 100%;
    padding: 6rem 1.5rem 0rem 1.5rem;
    z-index: 4 !important;
    top: 252rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    position: relative;
}

.compliance-container {
    max-width: 75rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.compliance-badge-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.compliance-badge-circles {
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.compliance-badge-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.compliance-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
}

.compliance-description {
    font-size: 1rem;
    line-height: 1.9375rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.compliance-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.compliance-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}


.compliance-list strong {
    display: block;
    font-size: 1.05rem;
    color: #ffffff;
}

.compliance-list p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.compliance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2.5rem;
    border-radius: 5.625rem;
    background-color: #b3e4bd;
    color: #0a132e;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.compliance-btn:hover,
.compliance-btn:focus {
    background-color: #ffffff;
    color: #8238ec;
}

.compliance-list li {
    display: flex;
    /* align-items: flex-start ensures the bullet stays aligned with the FIRST line of text */
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
}

.compliance-list li::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    /* FIX 1: Adjust path to go up to public directory (e.g. ../images/...) */
    background-image: url("/assets/images/compliance/svg/list.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    /* FIX 2: Slight top margin to align vertically with the strong title text */
    margin-top: 3px;
}