/* masked-email.css 
   Uniform vertical spacing (50px) and wider layout fixes 
*/

/* 1. Hero spacing - The master gap size you liked */
.hero-panel {
    margin-bottom: 50px; 
    padding-bottom: 0px; 
}

/* 2. Unified Section Spacing - Applies to all major sections */
.section-block {
    margin-top: 50px !important;
    padding-top: 0px !important; 
}

/* 3. Hero Layout - Wide text area */
.hero-panel {
    display: grid;
    grid-template-columns: 1.6fr 1fr; 
    gap: 40px;
    align-items: center;
}

.hero-copy {
    max-width: 100% !important;
}

.hero-copy h1 {
    max-width: 22ch; 
    line-height: 1.1;
}

/* NEW: Added white gap under the action buttons */
.hero-actions {
    margin-top: 32px;
    margin-bottom: 20px; /* This creates the extra gap you highlighted */
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 4. Visual Guide Spotlight - Balanced ratio */
.feature-spotlight {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr; 
    gap: 40px; 
    align-items: start;
}

/* 5. Sidebar/Mini Panel Spacing */
.mini-panel {
    padding: 26px !important;
    margin-bottom: 18px;
    border-radius: 20px;
}

.feature-side-panels {
    gap: 18px !important;
}

/* 6. Wider Visual Flow Cards */
.visual-card {
    padding: 26px 20px !important;
    border-radius: 22px;
    width: 100%;
}

.visual-card strong {
    font-size: 1.05rem;
    margin-bottom: 8px;
    display: block;
    color: var(--brand-deep);
}

.visual-board {
    margin-top: 32px !important;
    padding: 30px 15px !important;
}

.visual-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Mobile adjustments */
@media (max-width: 860px) {
    .hero-panel, .feature-spotlight {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .hero-panel, .section-block {
        margin-bottom: 30px;
        margin-top: 30px !important;
    }

    .visual-flow {
        grid-template-columns: 1fr;
    }
}