/* Clean button styling - Final override */
.hero-cta .btn,
.guide-trigger {
    /* Fixed dimensions */
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    
    /* Text handling */
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.4 !important;
    
    /* Spacing */
    padding: 18px 24px !important;
    margin: 0 !important;
    
    /* Typography */
    font-size: 1rem !important;
    font-weight: 600 !important;
    
    /* Layout */
    display: inline-block !important;
    vertical-align: top !important;
    
    /* Transitions for hover effects */
    transition: all 0.3s ease !important;
}

/* Guide trigger specific styling with RED hover */
.guide-trigger {
    background: transparent !important;
    border: 2px solid #F38E20 !important;
    color: #F38E20 !important;
}

.guide-trigger:hover {
    background: #dc3545 !important;  /* Bootstrap red color */
    border-color: #dc3545 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3) !important;
}

/* Ensure icon spacing in guide button */
.guide-trigger i {
    margin-right: 8px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-cta .btn,
    .guide-trigger {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        padding: 16px 20px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .hero-cta .btn,
    .guide-trigger {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        padding: 14px 16px !important;
        font-size: 0.85rem !important;
    }
}