/* Messy Church Inner Container */
.messy-church-inner {
    background-color: #ffffff !important;
    border: 6px solid transparent;
    /* Clean rainbow border layout without the awkward side masking */
    background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, #ff5964, #35a7ff, #ffb800, #9e0059);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    margin: 0 !important; /* Eliminates external layout masking */
}

/* Updated Title - Clean, Dark, No Shadow */
h2.messy-title {
    font-family: 'Comic Sans MS', 'Comic Neue', 'Fredoka One', system-ui, sans-serif !important;
    color: #2b2b2b !important; /* Beautiful crisp charcoal */
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    text-shadow: none !important; /* Dropped the shadow completely */
    margin-bottom: 1rem;
}

/* Body Text */
p.messy-text {
    color: #444444 !important;
    font-weight: 500 !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
}

/* The Big Bright CTA Button */
.btn-messy {
    background-color: #ff5964 !important; 
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important; 
    box-shadow: 0 6px 18px rgba(255, 89, 100, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-messy:hover {
    background-color: #e03e49 !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(255, 89, 100, 0.5) !important;
}

/* Background Multi-Shape Clusters */
.messy-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12; /* Subtle transparency so they sit softly in the back */
    z-index: 1;
}

/* Left-hand Shape Mix */
.shape-left-1 { width: 140px; height: 140px; background-color: #35a7ff; top: -40px; left: -20px; }
.shape-left-2 { width: 90px; height: 90px; background-color: #ffb800; top: 60px; left: 40px; }
.shape-left-3 { width: 120px; height: 120px; background-color: #ff5964; bottom: -50px; left: -10px; }

/* Right-hand Shape Mix */
.shape-right-1 { width: 160px; height: 160px; background-color: #ffb800; bottom: -50px; right: -20px; }
.shape-right-2 { width: 100px; height: 100px; background-color: #9e0059; top: -20px; right: 50px; }
.shape-right-3 { width: 110px; height: 110px; background-color: #35a7ff; bottom: 70px; right: 30px; }

/* Content wrapper keeps text sharply above the shapes */
.messy-content { 
    z-index: 2; 
    position: relative; 
}