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

.prose .lead {
    @apply text-xl text-slate-600;
}

.prose h1 {
    @apply mb-4;
}

.prose h2 {
    @apply text-3xl font-bold tracking-tight text-slate-900 border-b border-slate-200 pb-4 mb-8 flex items-center;
}

.prose h3 {
    @apply text-2xl font-bold tracking-tight text-slate-900;
}

.prose table {
    @apply text-base;
}

.prose table th {
    @apply text-slate-800 font-semibold;
}

.prose table td {
    @apply text-slate-600;
}

.prose table tr:nth-child(2n) {
    @apply bg-slate-50/50;
}

.icon-header {
    @apply w-7 h-7 mr-3 text-indigo-500;
}

.card {
    @apply bg-white p-6 rounded-2xl border border-slate-200 shadow-sm;
}

.card-small {
    @apply bg-white p-4 rounded-xl border border-slate-200 shadow-sm text-center;
}

.card-small h4 {
    @apply !mt-0 !mb-2 text-base font-semibold text-slate-900;
}
.card-small p {
    @apply !m-0 text-sm text-slate-600;
}

.insight-item {
    @apply relative pl-8 before:content-[''] before:absolute before:left-1 before:top-2 before:w-4 before:h-4 before:bg-indigo-200 before:rounded-full after:content-[''] after:absolute after:left-2 after:top-[11px] after:w-2 after:h-2 after:bg-indigo-500 after:rounded-full;
}

.iframe-container {
    @apply rounded-xl border border-slate-200 bg-slate-100 shadow-lg shadow-slate-200/50 overflow-hidden my-12;
}

.iframe-container.prototype {
    @apply ring-4 ring-indigo-500/20 shadow-2xl shadow-indigo-200/50;
}

.iframe-container iframe {
    display: block;
    transition: height 0.3s ease-in-out;
}

.table-container {
    @apply rounded-lg border border-slate-200 overflow-hidden shadow-sm;
}

.animated-section {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animated-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

#side-nav .nav-link {
    @apply block text-slate-500 hover:text-slate-800 transition-colors duration-200;
}

#side-nav .nav-link.active {
    @apply font-semibold text-indigo-600;
}