/* Guides, comparisons and feature pages. Sits on styles.css + legal.css. */
.content .crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; font-size: 0.9rem; color: #6b6b69; }
.content .crumbs a { color: inherit; }
.content .crumbs li { list-style: none; }
.content .crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: #b5b3ad; }
.content .crumbs ol { display: contents; }
/* styles.css zeroes paragraph margins; long-form copy needs them back. */
.content p { margin: 0 0 1rem; }
.content ul, .content ol { margin: 0 0 1rem; }
.content .lead { font-size: 1.18rem; color: #3d3d3b; margin: 0 0 2rem; }
.content h3 { font-size: 1.08rem; margin: 1.75rem 0 0.5rem; }
.content figure { margin: 1.75rem 0; }
.content figure img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line, #e6e3dc); }
.content figcaption { font-size: 0.9rem; color: #6b6b69; margin-top: 0.5rem; }

.content .table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line, #e6e3dc); border-radius: 14px; }
.content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 32rem; }
.content th, .content td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line, #e6e3dc); }
.content thead th { background: #f3f1ec; font-weight: 600; }
.content tbody tr:last-child th, .content tbody tr:last-child td { border-bottom: 0; }
.content tbody th { font-weight: 600; }

.content .callout { margin: 2rem 0; padding: 1.1rem 1.25rem; border-radius: 14px; background: #f3f1ec; }
.content .callout > :first-child { margin-top: 0; }
.content .callout > :last-child { margin-bottom: 0; }

.content .cta { margin: 2.5rem 0; padding: 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--line, #e6e3dc); box-shadow: 0 10px 30px #1313130d; }
.content .cta h2 { margin: 0 0 0.5rem; }
.content .cta p { margin: 0 0 1rem; color: #4d4d4b; }
.content .cta .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.content .cta .button { text-decoration: none; }
.content .cta .button + .button { margin-top: 0; }

.content .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line, #e6e3dc); }
.content .related ul { padding: 0; list-style: none; display: grid; gap: 0.5rem; }

@media (max-width: 640px) {
  .content .lead { font-size: 1.08rem; }
  .content .cta { padding: 1.25rem; }
}