/* Single post, article layout — values from the 2026 "Blog Template" design. Shared pieces (crumbs,
   avatar, buttons, cards, FAQ, quotes, tables) are reused by case-study.css. */

.lgx-art {
	--lgx-navy: #19395C;
	--lgx-blue: #369CFB;
	--lgx-link: #006CB3;
	--lgx-red: #C3113C;
	--lgx-ink: #404040;
	--lgx-mute: #6E7072;
	--lgx-line: #E4E7EA;
	--lgx-sky: #EEF6FF;
	display: block;
	background: #fff;
	color: var(--lgx-ink);
	font-family: Manrope, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.lgx-art *, .lgx-art *::before, .lgx-art *::after { box-sizing: border-box; }
/* The site's Additional CSS sets Roboto !important on html, p, h1–h6, a, li; the design is set in Manrope. */
.lgx-art, .lgx-art p, .lgx-art h1, .lgx-art h2, .lgx-art h3, .lgx-art h4, .lgx-art h5, .lgx-art h6, .lgx-art a, .lgx-art li, .lgx-art span, .lgx-art td, .lgx-art th, .lgx-art summary, .lgx-art blockquote, .lgx-art dt, .lgx-art dd { font-family: Manrope, system-ui, sans-serif !important; }
.lgx-art a { color: var(--lgx-link); text-decoration: none; }
.lgx-art a:hover { color: var(--lgx-navy); }
.lgx-art h1, .lgx-art h2, .lgx-art h3, .lgx-art h4 { font-family: inherit; }

/* ---------- hero ---------- */
.lgx-art-hero { padding: 56px 36px 40px; }
.lgx-art-head { max-width: 1000px; margin: 0 auto; }
.lgx-crumbs { margin: 0 0 22px; font-size: 14px; font-weight: 600; color: var(--lgx-mute); display: flex; gap: 8px; flex-wrap: wrap; line-height: 1.5; }
.lgx-art .lgx-crumbs a { color: var(--lgx-link); }
.lgx-art-hero h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--lgx-navy); margin: 0 0 24px; text-wrap: balance; }
.lgx-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14.5px; color: var(--lgx-mute); }
.lgx-byline-who { display: flex; align-items: center; gap: 10px; }
.lgx-byline-name { font-weight: 700; color: var(--lgx-navy); }
.lgx-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--lgx-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.lgx-avatar--lg { width: 52px; height: 52px; font-size: 16px; }
.lgx-cover { max-width: 1240px; margin: 40px auto 0; border-radius: 24px; overflow: hidden; background: #F5F9FE; aspect-ratio: 2000 / 1050; }
.lgx-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- body columns ---------- */
.lgx-art-body { padding: 48px 36px 88px; }
.lgx-art-cols { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
/* base.css sets #page.site to overflow:hidden, which turns off position:sticky for everything inside it;
   clip still cuts off overflow but does not create a scroll container. */
body:has(.lgx-art) #page.site { overflow: clip; }

/* Only the link list scrolls when the TOC is long, so the trial card below it is never cut off. */
.lgx-toc { position: sticky; top: 100px; max-height: calc(100vh - 116px); display: flex; flex-direction: column; }
.lgx-toc-title { flex: 0 0 auto; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #96989A; }
.lgx-toc nav { display: grid; gap: 2px; align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.lgx-toc nav::-webkit-scrollbar { display: none; }
.lgx-toc .lgx-side-card { flex: 0 0 auto; }
.lgx-art .lgx-toc nav a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--lgx-mute); }
.lgx-art .lgx-toc nav a:hover { background: #F3F4F5; color: var(--lgx-navy); }
.lgx-art .lgx-toc nav a.is-active { background: var(--lgx-sky); color: var(--lgx-navy); font-weight: 800; }
.lgx-side-card { margin-top: 24px; background: var(--lgx-navy); border-radius: 14px; padding: 20px; display: grid; gap: 14px; }
.lgx-side-card p { margin: 0; }
.lgx-side-title { font-size: 15px; font-weight: 800; line-height: 1.35; color: #fff; }
.lgx-side-text { font-size: 13.5px; line-height: 1.5; color: #DCE6F0; }
.lgx-art .lgx-side-card a { justify-self: start; background: var(--lgx-blue); color: #fff; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 700; }
.lgx-art .lgx-side-card a:hover { background: #1783E8; color: #fff; }

/* ---------- article text ---------- */
.lgx-a { max-width: 760px; min-width: 0; counter-reset: sec; }
.lgx-a > p, .lgx-a > div > p, .lgx-a li, .lgx-a section > p { font-size: 17.5px; line-height: 1.75; color: var(--lgx-ink); }
.lgx-a p { margin: 0 0 18px; text-wrap: pretty; }
.lgx-a strong, .lgx-a b { font-weight: 800; color: var(--lgx-navy); }
.lgx-a h2 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--lgx-navy); margin: 56px 0 16px; scroll-margin-top: 110px; text-wrap: balance; text-transform: none; }
.lgx-a > h2:first-child { margin-top: 0; }
.lgx-a[data-num="1"] > h2:not(.lgx-faq-h) { counter-increment: sec; }
.lgx-a[data-num="1"] > h2:not(.lgx-faq-h)::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--lgx-blue); }
.lgx-a h3 { font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--lgx-navy); margin: 34px 0 10px; text-transform: none; }
.lgx-a h4, .lgx-a h5, .lgx-a h6 { font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--lgx-navy); margin: 28px 0 8px; text-transform: none; }
.lgx-a ul, .lgx-a ol { font-size: 17.5px; line-height: 1.7; margin: 0 0 22px; padding-left: 26px; color: var(--lgx-ink); }
.lgx-a ul { list-style: disc; }
.lgx-a ol { list-style: decimal; }
.lgx-a li { margin: 0 0 8px; padding-left: 4px; }
.lgx-a li::marker { color: var(--lgx-blue); font-weight: 800; }
.lgx-a li p { margin: 0; }
.lgx-a img { max-width: 100%; height: auto; border-radius: 16px; }
.lgx-a iframe { max-width: 100%; border-radius: 16px; }
.lgx-a .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.lgx-a figure { margin: 28px 0; }
.lgx-a figcaption { margin: 12px 4px 0; font-size: 14px; line-height: 1.55; color: var(--lgx-mute); }

/* Quote (design "Pull quote"). base.css gives every blockquote a border, shadow and quote icons. */
.lgx-a blockquote { position: static; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
.lgx-a blockquote::before, .lgx-a blockquote::after { content: none; display: none; }
.lgx-a blockquote.lgx-quote { margin: 28px 0; padding: 24px 28px; border: 0; border-radius: 18px; background: var(--lgx-sky); font-size: 19px; font-weight: 700; line-height: 1.55; color: var(--lgx-navy); font-style: normal; }
.lgx-a blockquote.lgx-quote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.lgx-a blockquote.lgx-quote p + p { margin-top: 10px; }

/* Numbered pillars (design "About" list). */
.lgx-a ol.lgx-pillars { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-direction: column; }
.lgx-a ol.lgx-pillars > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin: 0; padding: 18px 0; border-top: 1px solid #EDEFF1; align-items: baseline; }
.lgx-a ol.lgx-pillars > li:last-child { border-bottom: 1px solid #EDEFF1; }
.lgx-a ol.lgx-pillars > li::marker { content: none; }
.lgx-a ol.lgx-pillars .lgx-cs-num { font-size: 14px; font-weight: 800; color: var(--lgx-blue); }
.lgx-a ol.lgx-pillars p { margin: 0; font-size: 16px; line-height: 1.6; }
.lgx-a ol.lgx-pillars p.lgx-pillar-h { margin: 0 0 2px; font-size: 19px; font-weight: 800; color: var(--lgx-navy); }
.lgx-a svg:not([width]) { max-width: 48px; max-height: 48px; }

/* Table (design "Comparison table"). */
.lgx-table { margin: 28px 0 24px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--lgx-line); overflow-x: auto; }
.lgx-table table { width: 100%; min-width: 560px; margin: 0; border: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; color: var(--lgx-ink); }
.lgx-table tr { background: #fff; box-shadow: inset 0 -1px 0 #EDEFF1; }
.lgx-table tr:last-child { box-shadow: none; }
.lgx-table th, .lgx-table td { padding: 14px 16px; border: 0; vertical-align: top; text-align: left; }
.lgx-table tr:first-child th, .lgx-table thead th { background: var(--lgx-navy); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lgx-table th strong, .lgx-table th b { color: inherit; font-weight: inherit; }
.lgx-table td:first-child, .lgx-table td:first-child strong { font-weight: 800; color: var(--lgx-navy); }
.lgx-table td p { margin: 0; font-size: inherit; line-height: inherit; }

/* FAQ accordion. */
.lgx-faq { display: grid; gap: 8px; margin: 18px 0 28px; }
.lgx-faq details { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--lgx-line); padding: 0 20px; }
.lgx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--lgx-navy); cursor: pointer; list-style: none; }
.lgx-faq summary::-webkit-details-marker { display: none; }
.lgx-faq-plus { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--lgx-sky); color: var(--lgx-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; line-height: 1; transition: transform .2s; }
.lgx-faq details[open] .lgx-faq-plus { transform: rotate(45deg); }
.lgx-a .lgx-faq details > p, .lgx-a .lgx-faq details li { font-size: 16px; line-height: 1.7; }
.lgx-faq details > :last-child { padding-bottom: 18px; margin-bottom: 0; }

/* Author box and closing CTA. */
.lgx-author { margin: 40px 0 0; display: flex; gap: 18px; align-items: center; padding: 24px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--lgx-line); }
.lgx-a .lgx-author p { margin: 0; }
.lgx-author-name { font-size: 16px; font-weight: 800; color: var(--lgx-navy); }
.lgx-a .lgx-author-role { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #96989A; }
.lgx-cta { margin: 40px 0 0; background: var(--lgx-navy); border-radius: 20px; padding: 32px; }
.lgx-a .lgx-cta > p { margin: 0 0 22px; font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: #fff; }
.lgx-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lgx-art a.lgx-btn { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1.2; padding: 14px 24px; border-radius: 10px; white-space: nowrap; }
.lgx-art a.lgx-btn--red { background: var(--lgx-red); color: #fff; }
.lgx-art a.lgx-btn--red:hover { background: #A00E32; color: #fff; }
.lgx-art a.lgx-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.lgx-art a.lgx-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lgx-art a.lgx-btn--blue { background: var(--lgx-blue); color: #fff; }
.lgx-art a.lgx-btn--blue:hover { background: #1783E8; color: #fff; }
.lgx-art a.lgx-btn--line { color: var(--lgx-navy); box-shadow: inset 0 0 0 1px #9FCFFF; }
.lgx-art a.lgx-btn--line:hover { color: var(--lgx-navy); background: #fff; }

/* ---------- keep reading ---------- */
.lgx-related { padding: 0 36px 88px; max-width: 1312px; margin: 0 auto; }
.lgx-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.lgx-related-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--lgx-navy); line-height: 1.2; }
.lgx-art .lgx-related-head > a { font-size: 14.5px; font-weight: 700; color: var(--lgx-link); }
.lgx-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.lgx-art a.lgx-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--lgx-line); color: var(--lgx-ink); transition: box-shadow .2s; }
.lgx-art a.lgx-card:hover { box-shadow: inset 0 0 0 1px #C9D2DB, 0 14px 32px rgba(25, 57, 92, .10); color: var(--lgx-ink); }
.lgx-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lgx-link); }
.lgx-card-meta span + span { color: #96989A; font-weight: 600; }
.lgx-card h3, .lgx-card-h { display: block; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--lgx-navy); text-wrap: pretty; }
.lgx-card-more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--lgx-link); }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
	.lgx-art-hero, .lgx-art-body, .lgx-related { padding-left: 20px; padding-right: 20px; }
	.lgx-art-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lgx-toc { position: static; max-height: none; order: 2; }
	.lgx-toc-title, .lgx-toc nav { display: none; }
	.lgx-art-hero h1 { font-size: 34px; }
	.lgx-a h2 { font-size: 25px; }
	.lgx-cover { border-radius: 16px; }
}