/* Branding Styles */
.header {
    background-color: #1a2a3a; /* Dark Blue from your original image */
    color: #ffffff;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 15px;
}

.logo {
    height: 45px;
    width: auto;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Button & Layout Fixes */
.card {
    background: white;
    max-width: 450px;
    margin: 60px auto;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
}

.button-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-primary {
    background: #28a745;
    color: white;
    border: none;
    flex: 1;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
}

.btn-outline {
    background: white;
    color: #28a745;
    border: 2px solid #000; /* Matching the black border in your image */
    flex: 1;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.btn-primary:active, .btn-outline:active {
    transform: scale(0.98);
}

.hidden { display: none !important; }

/* Modal styling from previous step remains the same */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
.modal.active { display: flex; }