/* SEO plan 2026-11: the CAD landing pages, /compare and the blog. Loaded after tokens.css + site.css (+ landing.css
   on pages that use the lp-body palette). Only these pages load it. */

.cl-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.cl-steps { display: grid; gap: var(--space-3); padding-left: var(--space-6); max-width: 76ch; font-size: 16px; line-height: 26px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.cl-card { padding: var(--space-6) var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.cl-card h3 { font-size: 17px; line-height: 24px; font-weight: 650; }
.cl-card p { color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.cl-note { font-size: 14px !important; }
.cl-prompt { font-size: 14px !important; color: var(--ink) !important; border-left: 2px solid var(--accent); padding-left: var(--space-3); }
.cl-prompt span { font-weight: 650; margin-right: var(--space-1); }
.cl-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.faq-item h3 { font-size: 16px; line-height: 24px; font-weight: 650; margin-bottom: var(--space-2); }
.faq-item p { color: var(--ink-muted); font-size: 15px; line-height: 24px; max-width: 80ch; }
.cmp-table tbody th { width: 28%; }
.cmp-table td:last-child { width: 44%; }

/* Blog */
.bl-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bl-filters a { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--ink-muted); }
.bl-filters a[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.bl-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.bl-card { overflow: hidden; }
.bl-card a { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; padding-bottom: var(--space-6); }
.bl-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.bl-card h2 { font-size: 19px !important; line-height: 26px !important; padding: 0 var(--space-6); }
.bl-card p, .bl-card .bl-meta { padding: 0 var(--space-6); }
.bl-card p { color: var(--ink-muted); font-size: 15px; line-height: 23px; }
.bl-card a:hover h2, .bl-card a:focus-visible h2 { color: var(--accent-ink); }
.bl-meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); letter-spacing: .02em; }
.bl-list { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.bl-date { color: var(--ink-muted); font-size: 13px; margin-left: var(--space-2); }
.bl-rss { font-size: 14px; }
.bl-body { display: grid; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-16); max-width: 820px; }
.bl-video .lp-note { margin-top: var(--space-2); font-size: 13px; }
.bl-prose { font-size: 17px; line-height: 28px; color: var(--ink); }
.bl-prose > * + * { margin-top: var(--space-4); }
.bl-prose h2 { font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -.01em; margin-top: var(--space-12); }
.bl-prose h3 { font-size: 20px; line-height: 28px; font-weight: 650; margin-top: var(--space-8); }
.bl-prose ul, .bl-prose ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.bl-prose code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .9em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
.bl-prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-4); color: var(--ink-muted); }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bl-prose th, .bl-prose td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; }
.bl-fig { margin: var(--space-6) 0; }
.bl-fig img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
.bl-fig figcaption { font-size: 14px; line-height: 21px; color: var(--ink-muted); margin-top: var(--space-2); }
.bl-next { padding: var(--space-6) var(--space-6); display: grid; gap: var(--space-2); }

@media (max-width: 720px) {
    .bl-prose { font-size: 16px; line-height: 26px; }
    .cl-grid, .bl-cards, .cl-videos { grid-template-columns: 1fr; }
}