.block-marketure {
    position: relative;
    min-height: 100vh;
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Marketure section - will be pinned by ScrollTrigger */
.item.marketure {
    position: relative;
    /* Base dimensions: 1387 x 882 (aspect ratio: 1.573) */
    /* JavaScript will scale this down responsively using transform: scale() */
    width: 1387px;
    height: 882px;
    /* Transform origin for scaling */
    transform-origin: center top;
    /* Centering is handled by JavaScript using left: 50% + xPercent: -50% */
    /* This works for both relative (unpinned) and fixed (pinned) positioning */
    background-color: #FFFFFF;
}

/* Artwork styling */
.artwork {
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    display: block;
}

/* Position artwork containers absolutely within the marketure div */
#input-1,
#input-2,
#input-3,
#input-l1,
#input-l2,
#input-l3,
#click-1,
#click-2,
#click-3,
#funnel-1,
#funnel-2,
#funnel-3,
#label-1,
#label-2,
#label-3,
#arrow,
#funnel-pulse,
#pulse-dash,
#pulse-mobile,
#pulse-geovisual,
#pulse-api,
#pulse-integration,
#output-flow {
    position: absolute;
}

/* Position input-1 at (231, 30) */
#input-1 {
    left: 291px;
    top: 30px;
    z-index: 20;
}
#input-2 {
    left: 561px;
    top: 30px;
    z-index: 20;
}
#input-3 {
    left: 831px;
    top: 30px;
    z-index: 20;
}
#input-l1 {
    left: 407px;
    top: 132px;
    z-index: 19;
}
#input-l2 {
    left: 677px;
    top: 132px;
    z-index: 19;
}
#input-l3 {
    left: 705px;
    top: 132px; 
    z-index: 19;
}

#funnel-1 {
    left: 283px;
    top: 171px;
    z-index: 10;
}
#funnel-2 {
    left: 333px;
    top: 306px;
    z-index: 9;
}
#funnel-3 {
    left: 383px;
    top: 445px;
    z-index: 8;
}
#label-1 {
    left: 552px;
    top: 232px;
    z-index: 15;
}
#label-2 {
    left: 552px;
    top: 364px;
    z-index: 15;
}
#label-3 {
    left: 552px;
    top: 495px;
    z-index: 15;
}
#click-1,
#click-2,
#click-3 {
    cursor: pointer;
}
#click-1 {
    left: 806px;
    top: 222px;
    z-index: 17;
}
.drawer-container {
    position: absolute;
    left: 552px;
    top: 232px;
    z-index: 14;
}
.drawer-bg {
    position: relative;
}
.drawer-bulletpoints {
    position: absolute;
    top: 150px;
    left: 20px;
    width: 270px;
}
.drawer-bp-item {
    margin-bottom: 8px;
}
#click-2 {
    left: 806px;
    top: 354px;
    z-index: 17;
}
#click-3 {
    left: 806px;
    top: 486px;
    z-index: 17;
}
#arrow {
    left: 656px;
    top: 576px;
    z-index: 7;
}
#funnel-pulse {
    left: 470px;
    top: 626px;
    z-index: 6;
}
#output-group {
    position: absolute;
    left: 30px;
    top: 812px;
    width: 1327px; /* 5 items * 255px + 4 gaps * 13px */
    display: flex;
    justify-content: center;
    column-gap: 13px; /* Keep existing visual padding between items */
    z-index: 5;
}

/* Let flexbox lay out the individual output items */
#pulse-dash,
#pulse-mobile,
#pulse-geovisual,
#pulse-api,
#pulse-integration {
    position: static;
}

#output-flow {
    left: 157px;
    top: 768px;
    /* width will be dynamically set by JavaScript based on content */
    height: 120px;
    z-index: 4;
}

#line-output,
#output-lines {
    /* width will be dynamically set by JavaScript */
    height: 100%;
}

/* Initially hide all groups (will be controlled by GSAP) */
/* #input-group,
#funnel-group,
#dtmr-pulse {
    opacity: 0;
    visibility: hidden;
} */

/* Mobile: Show all elements statically (no animations) */
@media (max-width: 767px) {
    /* Ensure parent container allows proper scrolling and contains scaled content */
    body.marketure-mobile .block-marketure {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
        /* Ensure container can contain scaled content */
        contain: layout style;
    }
    
    body.marketure-mobile #input-group,
    body.marketure-mobile #funnel-group,
    body.marketure-mobile #dtmr-pulse {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    body.marketure-mobile #input-1,
    body.marketure-mobile #input-2,
    body.marketure-mobile #input-3,
    body.marketure-mobile #input-l1,
    body.marketure-mobile #input-l2,
    body.marketure-mobile #input-l3,
    body.marketure-mobile #funnel-1,
    body.marketure-mobile #funnel-2,
    body.marketure-mobile #funnel-3,
    body.marketure-mobile #label-1,
    body.marketure-mobile #label-2,
    body.marketure-mobile #label-3,
    body.marketure-mobile #click-1,
    body.marketure-mobile #click-2,
    body.marketure-mobile #click-3,
    body.marketure-mobile #arrow,
    body.marketure-mobile #funnel-pulse,
    body.marketure-mobile #pulse-dash,
    body.marketure-mobile #pulse-mobile,
    body.marketure-mobile #pulse-geovisual,
    body.marketure-mobile #pulse-custom-api,
    body.marketure-mobile #pulse-direct-api,
    body.marketure-mobile #pulse-siem,
    body.marketure-mobile #pulse-soar,
    body.marketure-mobile #pulse-integration,
    body.marketure-mobile #output-flow {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure marketure container is properly sized and centered for mobile */
    body.marketure-mobile .item.marketure {
        position: relative !important;
        width: 1387px !important; /* logical art width; JS will scale + center */
        height: auto !important;  /* allow JS to set an inline scaled height */
        max-width: none !important;
        /* Centering and scaling handled by JS */
        overflow: visible;
    }
}

/* Mobile landscape: use full width, scroll for height */
@media (max-width: 767px) and (orientation: landscape) {
    body.marketure-mobile .block-marketure {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
}