/* Article diagrams use selectable, translated text rather than baked-in labels. */
.landing-shell { overflow-wrap: anywhere; }
.agent-article { overflow-wrap: anywhere; }
.agent-article h3 { margin: 0 0 12px; font-size: 1.15rem; }
.agent-article p { line-height: 1.75; color: var(--landing-text-soft); }
.agent-flow { margin: 0; padding: clamp(20px, 4vw, 48px); border: 1px solid var(--landing-border); border-radius: 24px; background: var(--landing-surface); }
.agent-flow__agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.agent-flow__agent { padding: 20px; border-block-start: 3px solid var(--landing-accent-soft); background: rgba(78, 204, 163, .06); }
.agent-flow strong, .agent-flow span { display: block; }
.agent-flow strong { font-size: 1.12rem; }
.agent-flow span { margin-top: 8px; color: var(--landing-text-soft); line-height: 1.6; }
.agent-flow__connector { text-align: center; color: var(--landing-accent-soft); font-size: 1.8rem; padding: 10px; }
.agent-flow__room, .agent-flow__phone { max-width: 580px; margin-inline: auto; text-align: center; padding: 22px; }
.agent-flow__room { border: 1px solid var(--landing-border-strong); border-radius: 16px; background: rgba(0, 240, 255, .07); }
.agent-flow__room strong { font-size: 1.6rem; }
.agent-flow__phone { padding-block: 6px 22px; }
.agent-flow figcaption, .agent-phone-example figcaption { color: var(--landing-text-soft); line-height: 1.65; font-size: .9rem; }
.agent-flow figcaption { text-align: center; margin: 16px auto 0; max-width: 75ch; }
.agent-telegram { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.agent-instructions { padding-inline-start: 28px; margin: 0; }
.agent-instructions li { padding-inline-start: 10px; margin-bottom: 28px; }
.agent-instructions li::marker { color: var(--landing-accent-soft); font-weight: 800; }
.agent-instructions p { margin: 0; }
.agent-setting-example { display: flex; align-items: start; gap: 12px; padding: 16px; margin-top: 16px; border: 1px solid var(--landing-border); border-radius: 8px; line-height: 1.55; }
.agent-setting-example > span:first-child { color: var(--landing-accent-soft); font-size: 1.5rem; line-height: 1; }
.agent-phone-example { margin: 0; padding: 24px; border-radius: 28px; border: 1px solid var(--landing-border-strong); background: #0c1929; }
.agent-phone-example figcaption { margin-bottom: 18px; }
.agent-phone-example__notification, .agent-phone-example__reply { border-radius: 16px; padding: 20px; background: #172c40; }
.agent-phone-example__service { display: block; color: var(--landing-accent); font-size: .85rem; margin-bottom: 14px; }
.agent-phone-example strong { display: block; line-height: 1.5; }
.agent-phone-example p { margin: 12px 0 0; }
.agent-phone-example__action { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--landing-border); color: var(--landing-accent); text-align: center; }
.agent-phone-example__reply { background: #16352f; }
.agent-article__note { max-width: 85ch; margin: 28px auto 0; padding-inline-start: 20px; border-inline-start: 2px solid var(--landing-accent-soft); font-size: .95rem; }
.agent-prompt { max-width: 900px; margin-inline: auto; padding: clamp(20px, 4vw, 36px); background: var(--landing-surface); border: 1px solid var(--landing-border); border-radius: 16px; }
.agent-prompt blockquote { margin: 18px 0 0; line-height: 1.8; white-space: pre-wrap; user-select: all; }
.agent-environments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.agent-environments article { border-block-start: 1px solid var(--landing-border-strong); padding-top: 24px; }
.agent-article__sources { text-align: center; margin-top: 28px; font-size: .9rem; }
.agent-article__sources a { color: var(--landing-accent); text-underline-offset: 4px; }
.agent-article__sources a:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 4px; }
@media (max-width: 760px) {
    .agent-flow__agents, .agent-environments, .agent-telegram { grid-template-columns: 1fr; }
    .agent-flow__agents { gap: 12px; }
    .agent-flow__agent { padding: 16px; }
    .agent-phone-example { padding: 18px; }
}