/* ============================================
   KHAS butterfly accents (keep sparse)
   Parent needs position: relative; overflow as needed.
   ============================================ */
.khas-butterfly {
    position: absolute;
    height: auto;
    width: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.34;
}

.khas-butterfly--sm {
    width: 110px;
}

.khas-butterfly--md {
    width: 150px;
}

/* Half tucked under a corner (outside peek) */
.khas-butterfly--peek-br {
    right: -48px;
    bottom: -52px;
    opacity: 0.38;
}

/* Soft accents clipped inside a purple panel */
.khas-butterfly--soft-br {
    right: -36px;
    bottom: -40px;
    opacity: 0.28;
}

.khas-butterfly--soft-bl {
    left: -40px;
    bottom: -44px;
    opacity: 0.26;
}

.khas-butterfly--soft-tr {
    right: -42px;
    top: -36px;
    opacity: 0.24;
}

.khas-butterfly--soft-tl {
    left: -40px;
    top: -36px;
    opacity: 0.24;
}

/* Keep section content above the accent */
.homepage-wrapper .cta-section > .container,
.member-hero > .container,
.vision-page .manifest-hero-content,
.fr-cta-box > *:not(.khas-butterfly) {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .khas-butterfly--sm {
        width: 88px;
    }

    .khas-butterfly--md {
        width: 120px;
    }

    .khas-butterfly--peek-br {
        right: -40px;
        bottom: -44px;
    }

    .khas-butterfly--soft-br {
        right: -28px;
        bottom: -32px;
    }

    .khas-butterfly--soft-bl {
        left: -28px;
        bottom: -32px;
    }

    .khas-butterfly--soft-tr {
        right: -28px;
        top: -28px;
    }

    .khas-butterfly--soft-tl {
        left: -28px;
        top: -28px;
    }
}