.membership-hero{background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);color: white;padding: 8rem 2rem 4rem;text-align: center}.membership-hero h1{font-size: 2.5rem;margin-bottom: 1rem}.membership-hero p{font-size: 1.2rem;opacity: 0.9;max-width: 700px;margin: 0 auto}.signup-section{padding: 4rem 2rem;max-width: 600px;margin: 0 auto}.signup-container{background: white;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 2.5rem}.signup-container h2{color: var(--primary);text-align: center;margin-bottom: 0.5rem}.signup-container .subtitle{text-align: center;color: var(--text-light);margin-bottom: 2rem}.signup-form .form-group{margin-bottom: 1.25rem}.signup-form label{display: block;margin-bottom: 0.5rem;font-weight: 600;color: var(--text)}.signup-form input, .signup-form select, .signup-form textarea{width: 100%;padding: 0.875rem 1rem;border: 2px solid var(--border);border-radius: 6px;font-size: 1rem;font-family: inherit;transition: border-color 0.2s}.signup-form input:focus, .signup-form select:focus, .signup-form textarea:focus{outline: none;border-color: var(--primary)}.signup-form .form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem}.signup-form .checkbox-group{display: flex;align-items: flex-start;gap: 0.5rem}.signup-form .checkbox-group input{width: auto;margin-top: 0.25rem}.signup-form .checkbox-group label{font-weight: normal;margin-bottom: 0}.signup-form .btn-submit{width: 100%;padding: 1rem;background: var(--primary);color: white;border: none;border-radius: 6px;font-size: 1.1rem;font-weight: 600;cursor: pointer;transition: background 0.2s, transform 0.2s;margin-top: 1rem}.signup-form .btn-submit:hover{background: var(--primary-light);transform: translateY(-2px)}.benefits-section{background: var(--bg-alt);padding: 4rem 2rem}.benefits-section h2{color: var(--primary);text-align: center;margin-bottom: 2rem}.benefits-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.5rem;max-width: 1000px;margin: 0 auto}.benefit-card{background: white;padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);border-left: 4px solid var(--primary)}.benefit-card h3{color: var(--primary);margin-bottom: 0.5rem}.benefit-card p{color: var(--text-light);margin: 0}.success-message{display: none;text-align: center;padding: 2rem}.success-message.show{display: block}.success-message h2{color: var(--primary);margin-bottom: 1rem}.success-message p{color: var(--text-light);margin-bottom: 1.5rem}.success-message .checkmark{width: 80px;height: 80px;background: #d4edda;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;font-size: 2.5rem;color: #155724}.sso-section{margin-bottom: 2rem;padding-bottom: 2rem;border-bottom: 1px solid var(--border)}.sso-section h3{text-align: center;color: var(--text);font-size: 1rem;margin-bottom: 1rem}.sso-buttons{display: flex;flex-direction: column;gap: 0.75rem}.sso-btn{display: flex;align-items: center;justify-content: center;gap: 0.75rem;padding: 0.875rem 1rem;border: 2px solid var(--border);border-radius: 6px;background: white;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.2s}.sso-btn:hover{border-color: var(--primary);background: #f8f9fa}.sso-btn svg{width: 20px;height: 20px}.sso-btn.google{color: #333}.sso-btn.microsoft{color: #333}.sso-btn.apple{color: #333}.divider{display: flex;align-items: center;text-align: center;margin: 1.5rem 0;color: var(--text-light);font-size: 0.9rem}.divider::before, .divider::after{content: '';flex: 1;border-bottom: 1px solid var(--border)}.divider::before{margin-right: 1rem}.divider::after{margin-left: 1rem}.logged-in-view{text-align: center;display: none}.logged-in-view.show{display: block}.user-avatar{width: 80px;height: 80px;border-radius: 50%;margin: 0 auto 1rem;background: var(--primary);display: flex;align-items: center;justify-content: center;font-size: 2rem;color: white;overflow: hidden}.user-avatar img{width: 100%;height: 100%;border-radius: 50%;object-fit: cover}.btn-logout{margin-top: 1rem;padding: 0.75rem 2rem;background: transparent;border: 2px solid var(--primary);color: var(--primary);border-radius: 6px;font-size: 1rem;cursor: pointer;transition: all 0.2s}.btn-logout:hover{background: var(--primary);color: white}@media (max-width: 600px){.membership-hero h1{font-size: 1.8rem}.signup-container{padding: 1.5rem}.signup-form .form-row{grid-template-columns: 1fr}}