/* The site footer of the server-rendered pages (siteFooter() in site.js, the columns from shared/seo/footer.js):
   a brand block and four short columns of hubs and major tools, then one legal row. Loaded by the footer itself,
   after page.css, so the tokens (--text-*, --border, --accent) are already defined. Phone first, 2 columns. */
.seo-footer.sf { padding: 44px 16px calc(24px + env(safe-area-inset-bottom)); text-align: left; font-size: 0.9375rem; color: var(--text-3); }
.sf__in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.sf__brand { grid-column: 1 / -1; }
.sf__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); }
.seo-footer.sf .sf__logo { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--text-1); }
.sf__tag { margin: 12px 0 0; max-width: 30ch; font-size: 0.9375rem; line-height: 1.5; color: var(--text-3); }
.sf__label { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.sf__col ul { list-style: none; margin: 0; padding: 0; }
.seo-footer.sf a { display: block; padding: 7px 0; font-size: 0.9375rem; line-height: 1.35; color: var(--text-2); text-decoration: none; }
.seo-footer.sf a:hover, .seo-footer.sf a:focus-visible { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.sf__legal { max-width: 1120px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; font-size: 0.8125rem; color: var(--text-3); }
.sf__copy { margin-right: auto; padding: 8px 0; }
.seo-footer.sf .sf__legal a { display: inline-block; padding: 8px 0; font-size: 0.8125rem; color: var(--text-3); }
.seo-footer.sf .sf__legal a:hover, .seo-footer.sf .sf__legal a:focus-visible { color: var(--text-1); }
@media (pointer: coarse) { .seo-footer.sf .sf__col a { padding: 11px 0; } }
@media (min-width: 720px) {
  .seo-footer.sf { padding-top: 56px; }
  .sf__in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
}
@media (min-width: 1000px) {
  .sf__in { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
  .sf__brand { grid-column: auto; }
}