@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', sans-serif;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-family: 'Inter', sans-serif;
    color: #1a202c; /* slate-900 */
}

.image-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .image-comparison {
        grid-template-columns: 1fr 1fr;
    }
}

.image-comparison figure {
    margin: 0;
    text-align: center;
}

.image-comparison img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    border: 1px solid rgba(0,0,0,0.05);
}

.image-comparison figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #4b5563; /* gray-600 */
}

.image-comparison figcaption.before {
    color: #b91c1c; /* red-700 */
}

.image-comparison figcaption.after {
    color: #166534; /* green-700 */
}

.cost-highlight {
    background-color: #fefce8; /* yellow-50 */
    border-left: 4px solid #f59e0b; /* amber-500 */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.cost-highlight strong {
    color: #1a202c;
    font-weight: 700;
}