/* ============================================================================
   Mihu AI — Blog post: "Run Your Contact Center by Just Asking — Meet the
   Mihu MCP Server". Page-specific (content) styles only.

   Header, mega-menu, language dropdown and footer come from the shared
   stylesheets (/css/shared/s-7b769d0663.css + /css/shared/s-ef39ab5d25.css +
   /css/mobile-fix.css). This file only styles the article body.

   The article keeps its own bronze brand palette. The shared chrome uses the
   site's indigo accent via the same --bronze-* token names, so the bronze
   palette is scoped to .mcp-article (NOT :root) to avoid recoloring the header
   and footer.
   ============================================================================ */

/* index.html's #header is position:fixed; offset body so content clears it. */
body{padding-top:80px;}
/* Opaque header on a content page (homepage hero sits behind it there). */
#header{background:rgba(255,255,255,0.96); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--gray-100);}

/* ---- Article scope: bronze brand palette + base type (kept off :root so the
        shared indigo header/footer tokens stay untouched) ---- */
.mcp-article{
  --bronze-700:#7a4f1d; --bronze-600:#955f22; --bronze-500:#b8813a;
  --bronze-400:#cfa066; --bronze-200:#ecd6b8; --bronze-100:#f6ecdd; --bronze-50:#fbf6ee;
  --gray-900:#16161c; --gray-800:#26262e; --gray-700:#3b3b45; --gray-600:#5e5e6b;
  --gray-500:#7c7c89; --gray-400:#a0a0ad; --gray-300:#c9c9d2; --gray-200:#e7e7ed;
  --gray-100:#f3f3f6; --white:#ffffff;
  --emerald:#2f9e72; --emerald-bg:#e7f5ee;
  --ink:var(--gray-900);
  --radius:16px; --radius-sm:10px;
  --maxw:1180px; --narrow:760px;
  color:var(--gray-800); line-height:1.7; font-size:18px;
}
.mcp-article .container{max-width:var(--maxw,1180px); margin:0 auto; padding:0 24px;}
.mcp-article .container-narrow{max-width:var(--narrow,760px); margin:0 auto; padding:0 24px;}
.mcp-article a{color:var(--bronze-600); text-decoration:none;}
.mcp-article a:hover{text-decoration:underline;}
.mcp-article code,.mcp-article .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;}

/* ---- Hero ---- */
.blog-hero{padding:54px 0 8px; background:
  radial-gradient(900px 360px at 80% -10%, var(--bronze-50), transparent 60%);}
.blog-breadcrumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--gray-500); margin-bottom:22px;}
.blog-breadcrumb a{color:var(--gray-500);}
.blog-breadcrumb a:hover{color:var(--bronze-600);}
.blog-breadcrumb svg{width:14px; height:14px;}
.blog-category{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--bronze-600);
  background:var(--bronze-100); padding:7px 14px; border-radius:999px; margin-bottom:20px;}
.blog-title{font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--gray-900);
  font-size:clamp(34px,5vw,54px); line-height:1.08; letter-spacing:-.015em; margin:0 0 18px; max-width:19ch;}
.blog-excerpt{font-size:20px; color:var(--gray-600); max-width:62ch; margin:0 0 26px;}
.blog-meta{display:flex; flex-wrap:wrap; gap:22px; color:var(--gray-500); font-size:14px;
  border-top:1px solid var(--gray-200); padding-top:20px;}
.blog-meta-item{display:flex; align-items:center; gap:8px;}
.blog-meta-item svg{width:16px; height:16px; color:var(--bronze-500);}

/* ---- Featured visual ---- */
.blog-featured-image{padding:30px 0 6px;}
.featured-wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.mcp-visual{background:linear-gradient(160deg,var(--gray-900),#23202a 70%); border-radius:22px;
  padding:38px 28px; color:#fff; position:relative; overflow:hidden;}
.mcp-visual:before{content:""; position:absolute; inset:0;
  background:radial-gradient(600px 220px at 18% 0%, rgba(184,129,58,.28), transparent 60%);}
.mcp-flow{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.mcp-node{display:flex; flex-direction:column; align-items:center; gap:10px; min-width:120px;}
.mcp-ico{width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);}
.mcp-ico svg{width:26px; height:26px; stroke:var(--bronze-400);}
.mcp-ico.engine{background:linear-gradient(135deg,var(--bronze-500),var(--bronze-700)); border-color:transparent;}
.mcp-ico.engine svg{stroke:#fff;}
.mcp-label{font-size:13px; color:rgba(255,255,255,.82); font-weight:600; text-align:center;}
.mcp-link{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(255,255,255,.45); min-width:74px;}
.mcp-link .pipe{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze-400); font-weight:700;}
.mcp-link svg{width:30px; height:18px;}
.mcp-outputs{display:flex; flex-direction:column; gap:8px;}
.mcp-chip{font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); white-space:nowrap;}
.mcp-endpoint{position:relative; margin-top:26px; text-align:center;}
.mcp-endpoint .ep{display:inline-flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace;
  font-size:14px; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:10px 16px; border-radius:10px;}
.mcp-endpoint .ep .k{color:var(--bronze-400);}
@media(max-width:680px){.mcp-flow{flex-direction:column;} .mcp-link{transform:rotate(90deg);}}

/* ---- Article body ---- */
.blog-content{padding:42px 0 30px;}
.article-body{font-size:18px;}
.article-body h2{font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--gray-900);
  font-size:clamp(26px,3.4vw,34px); line-height:1.18; letter-spacing:-.01em; margin:46px 0 14px;
  scroll-margin-top:90px;}
.article-body h3{font-size:21px; font-weight:800; color:var(--gray-900); margin:30px 0 8px; letter-spacing:-.01em;}
.article-body p{margin:0 0 18px; color:var(--gray-700);}
.article-body ul{margin:0 0 20px; padding-left:0; list-style:none;}
.article-body ul li{position:relative; padding-left:30px; margin-bottom:11px; color:var(--gray-700);}
.article-body ul li:before{content:""; position:absolute; left:8px; top:11px; width:7px; height:7px;
  border-radius:2px; background:var(--bronze-500); transform:rotate(45deg);}
.article-body strong{color:var(--gray-900); font-weight:700;}
.article-body code{background:var(--bronze-50); border:1px solid var(--bronze-200); color:var(--bronze-700);
  padding:1px 7px; border-radius:6px; font-size:15px;}
.lead{font-size:21px; color:var(--gray-800);}

/* ---- TOC ---- */
.toc{background:var(--bronze-50); border:1px solid var(--bronze-200); border-radius:var(--radius);
  padding:24px 26px; margin:6px 0 36px;}
.toc-title{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bronze-600); margin-bottom:14px;}
.toc-list{list-style:none; margin:0; padding:0; columns:2; column-gap:30px;}
.toc-list li{margin:0 0 10px; padding:0; break-inside:avoid;}
.toc-list li:before{display:none;}
.toc-list a{color:var(--gray-700); font-size:15px; font-weight:600;}
.toc-list a:hover{color:var(--bronze-600); text-decoration:none;}
@media(max-width:600px){.toc-list{columns:1;}}

/* ---- Callout ---- */
.callout{position:relative; background:var(--white); border:1px solid var(--gray-200);
  border-left:4px solid var(--bronze-500); border-radius:var(--radius-sm);
  padding:24px 26px 22px; margin:30px 0; box-shadow:0 8px 30px -22px rgba(20,20,28,.35);}
.callout-icon{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--bronze-100); margin-bottom:12px;}
.callout-icon svg{width:20px; height:20px; stroke:var(--bronze-600);}
.callout-title{font-size:17px; font-weight:800; color:var(--gray-900); margin:0 0 8px;}
.callout-text{margin:0; color:var(--gray-700); font-size:16.5px;}
.callout.success{border-left-color:var(--emerald); background:linear-gradient(180deg,var(--emerald-bg),#fff 65%);}
.callout.success .callout-icon{background:#d6efe1;}
.callout.success .callout-icon svg{stroke:var(--emerald);}

/* ---- Tool grid ---- */
.tools{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0;}
.tool{border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px; background:#fff;}
.tool-ico{width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--bronze-100); margin-bottom:14px;}
.tool-ico svg{width:22px; height:22px; stroke:var(--bronze-600);}
.tool h3{margin:0 0 6px; font-size:17px;}
.tool p{font-size:14.5px; margin:0; color:var(--gray-600);}
@media(max-width:760px){.tools{grid-template-columns:1fr;}}

/* ---- Chat demo ---- */
.chat{border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; margin:28px 0; background:#fff;}
.chat-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--gray-100);
  border-bottom:1px solid var(--gray-200); font-size:13px; color:var(--gray-500); font-weight:600;}
.chat-bar .dot{width:9px; height:9px; border-radius:50%; background:var(--bronze-400);}
.chat-body{padding:18px 18px 22px;}
.bubble{max-width:84%; padding:12px 16px; border-radius:14px; margin-bottom:12px; font-size:15.5px; line-height:1.55;}
.bubble.user{background:var(--gray-900); color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.bubble.ai{background:var(--bronze-50); border:1px solid var(--bronze-200); color:var(--gray-800); border-bottom-left-radius:4px;}
.bubble.tool{font-family:"JetBrains Mono",monospace; font-size:13px; background:#1c1b22; color:#e8e3da;
  border:1px solid #2c2a33; max-width:100%;}
.bubble.tool .k{color:var(--bronze-400);}

/* ---- Compare (REST vs MCP) ---- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0;}
.compare-card{border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px;}
.compare-card h4{margin:0 0 12px; font-size:16px; display:flex; align-items:center; gap:8px;}
.compare-card.old{background:var(--gray-100);}
.compare-card.new{background:linear-gradient(180deg,var(--bronze-50),#fff 60%); border-color:var(--bronze-200);}
.compare-card ul{margin:0;}
.compare-card li{font-size:15px;}
@media(max-width:680px){.compare{grid-template-columns:1fr;}}

/* ---- Workflow ---- */
.workflow{background:var(--bronze-50); border:1px solid var(--bronze-200); border-radius:var(--radius);
  padding:28px; margin:30px 0;}
.workflow-title{font-size:18px; font-weight:800; color:var(--gray-900); margin:0 0 20px; text-align:center;}
.workflow-steps{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; flex-wrap:wrap;}
.wf-step{flex:1; min-width:120px; text-align:center;}
.wf-ico{width:46px; height:46px; border-radius:12px; margin:0 auto 12px; display:grid; place-items:center;
  background:var(--white); border:1px solid var(--bronze-200); color:var(--bronze-600); font-weight:800;}
.wf-step-title{font-weight:800; color:var(--gray-900); font-size:15px; margin-bottom:4px;}
.wf-step-desc{font-size:13.5px; color:var(--gray-600); line-height:1.5;}
.wf-arrow{align-self:center; color:var(--bronze-400); padding-top:14px;}
.wf-arrow svg{width:20px; height:20px;}
@media(max-width:760px){.workflow-steps{flex-direction:column;} .wf-arrow{transform:rotate(90deg); padding:6px 0;}}

/* ---- Use-case card ---- */
.usecase{border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px 26px; margin:18px 0;
  background:linear-gradient(180deg,var(--gray-100),#fff 30%);}
.usecase-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.usecase-ico{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--bronze-100); flex-shrink:0;}
.usecase-ico svg{width:21px; height:21px; stroke:var(--bronze-600);}
.usecase-head h3{margin:0; font-size:19px;}
.usecase p{margin:0; color:var(--gray-700);}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--gray-200); padding:18px 0;}
.faq-q{font-weight:800; color:var(--gray-900); font-size:18px; margin:0 0 8px;}
.faq-a{margin:0; color:var(--gray-700); font-size:16.5px;}

/* ---- CTA ---- */
.cta{background:linear-gradient(150deg,var(--gray-900),#241f29); border-radius:22px; color:#fff;
  padding:46px 40px; margin:50px 0 10px; text-align:center; position:relative; overflow:hidden;}
.cta:before{content:""; position:absolute; inset:0;
  background:radial-gradient(500px 220px at 50% -30%, rgba(184,129,58,.35), transparent 60%);}
.cta h2{font-family:"DM Serif Display",serif; font-weight:400; color:#fff !important; font-size:32px;
  margin:0 0 12px; position:relative;}
.cta p{color:rgba(255,255,255,.82); max-width:54ch; margin:0 auto 26px; position:relative;}
.cta .btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;}
.cta .btn-primary{background:var(--bronze-500); color:#fff; position:relative;}
.cta .btn-primary:hover{background:var(--bronze-400); text-decoration:none;}
.cta-sub{display:block; margin-top:14px; font-size:13.5px; color:rgba(255,255,255,.6); position:relative;}

/* ---- Share ---- */
.share{display:flex; align-items:center; gap:12px; margin:40px 0 0; padding-top:26px; border-top:1px solid var(--gray-200);}
.share-label{font-size:14px; font-weight:700; color:var(--gray-600);}
.share-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--gray-200); background:#fff;
  display:grid; place-items:center; cursor:pointer; color:var(--gray-600); transition:.16s;}
.share-btn:hover{border-color:var(--bronze-400); color:var(--bronze-600);}
.share-btn svg{width:18px; height:18px;}

/* ---- Connect: client cards ---- */
.connect-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0;}
.client-card{border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px; background:#fff;}
.client-head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.client-logo{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; font-weight:800; color:#fff; font-size:18px;}
.client-logo.claude{background:linear-gradient(135deg,var(--bronze-500),var(--bronze-700));}
.client-logo.gpt{background:linear-gradient(135deg,#10a37f,#0c7a5e);}
.client-head h3{margin:0; font-size:19px;}
.client-plan{font-size:12.5px; color:var(--gray-500); font-weight:600;}
.step-list{counter-reset:s; list-style:none; margin:16px 0 0; padding:0;}
.step-list li{position:relative; counter-increment:s; padding:0 0 14px 38px; margin:0; color:var(--gray-700); font-size:15.5px;}
.step-list li:before{content:counter(s); position:absolute; left:0; top:-1px; width:25px; height:25px;
  border-radius:7px; background:var(--bronze-100); color:var(--bronze-700); font-weight:800; font-size:13px;
  display:grid; place-items:center; transform:none;}
.step-list li:last-child{padding-bottom:0;}
.step-list code{background:var(--gray-100); border:1px solid var(--gray-200); color:var(--gray-800);
  padding:1px 6px; border-radius:5px; font-size:13px;}
@media(max-width:760px){.connect-grid{grid-template-columns:1fr;}}

/* ---- Connector dialog mockup (illustrative) ---- */
.mock-note{font-size:12.5px; color:var(--gray-400); text-align:center; margin-top:8px; font-style:italic;}
.dialog{max-width:440px; margin:8px auto 0; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(20,20,28,.5); background:#fff;}
.dialog-bar{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--gray-200); background:var(--gray-100);}
.dialog-bar .dots{display:flex; gap:6px;}
.dialog-bar .dots i{width:10px; height:10px; border-radius:50%; background:var(--gray-300); display:block;}
.dialog-bar .t{font-size:13px; font-weight:700; color:var(--gray-700); margin-left:4px;}
.dialog-body{padding:20px;}
.dialog-body label{display:block; font-size:12.5px; font-weight:700; color:var(--gray-600); margin:0 0 6px;}
.dialog-field{display:flex; align-items:center; border:1px solid var(--gray-300); border-radius:9px; padding:11px 13px;
  font-family:"JetBrains Mono",monospace; font-size:13.5px; color:var(--gray-800); margin-bottom:8px; background:#fff;}
.dialog-field.focus{border-color:var(--bronze-500); box-shadow:0 0 0 3px var(--bronze-100);}
.dialog-hint{font-size:12px; color:var(--gray-400); margin:0 0 16px;}
.dialog-actions{display:flex; justify-content:flex-end; gap:10px;}
.d-btn{font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:8px; border:1px solid var(--gray-300); background:#fff; color:var(--gray-700);}
.d-btn.primary{background:var(--bronze-500); border-color:transparent; color:#fff;}

/* ---- Image slots / figures ---- */
.figure{margin:22px 0; border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; background:#fff;}
.figure img{display:block; width:100%; height:auto;}
.figure figcaption{font-size:13.5px; color:var(--gray-500); padding:12px 16px; border-top:1px solid var(--gray-200);}
.figure-slot{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; min-height:200px; border:2px dashed var(--bronze-200); border-radius:var(--radius); background:var(--bronze-50);
  padding:28px; margin:0;}
.figure-slot svg{width:30px; height:30px; stroke:var(--bronze-400);}
.figure-slot .fs-title{font-weight:800; color:var(--gray-800); font-size:15px;}
.figure-slot .fs-cap{font-size:13.5px; color:var(--gray-500); max-width:46ch;}
.figure-slot .fs-file{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--bronze-600);
  background:#fff; border:1px solid var(--bronze-200); padding:3px 9px; border-radius:6px;}