/* Site-wide footer (markup: api/_lib/footer.js). Uses each page's color tokens. */
.site-foot {
  container-type: inline-size;
  background: var(--card); border: 0.5px solid var(--line); border-radius: var(--radius, 30px);
  padding: 26px 22px 18px; margin-top: 0;
}
.sf-in { display: grid; grid-template-columns: 1fr; gap: 28px; }
.sf-logo { display: inline-block; }
.sf-logo img { height: 22px; width: auto; display: block; }
[data-theme="light"] .sf-logo img { filter: invert(1); }
.sf-about { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink2); max-width: 460px; }
.sf-cta {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 100px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: opacity 0.15s;
}
.sf-cta svg { width: 14px; height: 14px; }
.sf-cta:hover { opacity: 0.88; }
.sf-h { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-col li { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.sf-col a { color: var(--ink2); text-decoration: none; transition: color 0.15s; }
.sf-col a:hover { color: var(--ink); }
.sf-col a.sf-all { color: var(--ink); font-weight: 600; }
.sf-req dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; line-height: 1.4; }
.sf-req dt { color: var(--ink3); }
.sf-req dd { margin: 0; color: var(--ink2); }
.sf-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 16px; border-top: 0.5px solid var(--line2);
  font-size: 12.5px; color: var(--ink3);
}
.sf-langs { display: inline-flex; gap: 14px; }
.sf-langs a { color: var(--ink2); text-decoration: none; }
.sf-langs a:hover, .sf-langs a[aria-current="true"] { color: var(--ink); }
.sf-langs a[aria-current="true"] { font-weight: 600; }

@container (min-width: 560px) {
  .sf-in { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
  .sf-brand, .sf-bottom { grid-column: 1 / -1; }
}