/* ============================================================================
   Mihu AI — Blog post: "Just Tell It What You Need — Meet the Mihu Assistant"
   Page-specific (content) styles only. The header, mega-menu, language
   dropdown and footer come from the SAME stylesheets index.html uses
   (/css/shared/s-7b769d0663.css + /css/shared/s-ef39ab5d25.css), so the
   chrome is identical to the homepage. We inherit the site accent
   (--bronze-*), neutrals (--gray-*) and --white from those, and define only
   the tokens they don't provide.
   ============================================================================ */

/* index.html's header is position:fixed and its homepage hero sits under it.
   Blog content needs to clear the fixed header, so offset the body. */
body{padding-top:80px;}
/* index's header is transparent at the top (it overlays the homepage hero). On a
   content page that lets the breadcrumb/article show through the fixed bar, so make
   it opaque always — matching the other blog posts. */
#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);}

:root{
  --bronze-50:#f5f7ff;
  --violet-600:#6d5bd0; --violet-500:#8775e0; --violet-100:#ece8fb; --violet-50:#f5f3fd;
  --emerald:#2f9e72; --emerald-bg:#e7f5ee;
  --radius:16px; --radius-sm:10px; --maxw:1180px; --narrow:760px;
}

.container-narrow{max-width:var(--narrow); margin:0 auto; padding:0 24px;}

/* ---- 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-category .beta{background:var(--violet-100); color:var(--violet-600); padding:2px 8px; border-radius:6px; font-size:11px; letter-spacing:.06em;}
.blog-category.launch{background:linear-gradient(135deg,var(--violet-100),var(--bronze-100)); color:var(--violet-600);}
.launch-banner{display:flex; align-items:center; gap:16px; background:var(--violet-50); border:1px solid var(--violet-100);
  border-radius:var(--radius); padding:16px 20px; margin:8px 0 4px; max-width:64ch;}
.launch-banner .lb-num{font-family:"DM Serif Display",serif; font-size:30px; line-height:1; color:var(--violet-600);
  background:#fff; border:1px solid var(--violet-100); border-radius:12px; width:54px; height:54px; display:grid; place-items:center; flex-shrink:0;}
.launch-banner div{font-size:15px; color:var(--gray-700); line-height:1.55;}
.launch-banner strong{color:var(--gray-900);}
.launch-banner a{color:var(--violet-600); font-weight:700;}

/* ---- Automation rules ---- */
.rules{display:flex; flex-direction:column; gap:12px; margin:24px 0;}
.rule{display:flex; align-items:stretch; gap:0; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden; background:#fff;}
.rule-when,.rule-then{padding:16px 18px; flex:1; display:flex; flex-direction:column; gap:6px;}
.rule-when{background:var(--gray-100); border-right:1px solid var(--gray-200);}
.rule .tag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; width:fit-content; padding:3px 9px; border-radius:6px;}
.rule .tag.when{background:var(--bronze-100); color:var(--bronze-700);}
.rule .tag.then{background:var(--violet-100); color:var(--violet-600);}
.rule p{margin:0; font-size:15px; color:var(--gray-800);}
.rule .rule-arrow{display:grid; place-items:center; padding:0 4px; color:var(--violet-500); background:#fff;}
.rule .rule-arrow svg{width:20px; height:20px;}
@media(max-width:600px){.rule{flex-direction:column;} .rule-when{border-right:none; border-bottom:1px solid var(--gray-200);} .rule .rule-arrow{transform:rotate(90deg); padding:6px 0;}}

/* ---- Integration chips ---- */
.integrations-row{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0;}
.int-chip{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--gray-700);
  background:#fff; border:1px solid var(--gray-200); border-radius:999px; padding:9px 16px;}
.int-chip .d{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.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:18ch;}
.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: app mockup ---- */
.blog-featured-image{padding:30px 0 6px;}
.featured-wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.app-mock{border:1px solid var(--gray-200); border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 40px 90px -50px rgba(35,30,60,.55);}
.app-top{display:flex; align-items:center; justify-content:center; gap:10px; padding:14px;
  background:linear-gradient(180deg,var(--violet-50),#fff); border-bottom:1px solid var(--gray-200);}
.app-pill{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--gray-800);
  background:#fff; border:1px solid var(--violet-100); padding:8px 16px; border-radius:999px;}
.app-pill .spark{color:var(--violet-500);}
.app-pill .beta{background:var(--gray-100); color:var(--gray-500); font-size:10px; font-weight:800; letter-spacing:.08em; padding:2px 7px; border-radius:5px;}
.app-stage{padding:30px 26px 24px; background:linear-gradient(180deg,#fff,var(--gray-100));}
.app-greet{text-align:center; margin-bottom:22px;}
.app-greet h3{font-family:"DM Serif Display",serif; font-weight:400; font-size:26px; color:var(--gray-900); margin:0 0 6px;}
.app-greet p{margin:0; color:var(--gray-500); font-size:15px;}
.app-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:760px; margin:0 auto;}
.app-card{background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px; text-align:left;}
.app-card .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; margin-bottom:10px;}
.app-card .ico svg{width:18px; height:18px;}
.ico.wa{background:var(--emerald-bg);} .ico.wa svg{stroke:var(--emerald);}
.ico.task{background:var(--violet-100);} .ico.task svg{stroke:var(--violet-600);}
.ico.camp{background:var(--bronze-100);} .ico.camp svg{stroke:var(--bronze-600);}
.ico.kb{background:#fdeede;} .ico.kb svg{stroke:#c97d22;}
.ico.rep{background:#e6eefb;} .ico.rep svg{stroke:#3a6dd6;}
.ico.cont{background:#f0e9fb;} .ico.cont svg{stroke:var(--violet-600);}
.app-card h4{margin:0 0 3px; font-size:14.5px; color:var(--gray-900);}
.app-card p{margin:0 0 8px; font-size:12.5px; color:var(--gray-500); line-height:1.45;}
.app-card .start{font-size:12.5px; font-weight:700; color:var(--bronze-600);}
.app-input{display:flex; align-items:center; gap:10px; max-width:760px; margin:20px auto 0;
  background:#fff; border:1px solid var(--gray-300); border-radius:14px; padding:13px 16px;}
.app-input span{color:var(--gray-400); font-size:14.5px; flex:1;}
.app-input .send{width:34px; height:34px; border-radius:10px; background:var(--violet-600); display:grid; place-items:center;}
.app-input .send svg{width:16px; height:16px; stroke:#fff;}
@media(max-width:680px){.app-cards{grid-template-columns:1fr;}}

/* ---- 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:100px;}
.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 a{color:var(--bronze-600); font-weight:600;}
.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);}

/* ---- Capability grid ---- */
.caps{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:26px 0;}
.cap{border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px; background:#fff;}
.cap-ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--bronze-100); margin-bottom:13px;}
.cap-ico svg{width:21px; height:21px; stroke:var(--bronze-600);}
.cap h3{margin:0 0 6px; font-size:17px;}
.cap p{font-size:15px; margin:0; color:var(--gray-600);}
@media(max-width:680px){.caps{grid-template-columns:1fr;}}

/* ---- Chat demo ---- */
.chat{border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; margin:26px 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(--violet-500);}
.chat-body{padding:18px;}
.bubble{max-width:86%; 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(--violet-50); border:1px solid var(--violet-100); color:var(--gray-800); border-bottom-left-radius:4px;}
.bubble.ai .did{display:block; margin-top:7px; font-size:13px; color:var(--violet-600); font-weight:700;}

/* ---- Quick actions list ---- */
.qa{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:24px 0;}
.qa-item{display:flex; align-items:center; gap:12px; border:1px solid var(--gray-200); border-radius:12px; padding:14px 16px; background:#fff;}
.qa-item .q-ico{width:34px; height:34px; border-radius:9px; background:var(--violet-100); display:grid; place-items:center; flex-shrink:0;}
.qa-item .q-ico svg{width:17px; height:17px; stroke:var(--violet-600);}
.qa-item b{display:block; font-size:14.5px; color:var(--gray-900);}
.qa-item span{font-size:13px; color:var(--gray-500);}
@media(max-width:600px){.qa{grid-template-columns:1fr;}}

/* ---- Compare ---- */
.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;}
.compare-card.inside{background:linear-gradient(180deg,var(--violet-50),#fff 60%); border-color:var(--violet-100);}
.compare-card.outside{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;}}

/* ---- Image figure / slot ---- */
.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:22px 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:48ch;}
.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;}

/* ---- 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;}
.faq-a a{color:var(--bronze-600); font-weight:600;}

/* ---- CTA ---- */
.cta{background:linear-gradient(150deg,var(--gray-900),#251f33); 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(109,91,208,.4), 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-primary{background:var(--violet-500); color:#fff; border-color:transparent; position:relative;}
.cta .btn-primary:hover{background:var(--violet-600); color:#fff; border-color:transparent;}
.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;}

/* ---- Related articles ---- */
.related-section{padding:72px 0; background:var(--gray-50); border-top:1px solid var(--gray-200);}
.related-header{text-align:center; margin-bottom:44px;}
.related-title{font-family:"DM Serif Display",serif; font-weight:400; font-size:30px; color:var(--gray-900); margin:0 0 8px;}
.related-subtitle{font-size:15px; color:var(--gray-500); margin:0;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.related-card{display:block; background:var(--white); border:1px solid var(--gray-200); border-radius:16px; overflow:hidden; text-decoration:none; transition:transform .25s, box-shadow .25s;}
.related-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(15,23,42,.10);}
.related-card-image{height:150px; display:flex; align-items:center; justify-content:center;}
.related-card-icon{width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px;}
.related-card-icon.bronze{background:linear-gradient(135deg,var(--bronze-500),var(--bronze-700)); color:#fff;}
.related-card-icon.emerald{background:linear-gradient(135deg,var(--emerald),#059669); color:#fff;}
.related-card-icon.blue{background:linear-gradient(135deg,var(--blue),#2563eb); color:#fff;}
.related-card-body{padding:22px;}
.related-card-category{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--bronze-600); margin-bottom:9px;}
.related-card-title{font-size:17px; font-weight:700; color:var(--gray-900); line-height:1.4; margin:0 0 10px;}
.related-card-meta{font-size:13px; color:var(--gray-500);}
@media(max-width:880px){.related-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.related-grid{grid-template-columns:1fr;} .related-section{padding:52px 0;}}

/* ---- RTL tweaks (ar / he) ---- */
[dir="rtl"] .related-header,[dir="rtl"] .related-card-body{text-align:right;}
[dir="rtl"] .rule-when{border-right:none; border-left:1px solid var(--gray-200);}
[dir="rtl"] .rule .rule-arrow svg{transform:scaleX(-1);}
[dir="rtl"] .bubble.user{margin-left:0; margin-right:auto; border-bottom-right-radius:14px; border-bottom-left-radius:4px;}
[dir="rtl"] .bubble.ai{border-bottom-left-radius:14px; border-bottom-right-radius:4px;}
[dir="rtl"] .blog-title,[dir="rtl"] .blog-excerpt,[dir="rtl"] .article-body{text-align:right;}