/*
 * Listicle v2 (Claude Design layout). Layout and type live in inline styles copied from design/source.html;
 * this file only (1) resets theme globals so the inline values render as in the design, (2) styles the
 * verbatim article HTML coming from the old post_content, and (3) adds the responsive rules the design lacks.
 */

/* 1. Resets: the design is authored with content-box sizing and browser-default heading/body metrics. */
.lx2, .lx2 *, .lx2 *::before, .lx2 *::after { box-sizing: content-box; }
.lx2 button, .lx2 input, .lx2 select, .lx2 textarea { box-sizing: border-box; }
.lx2 { font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: normal; overflow-x: clip; }
.lx2 h1, .lx2 h2, .lx2 h3, .lx2 h4, .lx2 h5, .lx2 h6 { font-family: inherit; color: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; font-weight: 700; }
.lx2 h1 { font-size: 2em; }
.lx2 h2 { font-size: 1.5em; }
.lx2 h3 { font-size: 1.17em; }
.lx2 h4 { font-size: 1em; }
.lx2 img { max-width: 100%; filter: none; }
.lx2 a { color: #141414; text-decoration: underline; text-decoration-color: #d43a2f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lx2 a:hover { color: #d43a2f; }
.lx2 button { margin: 0; line-height: normal; letter-spacing: normal; text-transform: none; border-radius: 0; box-shadow: none; min-height: 0; }
.lx2 [hidden] { display: none !important; }
.lx2 [id^="t"] { scroll-margin-top: 24px; }

/* 2. Verbatim article HTML (sections, intro, methodology): design body type. */
.lx2-prose p { margin: 0 0 22px; text-wrap: pretty; }
.lx2-prose strong, .lx2-prose b { font-weight: 600; color: #141414; }
.lx2-prose a strong, .lx2-prose strong a { color: inherit; }
.lx2-prose ul, .lx2-prose ol { margin: 0 0 22px; padding-left: 22px; }
.lx2-prose li { margin: 0 0 8px; padding-left: 4px; }
.lx2-prose li::marker { color: #d43a2f; }
.lx2-prose h3 { font-family: Archivo, sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -.4px; line-height: 1.2; margin: 32px 0 12px; color: #141414; }
.lx2-prose h4 { font-family: Archivo, sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -.2px; line-height: 1.3; margin: 24px 0 10px; color: #141414; }
.lx2-prose blockquote { margin: 0 0 22px; padding: 2px 0 2px 18px; border-left: 2px solid #d43a2f; color: #4a4a46; }
.lx2-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; line-height: 1.5; }
.lx2-prose th, .lx2-prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid #e4e4e0; }
.lx2-prose th { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px; font-weight: 500; text-transform: uppercase; color: #6b6b66; }
.lx2-prose .sp-table-scroll, .lx2-prose .ds-table-wrapper { overflow-x: auto; }
.lx2-prose > :last-child { margin-bottom: 22px; }
/* Old pipeline inline styles inside the mapped HTML (p margins/line-height, h3 scroll offsets, orange links). */
.lx2-prose p[style] { margin: 0 0 22px !important; line-height: inherit !important; }
.lx2-prose h3[style] { margin: 32px 0 12px !important; scroll-margin-top: 24px !important; }
.lx2 a[style*="e8603c"] { color: inherit !important; font-weight: 600 !important; }
.lx2-prose a[style], .lx2-answer a[style] { color: #141414 !important; font-weight: 600 !important; }
.lx2-prose a[style]:hover, .lx2 a[style*="e8603c"]:hover { color: #d43a2f !important; }
.lx2-answer strong { font-weight: 600; }
.lx2-prose hr { border: 0; border-top: 1px solid #e4e4e0; height: 0; margin: 32px 0; }
.lx2-prose caption { caption-side: top; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #d43a2f; padding: 0 0 10px; }
.lx2-prose .ds-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.lx2-prose .ds-table-wrap table { margin: 0; min-width: 520px; }
.lx2-prose .ds-methodology { background: #f4f4f1; border: 1px solid #e4e4e0; padding: 16px 20px; margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: #4a4a46; }
.lx2-prose .ds-methodology p { margin: 0 0 10px !important; }
.lx2-prose .ds-methodology > :last-child { margin-bottom: 0 !important; }
.lx2-faq-a > :last-child, .lx2-faq-a p:last-child { margin-bottom: 18px !important; }
.lx2-method p:last-child, .lx2-method > :last-child { margin-bottom: 0; }

/* Vendor bodies, closing CTA body, disclaimer (verbatim HTML). */
.lx2-vbody p { margin: 0 0 12px; }
.lx2-vbody p:last-child, .lx2-vbody > :last-child { margin-bottom: 0; }
.lx2-vbody-dark strong { color: #ffffff; font-weight: 500; }
.lx2-vbody-dark a { color: #ffffff; }
.lx2-vprose p { margin: 0; }
.lx2-disc p { margin: 0 0 12px; }
.lx2-disc p:last-child { margin-bottom: 0; }
.lx2-disc strong { font-weight: 500; color: #4a4a46; }
.lx2-disc a { color: #6b6b66; }

/* The page's own comparison table, styled as the design table (Delancey column highlighted). */
.lx2-ctable table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13.5px; line-height: 1.5; font-weight: 300; color: #4a4a46; }
.lx2-ctable th { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px; font-weight: 400; color: #6b6b66; text-align: left; text-transform: uppercase; padding: 14px 12px 10px; border-bottom: 1px solid #e4e4e0; }
.lx2-ctable td { padding: 12px; border-bottom: 1px solid #e4e4e0; vertical-align: top; }
.lx2-ctable th:first-child, .lx2-ctable td:first-child { padding-left: 0; font-weight: 500; color: #141414; width: 22%; }
.lx2-ctable td:first-child strong { font-weight: 500; }
.lx2-ctable th:nth-child(2), .lx2-ctable td:nth-child(2) { background: #f4f4f1; color: #141414; font-weight: 400; }
.lx2-ctable th:nth-child(2) { font-weight: 500; }

/* Smith.ai chat bubble (MCA pages) sits bottom right: keep the floating CTA clear of it. */
body:has(#smithChatWidget) .lx2 .lx2-float { right: 140px !important; }

/* 3. Responsive: the design ships desktop-only grids. */
@media (max-width: 900px) {
	.lx2 .lx2-hero-grid,
	.lx2 .lx2-sa-grid,
	.lx2 .lx2-art-grid,
	.lx2 .lx2-ds-inner,
	.lx2 .lx2-match-grid,
	.lx2 .lx2-close-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.lx2 .lx2-hero-grid { align-items: start !important; }
	.lx2 .lx2-sa-pick { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid #e4e4e0; padding-top: 24px; }
	.lx2 .lx2-ds-contact,
	.lx2 .lx2-match-right,
	.lx2 .lx2-close-right { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid #33332f; padding-top: 24px; }
	/* Rail: TOC above the article, checklist + Delancey card below it. */
	.lx2 .lx2-rail { display: contents !important; }
	.lx2 .lx2-rail-toc { order: 1; }
	.lx2 .lx2-article { order: 2; }
	.lx2 .lx2-rail-check { order: 3; }
	.lx2 .lx2-rail-card { order: 4; position: static !important; margin-top: 0 !important; }
}
@media (max-width: 700px) {
	.lx2 .lx2-num h2 { line-height: 1.25 !important; }
	.lx2 .lx2-vendors,
	.lx2 .lx2-why { grid-template-columns: minmax(0, 1fr) !important; }
	.lx2 .lx2-why > div { padding-left: 0 !important; padding-right: 0 !important; }
	.lx2 .lx2-related { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 520px) {
	.lx2 .lx2-strip { grid-template-columns: minmax(0, 1fr) !important; }
	.lx2 .lx2-strip a { justify-self: start; }
	.lx2 .lx2-float { left: 12px; right: 12px !important; bottom: 12px !important; justify-content: center; padding: 12px 14px !important; gap: 12px !important; }
	body:has(#smithChatWidget) .lx2 .lx2-float { right: auto !important; bottom: 25px !important; }
	body:has(#smithChatWidget) .lx2 .lx2-float > :not(:first-child) { display: none; }
}

/* Mobile call bar (Max, Oct 23 2026): full-width, pinned to the bottom, replaces the floating CTA under 700px.
   The Smith.ai chat bubble is lifted above it; the page gets bottom padding so the footer is not covered. */
@media (max-width: 700px) {
	.lx2 .lx2-float { display: none !important; }
	.lx2 .lx2-callbar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; height: 56px; align-items: center; justify-content: center; gap: 10px; background: #141414; color: #ffffff; text-decoration: none; font-family: Archivo, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -.2px; border-top: 2px solid #d43a2f; padding: 0 16px env(safe-area-inset-bottom); }
	.lx2 .lx2-callbar:hover { color: #ffffff; }
	.lx2 .lx2-callbar-num { font-weight: 300; }
	.lx2 { padding-bottom: 56px; }
	#smithChatWidget, #smithChatWidget > * { bottom: 68px !important; }
}