/* Article layout matching packages/landing/blog/soc2-readiness/index.html.
   Utilities are local so these posts do not load the Tailwind CDN or Google Fonts. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #fff;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }

a { color: inherit; }

.bg-white { background: #fff; }
.text-slate-900 { color: #0f172a; }
.text-slate-700 { color: #334155; }
.text-slate-600 { color: #475569; }
.text-slate-500 { color: #64748b; }
.text-slate-400 { color: #94a3b8; }
.text-white { color: #fff; }
.antialiased { -webkit-font-smoothing: antialiased; }

.border-b { border-bottom: 1px solid #f1f5f9; }
.border-t { border-top: 1px solid #e2e8f0; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.bg-slate-50 { background: #f8fafc; }

.max-w-6xl { max-width: 72rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.p-8 { padding: 2rem; }

.h-16 { height: 4rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }

.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.border { border: 1px solid #e2e8f0; }

.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.tracking-tight { letter-spacing: -0.025em; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.05; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-6 { margin-top: 1.5rem; }

.list-disc { list-style: disc; }
.list-inside { list-style-position: inside; padding-left: 0; }
.space-y-2 > * + * { margin-top: 0.5rem; }

.bg-\[\#00A36C\] { background: #00A36C; }
.hover\:bg-\[\#008F5D\]:hover { background: #008F5D; }
.bg-\[\#001a33\] { background: #001a33; }
.hover\:bg-\[\#002244\]:hover { background: #002244; }
.hover\:text-slate-900:hover { color: #0f172a; }
.transition-colors { transition: color 150ms, background-color 150ms, border-color 150ms; }

nav a,
footer a { text-decoration: none; }

footer a:hover { color: #0f172a; }

article a { color: #008F5D; text-decoration: underline; text-underline-offset: 2px; }
article a:hover { color: #00724a; }

article figure { margin: 0 0 1.5rem; }
article figure a { text-decoration: none; color: inherit; }
article figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}
article figcaption {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

article blockquote {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid #00A36C;
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.625;
}

.video {
    position: relative;
    margin: 0 0 1.5rem;
    padding-top: 56.25%;
    background: #0f172a;
    border-radius: 0.75rem;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:text-5xl { font-size: 3rem; line-height: 1; }
    .sm\:flex-row { flex-direction: row; }
}