.article-page { overflow-x: hidden; color: var(--graphite); background: radial-gradient(circle at 88% 4%, rgba(78, 215, 202, .16), transparent 28rem), radial-gradient(circle at 6% 28%, rgba(127, 83, 205, .12), transparent 30rem), #fbfaff; }
.article-page .site-header { background: rgba(251, 250, 255, .86); }
.article-hero { padding: 58px 0 34px; }
.article-hero-inner { width: min(980px, calc(100% - 40px)); max-width: 980px; }
.article-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--purple-deep); font-weight: 800; text-decoration: none; }
.article-category { display: inline-flex; min-height: 34px; align-items: center; padding: 0 14px; border: 1px solid rgba(111, 65, 181, .18); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--purple-deep); font-size: .78rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.theme-b .article-title { width: 100%; max-width: 980px; margin: 18px 0; font-size: clamp(2.35rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; word-break: normal; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; min-width: 0; max-width: 100%; color: #6d6677; font-size: .92rem; }
.article-meta > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.article-hero-media { width: min(700px, calc(100% - 40px)); max-width: 700px; margin: 34px auto 0; padding: 0 24px; text-align: center; }
.article-hero-media img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border: 1px solid rgba(70,46,104,.1); border-radius: 30px; box-shadow: 0 24px 70px rgba(63,42,92,.14); }
.article-hero-media figcaption { margin: 10px auto 0; color: #746c7d; font-size: .86rem; line-height: 1.5; text-align: center; }
.article-layout { padding: 38px 0 72px; }
.article-body { width: min(760px, calc(100% - 40px)); margin: 0 auto; font-size: clamp(1.02rem, 1.5vw, 1.13rem); line-height: 1.78; overflow-wrap: anywhere; }
.article-body > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 { margin: 3.1rem 0 1.05rem; color: var(--graphite); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.16; letter-spacing: -.025em; }
.article-body h3 { margin: 2rem 0 .75rem; color: var(--purple-deep); font-size: 1.17rem; line-height: 1.3; }
.article-body ul, .article-body ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.article-body li { margin: .48rem 0; padding-left: .25rem; }
.article-body strong { color: #2f2639; }
.article-callout { margin: 1.8rem 0; padding: 20px 22px; border: 1px solid rgba(102,68,171,.16); border-left: 4px solid var(--turquoise); border-radius: 8px 20px 20px 8px; background: linear-gradient(135deg, rgba(245,240,255,.92), rgba(232,252,249,.8)); }
.article-body figure { width: min(980px, calc(100vw - 40px)); margin: 2.2rem 0 2.7rem 50%; transform: translateX(-50%); }
.article-body figure img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 16px 44px rgba(57,39,82,.11); }
.article-body figcaption { max-width: 100%; margin-top: 10px; color: #746c7d; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.article-body a { overflow-wrap: anywhere; word-break: break-word; }
.article-body pre, .article-body code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.article-body .example { margin-top: -.65rem; padding: 14px 17px; border-radius: 14px; background: rgba(244,240,251,.76); }
.article-return { display: inline-flex; margin-top: 26px; color: var(--purple-deep); font-weight: 850; text-decoration: none; }
.article-page .final-section { padding-top: 10px; }
.migrated-article .article-body h4 { margin: 1.65rem 0 .65rem; color: var(--graphite); font-size: 1rem; line-height: 1.35; }
.migrated-article .article-body blockquote { margin: 1.8rem 0; padding: 18px 22px; border-left: 4px solid var(--purple); border-radius: 6px 18px 18px 6px; background: rgba(245,240,255,.82); color: var(--graphite); }
.migrated-article .article-body hr { height: 1px; margin: 2.4rem 0; border: 0; background: linear-gradient(90deg, transparent, rgba(112,70,184,.28), transparent); }
.migrated-article .article-body figure img { width: auto; max-width: 100%; margin-inline: auto; }
.migrated-article .article-body .article-external-embed { width: min(620px, calc(100vw - 40px)); }
.migrated-article .article-body .article-external-embed iframe { display: block; width: 100%; min-height: 520px; border: 0; border-radius: 18px; background: rgba(245,240,255,.72); }

/* Structured expert article: AI agents in BotHelp */
.structured-ai-article .article-title,
.structured-expert-article .article-title { color: var(--purple-deep); }
.article-body .structured-article h2 { scroll-margin-top: 104px; color: var(--purple-deep); }
.article-body .structured-article h3 { color: var(--purple-deep); }
.article-body .structured-article strong { color: #392052; }
.article-intro-card { margin: 0 0 2rem; padding: 24px 26px; border-radius: 22px; background: linear-gradient(135deg, #eee7ff 0%, #fff0e8 100%); box-shadow: 0 16px 38px rgba(66, 41, 98, .08); }
.article-intro-card > span,
.expert-note-label,
.article-service-offer > span { display: block; margin-bottom: 9px; color: #d66736; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-intro-card p:last-child,
.expert-note p:last-child,
.agent-card p:last-child,
.niche-card p:last-child { margin-bottom: 0; }
.article-toc { margin: 2.1rem 0 2.6rem; padding: 22px 24px; border: 1px solid rgba(111, 65, 181, .14); border-radius: 20px; background: rgba(255, 255, 255, .78); }
.article-toc > p { margin-bottom: .75rem; color: var(--purple-deep); font-weight: 900; }
.article-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin: 0; padding-left: 1.2rem; }
.article-toc li { margin: 0; }
.article-toc a { color: #5f348f; font-weight: 700; text-decoration-color: rgba(239, 125, 76, .55); text-underline-offset: 3px; }
.expert-note { margin: 1.8rem 0; padding: 21px 23px; border-radius: 20px; }
.expert-note-main { border-left: 4px solid var(--purple); background: linear-gradient(135deg, #eee7ff, #f8f4ff); }
.expert-note-important { border-left: 4px solid #ef7d4c; background: linear-gradient(135deg, #fff0e7, #fff8f3); }
.expert-note-advice { border-left: 4px solid #2bbcaf; background: linear-gradient(135deg, #e9fbf8, #f2edff); }
.feature-list { display: grid; gap: 14px; margin: 1.4rem 0 2.2rem; }
.feature-list > section { padding: 20px 22px; border: 1px solid rgba(111, 65, 181, .12); border-radius: 18px; background: rgba(250, 247, 255, .8); }
.feature-list h3,
.agent-card h3,
.niche-card h3 { margin-top: 0; }
.scenario-steps,
.setup-list { counter-reset: expert-step; display: grid; gap: 10px; padding-left: 0 !important; list-style: none; }
.scenario-steps li,
.setup-list li { position: relative; margin: 0; padding: 14px 16px 14px 48px; border-radius: 15px; background: #f6f1ff; }
.scenario-steps li::before,
.setup-list li::before { counter-increment: expert-step; content: counter(expert-step); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); color: #fff; font-size: .75rem; font-weight: 900; }
.ai-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 2rem 0; padding: 20px; border-radius: 22px; background: linear-gradient(135deg, #efe7ff, #e8fbf8 58%, #fff0e8); }
.ai-flow span { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .9); color: var(--purple-deep); font-size: .84rem; font-weight: 800; text-align: center; box-shadow: 0 7px 18px rgba(64, 39, 93, .07); }
.ai-flow i { color: #ef7d4c; font-style: normal; font-weight: 900; }
.agent-card-grid,
.niche-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.5rem 0 2.2rem; }
.agent-card,
.niche-card { min-width: 0; padding: 20px; border: 1px solid rgba(111, 65, 181, .11); border-radius: 19px; background: #f4efff; }
.agent-card:nth-child(even),
.niche-card:nth-child(even) { background: #fff0e8; }
.agent-fit { padding-top: 12px; border-top: 1px solid rgba(111, 65, 181, .12); font-size: .94em; }
.benefit-list { display: grid; gap: 10px; padding-left: 0 !important; list-style: none; }
.benefit-list li { margin: 0; padding: 14px 16px 14px 42px; border-radius: 15px; background: #f7f3ff; }
.benefit-list li::before { content: '✓'; float: left; margin-left: -27px; color: #d66736; font-weight: 950; }
.article-service-offer { margin-top: 3rem; padding: clamp(26px, 5vw, 42px); border-radius: 26px; background: linear-gradient(135deg, #432067, #7342bd 64%, #188f88); color: #fff; box-shadow: 0 24px 54px rgba(67, 32, 103, .2); text-align: center; }
.article-body .article-service-offer h2 { margin: 0 0 .8rem; color: #fff; }
.article-service-offer p { max-width: 590px; margin-inline: auto; }
.article-service-offer .button { margin-top: 5px; background: #fff; color: var(--purple-deep); text-decoration: none; }

/* Structured expert article: lead magnet guide */
.lead-magnet-article .article-intro-card strong { color: var(--purple-deep); }
.lead-magnet-article .article-prompt { margin: 1.15rem 0 2rem; padding: 22px 24px; border: 1px solid rgba(111, 65, 181, .15); border-left: 4px solid #ef7d4c; border-radius: 8px 20px 20px 8px; background: linear-gradient(135deg, #f4efff, #fff4ed); color: #32263e; font: inherit; font-size: .94em; line-height: 1.65; box-shadow: 0 14px 34px rgba(66, 41, 98, .06); }
.lead-magnet-article .article-prompt code { font: inherit; }
.lead-magnet-article .article-checklist { display: grid; gap: 9px; padding-left: 0; list-style: none; }
.lead-magnet-article .article-checklist li { margin: 0; padding: 12px 15px; border-radius: 14px; background: #f7f3ff; }
.lead-magnet-article .lead-magnet-flow { margin-block: 1.6rem 2rem; }
.lead-magnet-article .article-service-offer ul { max-width: 590px; margin-inline: auto; text-align: left; }
.lead-magnet-article .article-service-offer p,
.lead-magnet-article .article-service-offer li { color: #fff; }
.lead-magnet-article .article-service-offer strong { color: #fff; }
.lead-magnet-article .article-service-offer em { color: rgba(255, 255, 255, .86); }

/* Structured expert article: tripwire guide */
.tripwire-article .article-intro-card strong { color: var(--purple-deep); }
.tripwire-article .tripwire-steps li span { display: block; margin-top: 7px; }
.tripwire-article .tripwire-format-grid h3,
.tripwire-article .tripwire-placement-grid h3,
.tripwire-article .tripwire-errors h3 { font-size: 1rem; }
.tripwire-article .article-service-offer p,
.tripwire-article .article-service-offer li { color: #fff; }
.tripwire-article .article-service-offer strong { color: #fff; }
.tripwire-article .article-service-offer .button { margin-top: 8px; }

@media (max-width: 900px) {
  .article-hero { padding-top: 42px; }
  .theme-b .article-title { font-size: clamp(2.2rem, 8.5vw, 4rem); }
  .article-hero-media { padding: 0 20px; }
}

@media (max-width: 620px) {
  .article-page .container { width: min(1180px, calc(100% - 28px)); }
  .article-hero { padding: 30px 0 20px; }
  .article-hero-inner { width: calc(100% - 28px); }
  .article-back { margin-bottom: 24px; }
  .theme-b .article-title { max-width: 100%; font-size: clamp(1.95rem, 9.2vw, 2.4rem); line-height: 1.06; overflow-wrap: anywhere; }
  .article-hero-media { width: calc(100% - 28px); margin: 24px auto 0; padding: 0; }
  .article-hero-media img, .article-body figure img { border-radius: 18px; }
  .article-layout { padding-top: 28px; }
  .article-body { width: min(100% - 30px, 760px); line-height: 1.68; }
  .article-body h2 { margin-top: 2.45rem; font-size: clamp(1.45rem, 7vw, 1.85rem); line-height: 1.18; overflow-wrap: anywhere; }
  .article-body h3 { font-size: clamp(1.08rem, 5.2vw, 1.22rem); overflow-wrap: anywhere; }
  .article-meta { gap: 8px 16px; line-height: 1.45; }
  .article-body figure { width: calc(100vw - 30px); max-width: calc(100vw - 30px); margin-top: 1.7rem; margin-bottom: 2.1rem; }
  .article-callout { padding: 17px; }
  .article-intro-card,
  .article-toc,
  .expert-note,
  .feature-list > section,
  .agent-card,
  .niche-card { padding: 17px; border-radius: 17px; }
  .article-toc ol,
  .agent-card-grid,
  .niche-grid { grid-template-columns: 1fr; }
  .ai-flow { align-items: stretch; flex-direction: column; padding: 17px; }
  .ai-flow i { transform: rotate(90deg); text-align: center; }
  .ai-flow span { width: 100%; }
  .scenario-steps li,
  .setup-list li { padding: 13px 14px 13px 44px; }
  .article-service-offer { border-radius: 21px; }
  .lead-magnet-article .article-prompt { padding: 17px; font-size: .89em; }
}

@media (max-width: 340px) {
  .theme-b .article-title { font-size: 1.48rem; line-height: 1.1; overflow-wrap: anywhere; }
}