body {
    font-family: 'Inter', sans-serif;
}
.coming-soon {
    cursor: not-allowed;
    opacity: 0.6;
}
/* * Production-Ready Custom Classes
    * Consolidates repeated Tailwind utilities into single classes for cleaner HTML (DRY principle).
    * These are based on the provided style guide.
*/
.btn-primary {
    @apply bg-blue-500 text-white font-medium py-3 px-6 rounded-lg shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}
.btn-secondary {
    @apply bg-transparent border border-blue-500 text-blue-500 font-medium py-3 px-6 rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}
.card {
    @apply bg-white border border-gray-300 rounded-xl shadow-sm;
}
.tool-icon {
    @apply flex flex-col items-center justify-center p-4 card hover:shadow-lg hover:-translate-y-1 transition-all;
}
.feature-card {
    @apply card flex items-start space-x-4 p-6;
}
.modal-backdrop {
    @apply fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300;
}
.modal-content {
    @apply bg-slate-100 rounded-xl shadow-lg w-full max-w-lg m-4 transform transition-transform duration-300 scale-95;
}
.modal-visible .modal-backdrop {
    @apply opacity-100;
}
.modal-visible .modal-content {
    @apply scale-100;
}
.hidden {
    display: none;
}