/* ─── The site footer (src/_partials/footer.html) ─────────────────────────────
   One footer for every page except the two home pages: article and blog pages,
   comparison pages, pricing, help, privacy, terms and 404. Loaded everywhere
   through tokens.css (privacy and terms, which don't use tokens, link it and
   define the same variables inline). Every rule is under .site-foot and uses
   its own sf- class names, so the older footer rules in landing.css and
   landing-v2.css (.foot-grid, footer {}) never reach it. */

footer.site-foot {
  position: relative;
  margin: 0;
  padding: 72px 0 36px;
  background: var(--bg-inset, var(--bg));
  border-top: 1px solid var(--divider);
  font-family: var(--text);
  color: var(--muted);
  text-align: left;
}
.site-foot .sf-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.site-foot a { color: inherit; text-decoration: none; }

.site-foot .sf-top { display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; gap: 48px; }
.site-foot .sf-name {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 18px/1 var(--display); letter-spacing: -.3px; color: var(--ink);
}
.site-foot .sf-name img { display: block; }
.site-foot .sf-brand p { margin: 14px 0 20px; max-width: 24ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.site-foot .sf-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  font: 600 14px/1.2 var(--text);
  background: var(--ink); color: var(--bg);
  transition: transform .2s ease;
}
.site-foot .sf-cta::after { content: "\2192"; }
.site-foot .sf-cta:hover { transform: translateY(-1px); color: var(--bg); }

.site-foot .sf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.site-foot h2 {
  margin: 0 0 12px; padding: 0; border: 0;
  font: 700 12px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.site-foot .sf-col a + h2 { margin-top: 26px; }
.site-foot .sf-col a { display: block; padding: 4px 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.site-foot .sf-col a:hover { color: var(--ink); }

.site-foot .sf-bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--divider);
  font-size: 13px; line-height: 1.5; color: var(--faint);
}
.site-foot .sf-note { margin-right: auto; }
.site-foot .sf-legal { display: flex; gap: 18px; }
.site-foot .sf-legal a:hover { color: var(--ink); }
/* The page's languages (written by the build; on help pages by /scripts/lang.js). */
.site-foot .foot-langs { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; max-width: none; margin: 0; padding: 0; border: 0; font-size: 12.5px; text-align: left; }
.site-foot .foot-langs a { color: var(--faint); }
.site-foot .foot-langs a:hover,
.site-foot .foot-langs [aria-current] { color: var(--ink); }
.site-foot .foot-langs:empty { display: none; }

@media (max-width: 1080px) {
  .site-foot .sf-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .site-foot .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 520px) {
  footer.site-foot { padding-top: 56px; }
  .site-foot .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}