/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    position: relative;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Utility classes for responsive design */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

#background-star {
    position: absolute;
    width: 100%;
    max-width: 824.954px; /* width: 824.9536743164062px */
    height: auto;
    aspect-ratio: 1/1; /* Maintain the square shape */
    top: 0; /* Always keep top at 0 */
    z-index: -1; /* Ensure it's behind the logo and other content */
}

#logo {
    position: absolute;
    width: 141.877px; /* width: 141.876953125; */
    height: 16px;    /* height: 16.00020408630371; */
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

#desktop-logo {
    position: absolute;
    width: 164.11px;
    height: 16px;
    left: calc(50% - 164.11px/2 - 437.95px);
    top: 172px;
    z-index: 1;
}

#product-image {
    width: 100%;
    max-width: 310px; /* width: 250.30862460680964px */
    height: auto; /* Allow height to scale proportionally */
    max-height: 544px; /* height: 521.0939457092308px */
    display: block; /* Ensures margin auto works for centering if not a flex item */
    margin-left: auto;
    margin-right: auto;
}

.heading-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* Keep text centered */
    gap: 25px; /* Reduced gap, aiming for roughly half of the original visual space */
}

.main-heading {
    width: 100%;
    max-width: 366px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #1A231E;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* Remove default bottom margin */
}

.sub-heading {
    width: 100%;
    max-width: 366px;
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0; /* Remove default top margin */
}

.content-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 40px;
    padding: 0 32px;
    box-sizing: border-box;
}

.cta-button {
    width: 100%;
    max-width: 366px;
    height: 56px;
    background-color: #0460EF;
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 16px 10px;
    color: #FFFFFF;
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    display: block; /* To allow margin auto for centering */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    box-shadow: 0px 4px 0px 0px #000000; /* Added drop shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

.cta-button:hover {
    background-color: #0352D2; /* Slightly darker blue */
    box-shadow: 0px 2px 0px 0px #000000; /* Shadow appears smaller, like button is pressed */
}

.mental-health-impact-section {
    width: 100%;
    margin-top: -50px; /* Reduce gap from 100px to 50px */
    position: relative; /* Ensure proper stacking context with negative margin */
    line-height: 0; /* Collapse line box to prevent gap around SVG */
    font-size: 0; /* Further attempt to collapse any space from whitespace nodes */
    overflow: hidden; /* Add this to prevent horizontal overflow */
    /* Any specific background or padding for the section itself will go here */
}

.section-wave-top {
    display: block; 
    width: 100%;
    height: 30px; /* Match SVG height attribute for consistency */
    vertical-align: bottom; /* Ensure it aligns to the bottom of its line, if any space remains */
}

.section-wave-bottom {
    display: block; 
    width: 100%;
    height: 31px; /* Match SVG height attribute for consistency */
    vertical-align: top; /* Ensure it aligns properly */
    margin-top: -4px; /* Increased negative margin to completely eliminate the gap */
    line-height: 0; /* Prevent any line height issues */
    font-size: 0; /* Prevent any font size issues */
}

.mental-health-content-wrapper {
    padding-top: 40px;
    padding-left: 0; /* Remove left padding */
    padding-right: 0; /* Remove right padding */
    padding-bottom: 40px; /* Add bottom padding to ensure content is fully visible */
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    background-color: #AEF876;
    line-height: initial;
    font-size: initial;
    margin-top: -4px; /* Increased negative margin to completely eliminate the gap */
    overflow: hidden; /* Add this to prevent horizontal overflow */
}

.mental-health-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2; /* From Figma data style_WP6JJG (1.2em) */
    letter-spacing: 0%;
    text-align: center;
    color: #1A231E;
    max-width: 366px;
    width: 100%; /* Take full width up to max-width */
}

/* Mobile-first approach */
.landing-container {
    width: 100%;
    max-width: 430px;
    height: auto; /* Change from fixed height to auto */
    min-height: 100vh; /* Changed from a fixed pixel value to ensure full viewport coverage */
    margin: 0 auto;
    padding-top: 170px; /* Keep top padding */
    padding-bottom: 0; /* Keep bottom padding */
    display: flex;
    flex-direction: column;
    gap: 100px;
    box-sizing: border-box;
    overflow-x: hidden; /* Explicitly prevent horizontal overflow */
}

/* Responsive adjustments for larger screens */
@media screen and (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    body {
        background-color: black;
        overflow-y: auto;
    }
    
    .desktop-only {
        display: block;
        width: 100%;
        min-height: 100vh;
        height: auto;
        position: relative;
        overflow-x: hidden;
    }
    
    /* Container for positioning relative to max-width */
    .desktop-content-container {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: 6111px;
        max-width: 1440px;
        margin: 0 auto;
        background-color: white;
    }
    
    #desktop-star {
        position: absolute;
        width: 1000px;
        height: 1000px;
        right: 0px;
        top: -200px;
        z-index: 0;
    }
    
    .desktop-feature-item-ec { /* Based on Frame 1437252940 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 70px; /* Consistent with .desktop-feature-item */
        width: 900px;
        height: 621.63px;
        border-radius: 0px;
        flex: none;
        order: 0;
        flex-grow: 0;
        margin: 0;
    }
    
    .desktop-new-frame-section {
        position: absolute;
        width: 100%;
        left: 0;
        top: 3934px; /* Positioned after the 'desktop-how-section' with a 100px gap */
        z-index: 1;
        display: flex; /* To center image if needed, or manage image scaling */
        justify-content: center;
        align-items: center;
        background-color: white;
    }
    
    #desktop-new-frame-image {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensures the entire SVG is visible and maintains aspect ratio */
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }

    #desktop-logo {
        position: absolute;
        width: 164.11px;
        height: 16px;
        left: 164px; /* Fixed position from left edge of container */
        top: 172px;
        z-index: 1;
    }
    
    #desktop-app-image {
        height: 650px;
        position: absolute;
        right: 200px;
        top: 100px;
        z-index: 1;
    }
    
    .desktop-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 50px;
        width: 355.93px;
        height: 367px;
        position: absolute;
        left: 164px;
        top: 220px;
        z-index: 1;
    }
    
    .desktop-heading-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 27px;
        width: 355.93px;
        height: 261px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }
    
    .desktop-heading {
        width: 355.93px;
        height: 174px;
        font-family: 'Syne';
        font-style: normal;
        font-weight: 700;
        font-size: 48px;
        line-height: 58px;
        color: #1A231E;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }
    
    .desktop-subheading {
        width: 355.93px;
        height: 60px;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 150%;
        color: #000000;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }
    
    .desktop-cta-button {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px 10px;
        gap: 10px;
        width: 355.93px;
        height: 56px;
        background: #0460EF;
        border: 2px solid #000000;
        box-shadow: 0px 4px 0px #000000;
        border-radius: 8px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .desktop-cta-button:hover {
        background-color: #0352D2;
        box-shadow: 0px 2px 0px 0px #000000;
    }
    
    .desktop-cta-text {
        width: 144px;
        height: 24px;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        color: #FFFFFF;
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    .desktop-stats-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        width: 1440px;
        height: 878px;
        position: absolute;
        left: 0;
        top: 850px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        z-index: 1;
        background-color: white; /* Ensure white background for this section */
    }
    
    #desktop-stats-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    /* Hide all other elements in desktop view */
    body > *:not(.desktop-only) {
        display: none;
    }
    
    .landing-container {
        max-width: 1200px;
        padding-top: 70px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .content-group {
        align-items: flex-start;
        padding: 60px 0 0 0;
    }
    
    .heading-block {
        align-items: flex-start;
    }
    
    .main-heading, .sub-heading {
        text-align: left;
        max-width: 450px;
    }
    
    .cta-button {
        margin-left: 0;
    }
    
    .mental-health-impact-section {
        grid-column: 1 / -1;
        margin-top: 80px;
    }
    
    .mental-health-content-wrapper {
        padding: 60px 40px;
    }
    
    .mental-health-title {
        max-width: 800px;
        font-size: 42px;
    }
    
    .cards-scroll-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        overflow: visible;
        padding: 0;
    }
    
    .card {
        width: 100%;
        min-width: auto;
    }
    
    .cards-scroll-container .card:first-child,
    .cards-scroll-container .card:last-child {
        margin: 0;
    }
    
    .features-section {
        grid-column: 1 / -1;
        padding: 80px 40px;
        margin-top: 0;
    }
    
    .features-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        padding: 40px 0;
    }
    
    .feature-item {
        gap: 40px;
    }
    
    .manager-insights-section {
        grid-column: 1 / -1;
        padding: 80px 40px;
    }
    
    .insights-title {
        max-width: 800px;
        font-size: 42px;
    }
    
    .insights-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
        gap: 30px;
    }
    
    .insight-card {
        max-width: 100%;
    }
    
    .pricing-section {
        grid-column: 1 / -1;
        max-width: 1200px;
        margin-top: 0;
        padding: 80px 40px;
    }
    
    .pricing-title {
        max-width: 800px;
        font-size: 42px;
    }
    
    .pricing-card {
        max-width: 600px;
    }
    
    .bottom-section {
        grid-column: 1 / -1;
        max-width: 100%;
    }
    
    #product-image {
        max-width: 450px;
        margin-top: 100px;
        justify-self: end;
    }
    
    #background-star {
        max-width: 1200px;
        top: -200px;
        left: -300px;
    }
    
    .desktop-how-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        width: 100%;
        left: 0;
        top: 1800px;
        padding: 0;
        z-index: 1;
        background-color: white; /* Ensure white background for this section */
    }
    
    .desktop-how-heading {
        width: 278px;
        height: 29px;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        line-height: 29px;
        text-align: center;
        color: #000000;
        flex: none;
        flex-grow: 0;
        order: 0;
    }
    
    .desktop-features-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 90px 270px;
        gap: 10px;
        width: 1440px;
        height: 621.63px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
    
    .desktop-feature-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 70px;
        width: 900px;
        height: 621.63px;
        border-radius: 0px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }
    
    .desktop-feature-image-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 30px;
        gap: 10px;
        width: 415px;
        height: 621.63px;
        flex: none;
        order: 0;
        flex-grow: 1;
        position: relative;
    }
    
    .desktop-feature-image {
        height: 624px;
        transform: matrix(1, 0, -0.09, 1, 0, 0);
    }
    
    .desktop-feature-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 24px;
        width: 415px;
        height: 234px;
        flex: none;
        order: 1;
        flex-grow: 1;
    }
    
    .desktop-feature-tag {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        gap: 10px;
        width: 105px;
        height: 23px;
        background: #F57800;
        border-radius: 8px;
        flex: none;
        order: 0;
        flex-grow: 0;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 150%;
        color: #FFFFFF;
    }
    
    .desktop-feature-heading {
        width: 415px;
        height: 43px;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 43px;
        color: #1A231E;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }
    
    .desktop-feature-description {
        width: 415px;
        height: 120px;
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 150%;
        color: #000000;
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }

    .desktop-features-container-pa {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 270px; /* Horizontal padding, 0 vertical, as per Frame 1437252946 */
        width: 1440px; /* As per Frame 1437252946 */
        height: auto; /* Allow content to define height, overriding Frame 1437252946's 518.02px if content is taller */
        margin-top: 70px; /* To create space from the previous feature container */
        order: 2; /* To ensure it appears after the existing features container (assumed order 1) */
        /* align-self: stretch; from Frame 1437252946, but desktop-how-section uses align-items: center */
        /* flex: none; flex-grow: 0; are defaults for flex items in this context */
    }

    .desktop-feature-item-pa { /* Based on Frame 1437252940 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 70px;
        width: 900px;
        height: 621.63px; /* As per Frame 1437252940 */
        border-radius: 0px;
        /* flex: none; order: 0; align-self: stretch; flex-grow: 0; are defaults or managed by parent */
    }

    .desktop-feature-content-pa { /* Based on Frame 1437252939 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 24px;
        width: 415px;
        height: auto; /* Original spec 204px, but auto is safer for varying text */
        flex-grow: 1; /* As per Frame 1437252939 */
        order: 0; /* Text on the left, as per Frame 1437252939 */
    }

    .desktop-feature-tag-pa { /* Based on Frame 1437252959 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 6px;
        gap: 7.5px;
        /* width: 96px; from spec, but auto width is better */
        height: 23px;
        background: #737AF9;
        border-radius: 6px;
        /* text styles directly applied */
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 150%; /* or 22px */
        color: #FFFFFF;
        /* order: 0; flex-grow: 0; are defaults */
    }

    .desktop-feature-heading-pa { /* Based on "Personal Assistant" text style */
        width: 415px; /* Or align-self: stretch on parent */
        /* height: 43px; from spec, but auto is safer */
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 43px;
        color: #1A231E;
        margin: 0;
        order: 1; /* As per spec (after tag) */
        align-self: stretch; /* As per spec */
    }

    .desktop-feature-description-pa { /* Based on description text style */
        width: 415px; /* Or align-self: stretch on parent */
        /* height: 90px; from spec, but auto is safer */
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 150%; /* or 30px */
        color: #000000;
        margin: 0;
        order: 2; /* As per spec (after heading) */
        align-self: stretch; /* As per spec */
    }

    .desktop-feature-image-wrapper-pa { /* Based on Frame 1437252954 */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 40px; /* Original spec had 0px 40px */
        width: 415px;
        height: 621.63px; /* Matches item height */
        flex-grow: 1; /* As per spec */
        order: 1; /* Image on the right, as per spec */
        box-sizing: border-box;
    }

    .desktop-feature-image-pa { /* Based on "image" style */
        height: 624px;
        transform: matrix(1, 0, -0.09, 1, 0, 0);
    }

    /* New feature container for "Emotionally Companion" */
    .desktop-features-container-ec { /* Based on Frame 1437252938 */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 270px; /* Different from existing .desktop-features-container's 90px top/bottom padding */
        gap: 10px;
        width: 1440px;
        height: 621.63px;
        flex: none;
        order: 2; /* To appear after the first features container */
        align-self: stretch;
        flex-grow: 0;
    }

    .desktop-feature-item-ec { /* Based on Frame 1437252940 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 70px; /* Consistent with .desktop-feature-item */
        width: 900px;
        height: 621.63px;
        border-radius: 0px;
        flex: none;
        order: 0;
        flex-grow: 1; 
    }

    .desktop-feature-image-wrapper-ec { /* Based on Frame 1437252953 (container part) */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 40px; /* Different from existing .desktop-feature-image-wrapper's 30px horizontal padding */
        gap: 10px;
        width: 415px;
        height: 621.63px;
        flex: none;
        order: 0; /* Image on the left */
        flex-grow: 1; /* As per spec */
        position: relative; /* If needed for child positioning, though not specified */
    }

    .desktop-feature-image-ec { /* Based on Frame 1437252953 (image part) */
        height: 624px;
        transform: matrix(1, 0, -0.09, 1, 0, 0); /* Consistent with .desktop-feature-image */
        /* Flex properties for the image element itself if its parent is flex */
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .desktop-feature-content-ec { /* Based on Frame 1437252939 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 24px; /* Consistent with .desktop-feature-content */
        width: 415px;
        height: 294px; /* Specific height based on content */
        flex: none;
        order: 1; /* Text on the right */
        flex-grow: 1; /* As per spec */
    }

    .desktop-feature-tag-ec { /* Based on Frame 1437252959 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        gap: 10px;
        width: 119px;
        height: 23px;
        background: #F60080; /* Specific background for "EMOTIONALLY" */
        border-radius: 8px;
        /* Text styles */
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 150%; /* or 22px */
        color: #FFFFFF;
        /* Flex item properties */
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .desktop-feature-description-ec { /* Based on new description spec */
        width: 415px;
        height: 180px; /* Specific height for this description */
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 150%; /* or 30px */
        color: #000000;
        /* Flex item properties */
        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
        margin: 0;
    }

    /* New Section: Brighter Future - Based on Frames 1437252940 and subsequent */
    /* Placed after desktop-new-frame-section, adjust 'top' as needed */
    .desktop-brighter-future-section {
        position: absolute;
        left: 0;
        top: 5300px; /* Estimated position; adjust based on actual preceding content height */
        width: 100%; /* Spans parent (max-width: 1440px) */
        height: 550px; /* As per spec */
        box-sizing: border-box;
        
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 32px 230px 0px; /* As per spec */
        gap: 75px; /* As per spec */
        
        z-index: 1; /* Consistent with other sections */
        /* background-color: white; */ /* Assuming white or transparent to show parent bg */
    }

    .desktop-brighter-future-text-container { /* Frame 1437252941 */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* As per spec */
        align-items: flex-end;   /* As per spec */
        padding: 0px;
        gap: 38px; /* As per spec */

        width: 376px; /* As per spec */
        height: 123px; /* As per spec */
    }

    .desktop-brighter-future-title { /* "Brighter Future awaits" text */
        width: 376px; /* As per spec */
        /* height: 43px; Let height be auto for text */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 36px;
        line-height: 43px; /* As per spec */
        text-align: center; /* As per spec */
        color: #1A231E; /* As per spec */
    }

    .desktop-brighter-future-description { /* "Collaborate on personalized..." text */
        width: 376px; /* As per spec */
        /* height: 42px; Let height be auto for text */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%; /* or 21px, as per spec */
        /* text-align: center; implicitly from parent or can be added if needed */
        color: #000000; /* As per spec */
    }

    .desktop-brighter-future-card { /* Frame 1437252939 */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center; /* As per spec */
        padding: 40px; /* As per spec */
        gap: 39px; /* As per spec */

        width: 420px; /* As per spec */
        height: 518px; /* As per spec */

        background: #F8F4F1; /* As per spec */
        border-radius: 8px; /* As per spec */
    }

    .desktop-brighter-future-card-content { /* Frame 1437252933, using align-items from 1437252932 */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* From Frame 1437252932 */
        padding: 0px;
        gap: 32px; /* As per spec (Frame 1437252933/32) */

        width: 340px; /* As per spec */
        /* height: 343px; Let height be auto based on content */
    }

    .desktop-bf-limited-offer-tag { /* Frame 1437252960 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 8px; /* As per spec */
        gap: 10px; /* As per spec */

        width: 100px; /* As per spec */
        height: 22px; /* As per spec */

        background: #FF7D00; /* As per spec */
        border-radius: 8px; /* As per spec */
    }

    .desktop-bf-limited-offer-text { /* "LIMITED OFFER" text style */
        /* width: 84px; height: 14px; (dimensions from spec, text will fit) */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 12px;
        line-height: 14px; /* As per spec */
        color: #FFFFFF; /* As per spec */
    }

    .desktop-bf-price-container { /* Frame 1437252961 */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px; /* As per spec */
        width: 340px; /* As per spec, alternatively use align-self: stretch on children if parent is fixed width */
        /* height: 48px; Let height be auto */
    }

    .desktop-bf-price-main { /* "FREE" text style */
        /* width: 88px; height: 48px; (dimensions from spec, text will fit) */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 40px;
        line-height: 48px; /* As per spec */
        color: #1A231E; /* As per spec */
    }

    .desktop-bf-price-details-wrapper { /* Frame 1437252967 */
        display: flex; /* Not strictly needed for single text child unless for alignment/spacing policies */
        /* width: 340px; (let text define width or parent control) */
        /* height: 21px; (auto height) */
    }
    
    .desktop-bf-price-details-text { /* "Only $5 / Active user / Month" text style */
        /* width: 178px; (auto width better for i18n) */
        /* height: 21px; (auto height) */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%; /* or 21px, as per spec */
        color: #000000; /* As per spec */
    }

    .desktop-bf-features-list { /* Frame 1437252966 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 24px; /* As per spec (gap between feature items) */
        width: 340px; /* As per spec */
        /* height: 156px; Let height be auto */
    }

    .desktop-bf-feature-item { /* Common for Frames 1437252965, 63, 62, 64 */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px; /* As per spec */
        width: 100%; /* To take width of parent list */
        /* height: 21px; (auto height) */
    }

    .desktop-bf-feature-icon-placeholder { /* "faCircleCheck" / "faCancel" placeholder based on "Vector" style */
        width: 20px; /* As per spec */
        height: 20px; /* As per spec */
        background: #000000; /* As per "Vector" spec */
        /* Using border-radius to make it a circle, assuming checkmark is a circle, cancel might be different */
        /* For simplicity, using a common style. Actual icons would be SVGs or font icons */
        border-radius: 50%; 
    }

    .desktop-bf-feature-item-text { /* Text next to icon */
        /* width: 312px; (use flex-grow: 1 instead) */
        /* height: 21px; (auto height) */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%; /* or 21px, as per spec */
        color: #000000; /* As per spec */
        flex-grow: 1; /* To fill available space */
    }

    .desktop-bf-cta-button { /* Frame 1437252928 */
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px 10px; /* As per spec */
        gap: 10px; /* As per spec */

        width: 340px; /* As per spec */
        height: 56px; /* As per spec */

        background: #0460EF; /* As per spec */
        border: 2px solid #000000; /* As per spec */
        box-shadow: 0px 4px 0px #000000; /* As per spec */
        border-radius: 8px; /* As per spec */
        
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .desktop-bf-cta-button:hover {
        background-color: #0352D2;
        box-shadow: 0px 2px 0px 0px #000000;
    }

    .desktop-bf-cta-text { /* "Join Now for FREE" text style */
        /* width: 161px; height: 24px; (dimensions from spec, text will fit) */
        font-family: 'Urbanist', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px; /* As per spec */
        text-align: center; /* As per spec */
        color: #FFFFFF; /* As per spec */
    }
desktop-user-frame-1437252945-section
    .desktop-brighter-future-section {
        text-align: center; /* As per spec */
        color: #FFFFFF; /* As per spec */
    }

    /* Frame 1437252945 - User Task: Add last section for desktop */
    .desktop-user-frame-1437252945-section {
        position: absolute;
        left: 0;
        top: 6000px; /* Positioned after desktop-brighter-future-section (top 5300px + height 550px) */
        width: 100%; /* Spans the 1440px max-width of its parent desktop-content-container */
        
        /* User-provided styles for the section's internal layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligns children (the image) to the start (left) */
        padding: 0px;
        
        z-index: 1; /* Consistent with other content sections */
        /* Note: The user spec included 'width: 1440px;' for the section.
           This is effectively achieved by 'width: 100%;' within the 'max-width: 1440px' centered parent.
           Properties like 'flex: none; order: 6; align-self: stretch; flex-grow: 0;'
           from the user spec relate to behavior as a flex item. Since 'desktop-content-container'
           does not use flexbox to lay out its main sections, these are not directly applied here.
           The 'order: 6' can be interpreted as its logical sequence, which is maintained. */
    }

    #desktop-user-frame-1437252945-image {
        width: 100%; /* Make the SVG image span the full width of the section */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Removes potential extra space below the image if it were inline */
    }
}

/* Cards carousel section */
.cards-scroll-container {
    position: relative;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 24px;
    width: 100%; /* Changed to 100% to avoid overflow */
    padding: 0 32px 20px 32px; /* Even padding on both sides */
    box-sizing: border-box;
    margin-left: 0; /* Reset margin to prevent overflow */
    /* Remove mandatory snap scrolling */
    scroll-snap-type: none;
    /* Add smooth scrolling for better feel */
    scroll-behavior: smooth;
    /* Enhanced momentum scrolling for iOS */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.cards-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Remove the before and after pseudo-elements that could cause overflow */
.cards-scroll-container::before,
.cards-scroll-container::after {
    display: none;
}

/* Style for all cards to ensure proper spacing */
.card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px; /* Increased horizontal padding from 0px to 20px */
    gap: 10px;
    
    width: 300px;
    min-width: 300px;
    height: 387px;
    
    background: #FFFFFF;
    border-radius: 8px; /* Reduced border-radius from 8px */
    
    flex: none;
    /* Remove scroll snap alignment */
    scroll-snap-align: none;
    margin-right: 0; /* Ensure no additional margins are affecting the layout */
}

/* Add left margin to first card to position it correctly */
.cards-scroll-container .card:first-child {
    margin-left: 0; /* Position first card at the left edge */
}

/* Add right margin to last card to ensure it can be scrolled fully */
.cards-scroll-container .card:last-child {
    margin-right: 32px; /* Add space after the last card */
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    
    width: 240px;
    height: 323px;
}

.card-icon {
    width: 154px;
    height: 120px;
    object-fit: contain;
}

.card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 15px;
    width: 240px;
}

.card-stat {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    margin: 0;
    
    color: #1A231E;
}

.card-description {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    margin: 0;
    
    color: #000000;
}

/* Features section - "How we do it?" */
.features-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0 60px 0; /* Reduced top padding from 60px to 0px */
    gap: 50px;
    width: 100%;
    margin-top: -50px; /* Added negative margin to bring it closer to the green section */
}

.features-title {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #000000;
    margin: 0;
}

.features-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* Increased gap from 40px to 80px */
    width: 100%;
    max-width: 376px;
}

.feature-image-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
}

.feature-image {
    width: 376px;
    height: 528px;
    transform: matrix(1, 0, -0.09, 1, 0, 0);
    object-fit: cover;
}

.feature-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.feature-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    height: 30px;
    border-radius: 8px;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #FFFFFF;
}

.practicaly {
    background-color: #F57800;
    width: 135px;
}

.personaly {
    background-color: #737AF9;
    width: 128px;
}

.emotionally {
    background-color: #F60080;
    width: 154px;
}

.feature-heading {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    text-align: center;
    color: #1A231E;
    margin: 0;
}

.feature-description {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    color: #000000;
    margin: 0;
}

/* Manager insights section */
.manager-insights-section {
    width: 100%;
    padding: 62px 40px;
    background-color: #0460EF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}

.insights-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #79DEFB;
    margin: 0;
}

.insights-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    max-width: 350px;
}

.insights-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 350px;
}

.insight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px; /* Reduced top/bottom padding from 16px to 12px */
    background-color: #F8F4F1;
    border-radius: 8px;
    height: 220px; /* Set a fixed, shorter height */
    box-sizing: border-box;
    width: 100%;
    max-width: 167px;
}

.card-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    height: 90px; /* Increased from 70px to 90px */
    width: 110px; /* Increased from 90px to 110px */
}

.card-icon {
    width: 100%;
    height: 85px; /* Increased from 65px to 85px */
    object-fit: contain;
    object-position: center;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Reduced from 8px to 4px */
    width: 100%;
    padding: 0;
}

.card-title {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #1A231E;
    margin: 0;
    text-align: center;
    width: 100%;
    padding: 0 2px;
    word-wrap: break-word; /* Ensure long words wrap */
}

.card-text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: #000000;
    margin: 0;
    text-align: center;
    padding: 0 2px;
    width: 100%;
    word-wrap: break-word; /* Ensure long words wrap */
    hyphens: auto; /* Add hyphenation if needed */
}

/* Pricing section */
.pricing-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 32px 0px;
    gap: 55px;
    width: 100%;
    max-width: 430px;
    margin: -60px auto 0;
    box-sizing: border-box;
}

.pricing-title {
    width: 100%;
    max-width: 376px;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    text-align: center;
    color: #1A231E;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 32px;
    width: 100%;
    max-width: 366px;
    background: #F8F4F1;
    border-radius: 8px;
    box-sizing: border-box;
}

.pricing-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.limited-offer-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    background: #FF7D00;
    border-radius: 8px;
    width: auto;
    height: 22px;
}

.limited-offer-text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
}

.price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-top: 16px;
}

.price {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: #1A231E;
}

.pricing-details {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #000000;
    margin-top: 8px;
    width: 100%;
}

.features-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.pricing-feature-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.feature-icon {
    width: 20px;
    height: 20px;
    background: #000000;
    border-radius: 50%;
}

.feature-text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #000000;
    flex-grow: 1;
}

.pricing-cta-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 10px;
    gap: 10px;
    width: 100%;
    height: 56px;
    background: #0460EF;
    border: 2px solid #000000;
    box-shadow: 0px 4px 0px #000000;
    border-radius: 8px;
    cursor: pointer;
}

.pricing-cta-text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
}

.pricing-cta-button:hover {
    background-color: #0352D2;
    box-shadow: 0px 2px 0px 0px #000000;
}

/* Final bottom section */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    line-height: 0;
    overflow: visible;
}

.bottom-wave {
    width: 100%;
    height: 30px;
    display: block;
    line-height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.bottom-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px 0 50px 0;
    width: 100%;
    background: #FEA0CC;
    position: relative;
    margin-top: -4px; /* Increased negative margin to remove the white gap */
}

.sunflower {
    position: absolute;
    width: 115px;
    height: 108px;
    left: 50%;
    transform: translateX(-50%);
    top: 35px;
    z-index: 0;
}

/* Fix bottom gap issue */
.landing-container {
    padding-bottom: 0;
    min-height: 100vh; /* Ensure container takes full height */
}

html, body {
    min-height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-bottom: 0;
}