/* Styles for the static, indexable pages (/how-it-works/, /am/, ...) and the crawlable pre-render inside index.html.
 * They reuse the tokens of styles.css, so light/dark themes and the navy + emerald brand stay identical. */
.seo-header-inner { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
.seo-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.seo-nav .nav-link { padding: 8px 12px; }
.seo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.seo-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; font-size: .85rem; color: #C5D4DE; }
.seo-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.seo-crumbs a { color: #C5D4DE; text-decoration: underline; text-underline-offset: 2px; }
.seo-section + .seo-section { padding-top: 0; }
.seo-list { padding-inline-start: 1.25rem; display: grid; gap: 8px; margin: 0; }
.seo-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.seo-links p { margin: 6px 0 0; }
.seo-links a { text-decoration: none; }
.steps-grid .step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; margin-bottom: 8px; }
.row { display: flex; align-items: center; } .gap-3 { gap: 12px; } .wrap { flex-wrap: wrap; }
.seo-section h2, .seo-prerender h2 { margin-top: 0; }
details.card summary { cursor: pointer; font-weight: 700; }
.seo-prerender { padding-block: clamp(28px, 6vw, 64px); }
@media (max-width: 640px) { .seo-actions { width: 100%; margin-left: 0; } }