/* Site-wide footer for the DropCharge LLC company site. Self-contained and
   namespaced (sf-*) so it looks the same on pages with their own styles
   (/dropcharge, /privacy, /terms, /support) and on company.css pages. */
.sf { background: #0F172A; color: rgba(255, 255, 255, 0.72); padding: 40px 0 32px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9375rem; line-height: 1.5; text-align: left; }
.sf * { box-sizing: border-box; }
.sf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: flex-start; }
.sf-brand { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, 0.72); }
.sf-brand img { width: 20px; height: 20px; border-radius: 4px; display: block; }
.sf-cols { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.sf-h { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: #C7D2FE; }
.sf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sf a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.sf a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sf a:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 3px; border-radius: 4px; }
.sf-tm { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 640px) {
  .sf-wrap { padding: 0 16px; flex-direction: column; gap: 24px; }
  .sf-cols { gap: 20px 40px; }
  .sf ul { gap: 10px; }   /* bigger tap spacing on phones */
}