/* Page geometry and feature states; shared appearance lives in styles.css and families.css. */
.role-selection-container { max-width: 1000px; margin: 2rem auto; padding: 0 1rem;
}
.hero-section { text-align: center; margin-bottom: 4rem;
}
.hero-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem;
}
.hero-subtitle { font-size: 1.25rem; color: var(--secondary); max-width: 600px; margin: 0 auto;
}
.role-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; margin-bottom: 4rem;
}
.role-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 3.5rem 2.5rem; text-align: center; transition: var(--transition-base); cursor: pointer; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-md);
}
.role-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--primary);
}
.role-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--primary); opacity: 0.8;
}
.role-icon { width: 80px; height: 80px; border-radius: var(--radius-md); margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--minder-teal-light); color: var(--primary); transition: var(--transition-base);
}
.role-card:hover .role-icon { transform: scale(1.1) rotate(5deg); background: var(--primary); color: var(--white);
}
.role-title { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem;
}
.role-features { list-style: none; padding: 0; margin: 0 0 3rem; text-align: left; flex-grow: 1;
}
.role-features li { padding: 0.75rem 0; color: var(--secondary); display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.4;
}
.role-features li i { color: var(--success); font-size: 1.25rem;
}
.role-btn { display: inline-flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.2; padding: 1rem 1.5rem; min-height: 4rem; font-size: 1.1rem;
}
.login-section { text-align: center; padding: 3rem; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .role-cards-container { gap: 1.5rem; } .role-card { padding: 2.5rem 1.5rem; }
}