/* Article pages (blog-ai-agents.dc.html and every article after it): the rules only articles use. The shell, header
   strip, base, reveal, buttons, covers, article rows and closing form come from page-blog-v2.css, unchanged. Everything
   here scopes to .v9 and starts ba-. */

/* ---------- columns: one left edge from the breadcrumb to the end of the article. The reading column is 680px and
   centred; the title and standfirst may run on to 820px, to its right; the cover is centred at 1040px ---------- */
.ba-col{max-width:820px;margin-left:max(0px,calc(50% - 340px))}
.ba-read{max-width:680px;margin:0 auto}
.ba-wide{max-width:1040px;margin:0 auto}

/* ---------- the top: breadcrumb, title, standfirst and byline. The breadcrumb's two links are 44px targets; the topic is
   set in bold ink, as it is in the blog's rows ---------- */
.v9.ba-head{padding:12px 0 48px}
.ba-crumb ol{display:flex;flex-wrap:wrap;align-items:center}
.ba-crumb li{display:flex;align-items:center}
.ba-crumb-sep{margin:0 10px;font-size:14.5px;color:#8E939E}
.v9 .ba-crumb a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;line-height:1.3;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ba-crumb li+li a{font-weight:700;color:#232834}
.v9 .ba-crumb a:hover{color:#d33d5c}
.v9 .ba-crumb a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
/* article titles run long, so the title stays below the service pages' hero headlines (44 to 60px) and balances its lines */
.v9 .ba-title{margin:10px 0 0;font-weight:700;font-size:clamp(32px,calc(2.4vw + 14px),48px);line-height:1.12;letter-spacing:-.025em;color:#232834;text-wrap:balance;overflow-wrap:break-word}
.v9 .ba-sf{margin:20px 0 0;max-width:760px;font-size:clamp(19px,calc(.6vw + 13px),21px);line-height:1.55;color:#3a3f4b}
.v9 .ba-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:24px 0 0;font-size:15px;line-height:1.4;color:#4f5565}
.ba-by-a{font-weight:700;color:#232834}
@media (max-width:767px){
.v9.ba-head{padding:4px 0 36px}
.v9 .ba-sf{margin-top:16px;font-size:18px;line-height:1.6}
.v9 .ba-by{margin-top:20px}
}

/* ---------- the cover: the article's own cover, wider than the reading column. 16:10 on phones, where the drawing fills
   it as in the blog's rows; 2:1 from 768px. Its space is held by aspect-ratio, so nothing moves as it loads. The drawing
   keeps the blog page's size (400px at most), so its 1.75px line reads as it does there and the cover gains bone around
   it ---------- */
.v9 .ba-cv.bl-cv{aspect-ratio:16/10;border-radius:16px}
@media (min-width:768px){.v9 .ba-cv.bl-cv{aspect-ratio:2/1;border-radius:20px}}

/* ---------- In this article: the article's h2s as one wrapping list, under the cover and above the text. Each item is a
   44px target that jumps to its heading ---------- */
.ba-toc{margin:48px 0 0;padding:0 0 18px;border-bottom:1px solid #E4DFD9}
.v9 .ba-toc-h{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.ba-toc-l{display:flex;flex-wrap:wrap;gap:0 28px;margin:6px 0 0}
.v9 .ba-toc-l a{display:inline-flex;align-items:center;min-height:44px;font-size:16.5px;line-height:1.35;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ba-toc-l a:hover{color:#d33d5c;text-decoration-color:#d33d5c}
.v9 .ba-toc-l a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:767px){.ba-toc{margin-top:36px}.ba-toc-l{flex-direction:column;align-items:flex-start}}

/* ---------- the article's text: every part an article may use, so later articles need no new CSS. Paragraphs are 19px
   (18px on phones) at a generous line height, headings are ink with clear space above them, and long words and addresses
   break rather than widen the page ---------- */
.v9.ba{padding-bottom:72px}
.ba-body{padding:48px 0 0;font-size:19px;line-height:1.7;color:#3a3f4b;overflow-wrap:break-word}
.v9 .ba-body>*{margin:0}
.v9 .ba-body>*+*{margin-top:24px}
.v9 .ba-body h2{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.02em;color:#232834;text-wrap:balance;scroll-margin-top:32px}
.v9 .ba-body h3{font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance;scroll-margin-top:32px}
.v9 .ba-body>h2{margin-top:64px}
.v9 .ba-body>h3{margin-top:40px}
.v9 .ba-body>h2+*{margin-top:16px}
.v9 .ba-body>h3+*{margin-top:10px}
.v9 .ba-body>h2+h3{margin-top:28px}
.ba-body h2:focus,.ba-body h3:focus{outline:0}
.v9 .ba-body b,.v9 .ba-body strong{font-weight:700;color:#232834}
/* links: coral and underlined, ink on hover, with a visible focus ring */
.v9 .ba-body a,.v9 .ba-src a{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ba-body a:hover,.v9 .ba-src a:hover{color:#232834}
.v9 .ba-body a:focus-visible,.v9 .ba-src a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
/* lists: ink bullets and numbers; a list inside a list takes open bullets or letters */
.v9 .ba-body li{position:relative;padding-left:30px}
.v9 .ba-body li+li,.v9 .ba-body li>ul,.v9 .ba-body li>ol{margin-top:10px}
.v9 .ba-body ul>li::before{content:"";position:absolute;left:9px;top:calc(.85em - 3px);width:6px;height:6px;border-radius:50%;background:#232834}
.v9 .ba-body li ul>li::before{background:none;box-shadow:inset 0 0 0 1.5px #232834}
.v9 .ba-body ol{counter-reset:ba-ol}
.v9 .ba-body ol>li{counter-increment:ba-ol}
.v9 .ba-body ol>li::before{content:counter(ba-ol) ".";position:absolute;left:0;top:0;font-weight:700;color:#232834;font-variant-numeric:tabular-nums}
.v9 .ba-body li ol>li::before{content:counter(ba-ol,lower-alpha) "."}
/* a quote: larger, in ink, between two hairlines, with the person's name under it. The article's own pull line uses it
   without a name */
.v9 .ba-body .ba-quote{margin:40px 0;padding:30px 0 28px;border-top:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9}
.v9 .ba-quote blockquote{margin:0;padding:0}
.v9 .ba-quote-t{font-weight:500;font-size:25px;line-height:1.45;letter-spacing:-.01em;color:#232834;text-wrap:pretty}
.v9 .ba-quote-by{display:block;margin-top:14px;font-size:15px;line-height:1.5;color:#4f5565}
/* a note: on bone, with no coloured border */
.v9 .ba-body .ba-note{margin:32px 0;padding:22px 26px 24px;border-radius:14px;background:#F1EEEA;font-size:17.5px;line-height:1.65}
.v9 .ba-note-h{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#232834}
.v9 .ba-note p+p{margin-top:6px}
/* code: blocks on bone that scroll inside themselves (never the page), and inline code */
.v9 .ba-body pre{margin:32px 0;padding:20px 24px;border-radius:14px;background:#F1EEEA;overflow-x:auto;overscroll-behavior-x:contain;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;line-height:1.65;color:#232834;white-space:pre;overflow-wrap:normal;word-break:normal;tab-size:2}
.v9 .ba-body code{padding:.12em .38em;border-radius:6px;background:#F1EEEA;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84em;color:#232834;overflow-wrap:anywhere}
.v9 .ba-body pre code{padding:0;border-radius:0;background:none;font-size:inherit;overflow-wrap:normal}
.v9 .ba-body pre:focus-visible,.v9 .ba-body .ba-table:focus-visible{outline:2px solid #232834;outline-offset:2px}
/* tables: hairlines and a header row; on narrow screens the table scrolls sideways inside its own box */
.v9 .ba-body .ba-table{margin:32px 0;overflow-x:auto;overscroll-behavior-x:contain}
.v9 .ba-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;overflow-wrap:normal}
.v9 .ba-table th,.v9 .ba-table td{padding:12px 20px 12px 0;text-align:left;vertical-align:top}
.v9 .ba-table th:last-child,.v9 .ba-table td:last-child{padding-right:0}
.v9 .ba-table th{font-weight:700;color:#232834;border-bottom:1px solid #232834}
.v9 .ba-table td{color:#3a3f4b;border-bottom:1px solid #E4DFD9}
/* a table of three or more columns keeps a readable width and scrolls on phones; two columns simply fit */
.v9 .ba-table table:has(tr>:nth-child(3)){min-width:560px}
.v9 .ba-table caption{caption-side:bottom;padding:12px 0 0;text-align:left;font-size:15px;line-height:1.5;color:#4f5565}
/* figures: the image's space is reserved by its aspect-ratio (set on the image), on bone until it loads */
.v9 .ba-body .ba-fig{margin:40px 0}
.v9 .ba-fig img{display:block;width:100%;height:auto;border-radius:14px;background:#F1EEEA}
.v9 .ba-fig figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:#4f5565}
/* footnote markers: small coral numbers, each linked to its source, with a larger hit area than they show */
.v9 .ba-body sup{font-size:.68em;line-height:0;vertical-align:super}
.v9 .ba-body a.ba-fn{position:relative;padding:0 2px;font-weight:700;text-decoration:none;scroll-margin-top:96px}
.ba-fn::after{content:"";position:absolute;left:-8px;right:-8px;top:-14px;bottom:-14px}
.v9 .ba-body>:first-child{margin-top:0}

/* ---------- Sources: shown only when the article cites anything. Each source links back to its marker in the text ---------- */
.ba-src{margin:56px 0 0;padding:28px 0 0;border-top:1px solid #E4DFD9}
.v9 .ba-src-h{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.ba-src ol{margin:16px 0 0;counter-reset:ba-src}
.v9 .ba-src li{position:relative;padding-left:30px;font-size:16px;line-height:1.6;color:#3a3f4b;overflow-wrap:anywhere;counter-increment:ba-src;scroll-margin-top:32px}
.v9 .ba-src li+li{margin-top:12px}
.v9 .ba-src li::before{content:counter(ba-src) ".";position:absolute;left:0;top:0;font-weight:700;color:#232834}
.v9 .ba-src li:target{background:#F1EEEA;box-shadow:0 0 0 8px #F1EEEA;border-radius:2px}
.v9 .ba-src a.ba-back{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px 0 -6px 2px;vertical-align:middle;border-radius:50%;text-decoration:none}
.v9 .ba-back svg{width:15px;height:15px;stroke-width:2}
.ba-back::after{content:"";position:absolute;inset:-6px}
@media (hover:hover){.v9 .ba-src a.ba-back:hover{background:#E4DFD9;color:#d33d5c}}

@media (max-width:767px){
.ba-body{padding-top:36px;font-size:18px}
.v9 .ba-body h2{font-size:25px}
.v9 .ba-body h3{font-size:19.5px}
.v9 .ba-body>h2{margin-top:52px}
.v9 .ba-body>h3{margin-top:32px}
.v9 .ba-quote-t{font-size:21px}
.v9 .ba-body .ba-note{padding:18px 20px 20px;font-size:17px}
.v9 .ba-body pre{padding:16px 18px}
.ba-src{margin-top:44px}
.v9.ba{padding-bottom:56px}
}

/* ---------- Share: under the article, LinkedIn and Copy link as 44px outline pills in the topic buttons' style. No counts
   and no other networks. Copy link copies the canonical address and says "Link copied" for two seconds ---------- */
.ba-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid #E4DFD9}
.v9 .ba-share-h{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.ba-share-l{display:flex;flex-wrap:wrap;gap:10px}
.v9 .ba-pill{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:132px;min-height:44px;margin:0;padding:0 20px;border:1.5px solid #E4DFD9;border-radius:9999px;background:#fff;color:#232834;font:inherit;font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.v9 a.ba-pill:hover,.v9 a.ba-pill:visited{color:#232834}
@media (hover:hover){.v9 .ba-pill:hover{border-color:#C2C5CC}}
.v9 .ba-pill[data-done="true"]{border-color:#232834}
.v9 .ba-pill:focus-visible{outline:2px solid #232834;outline-offset:2px}

/* ---------- after the article: Read next (the blog's rows: up to three other real articles, the same topic first), All
   articles and the related service. Until there is another article, only All articles and the related service show, on
   one line under a hairline ---------- */
.v9.ba-end{padding:0 0 96px}
.ba-next-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:0 0 14px}
.v9 .ba-next-h{font-weight:700;font-size:clamp(24px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;color:#232834}
.v9 .ba-more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15.5px;line-height:1.3;color:#232834;transition:color .2s cubic-bezier(.65,0,.35,1)}
.ba-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px;padding:10px 0;border-top:1px solid #E4DFD9}
.ba-next+.ba-links{border-top:0}
.ba-links:not(:has(*)){display:none}
.v9 .ba-svc{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:15.5px;line-height:1.3;color:#4f5565}
.v9 .ba-svc a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-weight:700;color:#232834;transition:color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ba-more:hover,.v9 .ba-svc a:hover{color:#d33d5c}
.v9 .ba-more:focus-visible,.v9 .ba-svc a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:767px){.v9.ba-end{padding-bottom:72px}.ba-links{flex-direction:column;align-items:flex-start}}