/**
 * Automation ROI calculator guide — blog post shell
 * Load after blog.css + modern-2026. Tailwind utilities handle most layout; this ties tokens + polish.
 */
@import url("theme-tokens.css");

body.blog-roi-guide {
    background: var(--xeno-page);
    color: var(--xeno-text);
}

.blog-roi-article {
    padding-bottom: var(--space-12, 3rem);
}

.blog-roi-article .prose h2 {
    color: var(--xeno-text);
    font-size: var(--xeno-fs-2xl);
    margin-top: 2rem;
}

.blog-roi-article .prose a {
    color: var(--xeno-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.blog-roi-article .prose a:hover {
    color: var(--xeno-accent-pressed);
}

/* Featured image */
.blog-roi-hero-img {
    border-radius: var(--xeno-radius-card);
    box-shadow: var(--shadow-card);
}

/* Emerald callouts: align with brand teal (Tailwind emerald-* kept for calculator; this softens page chrome) */
.blog-roi-article .bg-emerald-50 {
    background: color-mix(in srgb, var(--xeno-accent) 10%, var(--xeno-surface)) !important;
    border-color: color-mix(in srgb, var(--xeno-accent) 28%, var(--xeno-border)) !important;
}

.blog-roi-article .text-emerald-600,
.blog-roi-article .text-emerald-700,
.blog-roi-article .text-emerald-800 {
    color: var(--xeno-accent) !important;
}

.blog-roi-article .border-emerald-200,
.blog-roi-article .border-emerald-300 {
    border-color: color-mix(in srgb, var(--xeno-accent) 35%, var(--xeno-border)) !important;
}

.blog-roi-article .bg-emerald-600,
.blog-roi-article .hover\:bg-emerald-700:hover {
    background-color: var(--xeno-accent) !important;
}

.blog-roi-article .border-emerald-500,
.blog-roi-article .focus\:ring-emerald-500:focus {
    --tw-ring-color: color-mix(in srgb, var(--xeno-accent) 45%, transparent) !important;
}

.blog-roi-article input:focus {
    border-color: var(--xeno-accent) !important;
}