/* Programmatic pages (seo/, src/seo/render.js): the blocks vs/vs.css doesn't draw. Section
   bodies, link lists, tag chips, facts, timelines and formulas, on vs.css's tokens. */
.lede p { margin: 0 0 12px; }
.lede p:last-child { margin-bottom: 0; }
.lede a { color: inherit; text-underline-offset: 3px; }

.prose { max-width: 720px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose h3 { margin: 24px 0 10px; font: 700 23px/1.15 var(--display); }
.prose a, .faq a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.formula code { display: inline-block; padding: 10px 14px; border-radius: 14px; background: var(--wash); font: 600 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }

/* vs.css sizes the comparison table's three columns; these tables have their own count. */
.table th[scope="row"], .table td { width: auto; }
.table small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }

.fit p { margin: 0 0 10px; }
.fit h4 { margin: 14px 0 8px; font: 600 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fit .cons li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.steps li { font-size: 16px; }

.links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.links a { font-weight: 600; color: var(--accent); text-underline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
/* Inside a .fit card, vs.css draws every li as a checked row; chips are only chips. */
.fit .chips li { display: block; }
.fit .chips li::before { content: none; }
.chips li { padding: 4px 10px; border-radius: 999px; background: var(--wash); font: 600 13px/1.3 var(--body); }
.filters { display: grid; gap: 14px; }
.filters b { font: 700 19px/1.2 var(--display); }

.facts { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 12px 20px; max-width: 820px; margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--muted); }

.timeline { display: grid; gap: 12px; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--line); list-style: none; max-width: 720px; }
.timeline time { display: block; font: 700 17px/1.2 var(--display); color: var(--accent); }
.timeline a { color: var(--accent); font-size: 14.5px; }

@media (max-width: 760px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts dd { margin-bottom: 10px; }
}