@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

:root {
    --bg: #fbfaf6 !important;
    --bg-card: #ffffff !important;
    --surface: #ffffff !important;
    --text-primary: #17233c !important;
    --text: #17233c !important;
    --text-secondary: #47556d !important;
    --text-muted: #5e6a7c !important;
    --accent: #943425 !important;
    --accent-dim: rgba(185, 65, 47, 0.11) !important;
    --border: rgba(23, 35, 60, 0.13) !important;
    --radius: 14px !important;
}

html {
    background: #fbfaf6;
}

body {
    background: #fbfaf6 !important;
    color: #17233c !important;
    font-family: "Manrope", "DM Sans", system-ui, sans-serif !important;
}

nav {
    min-height: 76px !important;
    padding: 0 max(24px, calc((100vw - 1180px) / 2)) !important;
    position: fixed !important;
    border-bottom: 1px solid rgba(23, 35, 60, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(251, 250, 246, 0.94) !important;
    backdrop-filter: blur(18px) !important;
}

nav > a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #17233c;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-decoration: none;
}

nav > a:first-child::before,
.article-simple-brand::before {
    content: "";
    width: 31px;
    height: 31px;
    display: block;
    flex: 0 0 31px;
    background: url("/logo-mark.svg") center / contain no-repeat;
    text-decoration: none;
}

nav > a:first-child::after {
    content: "FastAgent";
}

.nav-logo {
    display: none !important;
}

nav ul a {
    color: #47556d !important;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-weight: 600;
}

.nav-contact {
    border: 0 !important;
    background: #b9412f !important;
    color: #fff !important;
}

.article-hero {
    max-width: 920px !important;
    padding: 150px 24px 70px !important;
    text-align: left !important;
}

.article-hero .post-meta,
.article-hero .back-link {
    color: #943425 !important;
    font-family: "DM Mono", monospace;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.article-hero h1,
body > article > h1 {
    color: #17233c !important;
    font-family: "Newsreader", Georgia, serif !important;
    font-size: clamp(3.2rem, 7vw, 6.5rem) !important;
    font-weight: 400 !important;
    letter-spacing: -0.045em;
    line-height: 0.98 !important;
}

.article-hero .subtitle {
    max-width: 720px !important;
    margin-left: 0 !important;
    color: #47556d !important;
}

.article-body,
body > article {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 10px 24px 90px !important;
}

.article-body h2,
.article-body h3,
body > article h2,
body > article h3 {
    color: #17233c !important;
    font-family: "Newsreader", Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.025em;
}

.article-body h2,
body > article h2 {
    margin-top: 58px !important;
    font-size: 2.3rem !important;
}

.article-body p,
.article-body li,
body > article p,
body > article li {
    color: #47556d !important;
}

.article-body strong,
body > article strong {
    color: #17233c !important;
}

.diagram-container,
.comparison-table,
.cta-section,
.example-box,
.cta-box,
.final-cta {
    background: #ffffff !important;
    border-color: rgba(23, 35, 60, 0.14) !important;
    box-shadow: 0 12px 38px rgba(39, 61, 89, 0.07);
}

.example-box,
.cta-box {
    border-left: 4px solid #b9412f !important;
    background: rgba(185, 65, 47, 0.07) !important;
}

.comparison-table th,
table th,
.example-label,
.cta-box h3,
.final-cta h3 {
    color: #943425 !important;
}

.cta-button,
.btn {
    border-radius: 999px !important;
    background: #b9412f !important;
    color: #ffffff !important;
}

.diagram-container text[fill="#F0F1F3"] {
    fill: #17233c;
}

.diagram-container text[fill="#9BA1AE"],
.diagram-container text[fill="#5C6272"] {
    fill: #5e6a7c;
}

.diagram-container text[fill="#C8A44E"] {
    fill: #943425;
}

.diagram-container [stroke="#C8A44E"] {
    stroke: #b9412f;
}

.diagram-container [fill="#C8A44E"] {
    fill: #b9412f;
}

.diagram-container stop:first-child {
    stop-color: #6ba9be !important;
}

.diagram-container stop:last-child {
    stop-color: #b9412f !important;
}

footer,
.footer {
    border-color: rgba(23, 35, 60, 0.12) !important;
    color: #5e6a7c !important;
}

footer a,
.footer a {
    color: #47556d !important;
}

.article-simple-header {
    max-width: 1180px;
    min-height: 76px;
    margin: -2rem auto 72px;
    border-bottom: 1px solid rgba(23, 35, 60, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article-simple-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #17233c;
    font-weight: 800;
    text-decoration: none;
}

.article-simple-header > a:last-child {
    color: #47556d;
    font-size: 0.8rem;
}

body > article .intro {
    color: #47556d !important;
}

body > article .meta {
    color: #5e6a7c !important;
}

.container > header {
    padding-top: 1rem;
}

.container > header a {
    color: #943425 !important;
    font-family: "DM Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.container > h1 {
    color: #17233c !important;
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(3rem, 7vw, 5.8rem) !important;
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
}

.container > h2,
.container > h3,
.company-box h3 {
    color: #17233c !important;
}

.company-box {
    background: #ffffff !important;
    box-shadow: 0 12px 38px rgba(39, 61, 89, 0.07);
}

@media (max-width: 768px) {
    nav {
        padding-inline: 18px !important;
        backdrop-filter: none !important;
    }

    nav ul {
        position: fixed !important;
        z-index: 100 !important;
        top: 76px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        min-height: calc(100dvh - 76px) !important;
        padding: 2rem !important;
        background: #fbfaf6 !important;
    }

    .nav-toggle {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .article-hero {
        padding-top: 120px !important;
    }

    .article-hero h1,
    body > article > h1 {
        font-size: clamp(2.8rem, 14vw, 4.2rem) !important;
    }

    .article-simple-header {
        margin-bottom: 48px;
    }

    .comparison-table {
        display: block;
        overflow-x: auto;
    }
}