:root {
    /* Color Palette */
    --color-primary:        #1d4ed8;
    --color-primary-dark:   #1e3a8a;
    --color-accent:         #b45309;

    --color-text-primary:   #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted:     #94a3b8;

    --color-bg-page:        #f1efe9;
    --color-bg-card:        #ffffff;
    --color-bg-subtle:      #f8fafc;
    --color-bg-stripe:      #f8f9fb;

    --color-border:         #e2e8f0;
    --color-border-strong:  #cbd5e1;
    --color-heading:        #0f172a;

    --color-badge-bg:       #fef3c7;
    --color-badge-text:     #92400e;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;

    /* Spacing */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Geometry */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    line-height: 1.75;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    margin: 0;
    padding: var(--spacing-2xl) var(--spacing-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Document shell ─────────────────────────────── */
.markdown-content {
    max-width: 920px;
    margin: 0 auto;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
}

.doc-header-brand {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.doc-header-meta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.doc-badge {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-badge-bg);
    color: var(--color-badge-text);
    border: 1px solid #fcd34d;
}

.doc-date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.doc-body {
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-3xl);
}

/* ── Typography ─────────────────────────────────── */
.markdown-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-heading);
    margin: 0 0 var(--spacing-sm);
}

.markdown-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin: var(--spacing-3xl) 0 var(--spacing-lg);
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--color-primary);
    border-top: none;
}

.markdown-content h2:first-child { margin-top: 0; }

.markdown-content h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: var(--spacing-2xl) 0 var(--spacing-md);
}

.markdown-content h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.markdown-content p {
    margin: 0 0 var(--spacing-md);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--color-heading);
}

.markdown-content em {
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ── Links ──────────────────────────────────────── */
.markdown-content a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.markdown-content a:hover {
    color: var(--color-primary-dark);
    border-bottom-color: currentColor;
}

/* ── Lists ──────────────────────────────────────── */
.markdown-content ul,
.markdown-content ol {
    margin: 0 0 var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.markdown-content li {
    margin: var(--spacing-xs) 0;
    font-size: 0.9375rem;
    line-height: 1.75;
}

.markdown-content li::marker {
    color: var(--color-primary);
}

/* ── Code ───────────────────────────────────────── */
.markdown-content code {
    background-color: var(--color-bg-subtle);
    color: #b45309;
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
    border: 1px solid var(--color-border);
}

.markdown-content pre {
    background-color: #0f172a;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-lg) 0;
}

.markdown-content pre code {
    background: transparent;
    color: #e2e8f0;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* ── Blockquotes ────────────────────────────────── */
.markdown-content blockquote {
    border-left: 3px solid var(--color-border-strong);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-style: italic;
}

.markdown-content blockquote p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ── Horizontal Rule ────────────────────────────── */
.markdown-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-2xl) 0;
}

/* ── Competitive map table ──────────────────────── */
.markdown-content table.competitive-map th:not(:first-child),
.markdown-content table.competitive-map td:not(:first-child) {
    text-align: center;
}

/* ── Mermaid diagrams ───────────────────────────── */
.mermaid {
    margin: var(--spacing-xl) 0;
    display: flex;
    justify-content: center;
}
.mermaid svg {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ── Tables ─────────────────────────────────────── */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-xl) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.markdown-content table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
}

.markdown-content thead {
    background-color: #0f172a;
}

.markdown-content th {
    padding: 10px var(--spacing-lg);
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #cbd5e1;
    border-bottom: none;
    white-space: nowrap;
}

.markdown-content td {
    padding: 10px var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.markdown-content tbody tr:last-child td {
    border-bottom: none;
}

.markdown-content tbody tr:nth-child(even) {
    background-color: var(--color-bg-stripe);
}

.markdown-content tbody tr:hover {
    background-color: #f0f4ff;
}

/* ── Images ─────────────────────────────────────── */
.markdown-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-md);
}

.markdown-content { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    body { padding: 0; background: var(--color-bg-card); }

    .markdown-content {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .doc-body { padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl); }

    .markdown-content h1 { font-size: 1.75rem; }
    .markdown-content h2 { font-size: 1.25rem; margin-top: var(--spacing-2xl); }
    .markdown-content h3 { font-size: 1.0625rem; }
    .markdown-content h4 { font-size: 0.9375rem; }
    .markdown-content p, .markdown-content li { font-size: 0.9375rem; }

    .markdown-content pre { font-size: 0.75rem; padding: var(--spacing-md); }

    .table-wrapper { margin: var(--spacing-md) 0; }
    .markdown-content th, .markdown-content td { padding: 8px var(--spacing-md); }
    .markdown-content th { font-size: 0.6875rem; }
    .markdown-content td { font-size: 0.8125rem; }
}

@media (max-width: 480px) {
    .doc-header { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
    .markdown-content h1 { font-size: 1.5rem; }
    .markdown-content h2 { font-size: 1.125rem; }
}

@media (hover: none) and (pointer: coarse) {
    .markdown-content a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Print ──────────────────────────────────────── */
@media print {
    body { background: white; padding: 0; }
    .markdown-content { max-width: 100%; margin: 0; box-shadow: none; border: none; border-radius: 0; }
    .doc-header { background: white; }
    .doc-body { padding: 0; }

    .markdown-content h1 { font-size: 22pt; color: black; page-break-after: avoid; }
    .markdown-content h2 { font-size: 16pt; color: black; page-break-after: avoid; border-left: 3pt solid black; }
    .markdown-content h3 { font-size: 13pt; color: black; page-break-after: avoid; }
    .markdown-content h4 { font-size: 11pt; color: black; page-break-after: avoid; }
    .markdown-content p, .markdown-content li { color: black; orphans: 3; widows: 3; }
    .markdown-content strong { color: black; font-weight: 700; }
    .markdown-content em { color: #444; }
    .markdown-content a { color: black; text-decoration: underline; }
    .markdown-content a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.8em; font-style: italic; }
    .markdown-content a[href^="#"]:after { content: ""; }
    .markdown-content code { background: #f5f5f5; border: 1pt solid #ccc; color: black; }
    .markdown-content pre { background: #f5f5f5; border: 1pt solid #ccc; padding: 10pt; page-break-inside: avoid; white-space: pre-wrap; }
    .markdown-content pre code { background: transparent; border: none; color: black; }
    .markdown-content blockquote { border-left: 3pt solid #666; color: #444; background: transparent; }
    .markdown-content table { border-collapse: collapse; width: 100%; page-break-inside: avoid; }
    .markdown-content thead { background: #f0f0f0; }
    .markdown-content th { background: #f0f0f0; color: black; border: 1pt solid black; padding: 6pt 10pt; font-weight: 700; }
    .markdown-content td { border: 1pt solid black; padding: 6pt 10pt; color: black; }
    .markdown-content tbody tr:nth-child(even) { background: #fafafa; }
    .markdown-content hr { border-top: 1pt solid #999; }
    * { box-shadow: none !important; }
    h1,h2,h3,h4,h5,h6 { page-break-after: avoid; }
    table, figure, img, blockquote { page-break-inside: avoid; }
    @page { margin: 2cm; }
}

/* ── Utility Classes ────────────────────────────── */
.callout {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.callout.primary {
    background: var(--color-bg-subtle);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.callout h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.callout p {
    margin: 0;
    font-weight: 600;
    color: var(--color-primary);
}

.callout ul {
    margin: var(--spacing-sm) 0 0;
}

.list-spaced {
    line-height: 2;
    margin: 0;
}

.text-muted-italic {
    margin: var(--spacing-md) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Container class (if needed) */
.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Document-specific styles */
.document-header {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-2xl);
}

.back-link {
    display: inline-block;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link:hover {
    color: var(--color-primary-dark);
}

.document-meta {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.document-footer {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    font-weight: 500;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.metric {
    background: var(--color-bg-subtle);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
}

.metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-xs);
}

.value-prop-box {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.email-template {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.email-body {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.objection {
    background: var(--color-bg-subtle);
    border-left: 3px solid var(--color-accent);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-md);
}

.tech-stack, .comparison, .timeline {
    margin: var(--spacing-xl) 0;
}

.tech-item, .option, .timeline-item, .risk-item {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.tech-item h4, .option h4, .timeline-item h3, .risk-item h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.code-block {
    background: var(--color-bg-subtle);
    border-left: 3px solid var(--color-primary);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-md);
}

.code-block h4 {
    margin-top: 0;
    color: var(--color-heading);
    font-family: var(--font-mono);
}

.list-compact {
    line-height: 1.5;
    font-size: 0.875rem;
}

.list-compact li {
    margin: var(--spacing-xs) 0;
}

/* Additional utility classes */
.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.text-primary {
    color: var(--color-primary);
}