/* =============================================================
   The site's one footer — every page, written by scripts/footer.js.

   The name and a line about it, then Power-Ups, Free and Resources,
   with the company line below. Self-contained on purpose: it leans on
   no page's own stylesheet, so every colour, font and box rule is
   set here. Its gutters are the house
   ones, 20px and 40px from 768, so it lines up with the page above.
   ============================================================= */
.site-footer {
  --sf-ink: #16243F;
  --sf-body: #4E5A70;
  --sf-muted: #8592A6;
  --sf-line: #D9E2EA;
  --sf-link: #1D4ED8;
  --sf-link-ink: #1E3A8A;
  box-sizing: border-box;
  background: #FFFFFF;
  border-top: 1px solid var(--sf-line);
  padding: 56px 20px 28px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  text-align: left;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer a { text-decoration: none; }
.site-footer p { margin: 0; }

.sf-inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 36px; }
.sf-brand { display: grid; gap: 12px; align-content: start; max-width: 340px; }
.sf-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sf-ink);
}
.sf-name strong { color: #1E3A8A; font-weight: 700; }
.sf-name img { display: block; width: auto; height: 28px; flex-shrink: 0; }
.sf-brand p { font-size: 14.5px; line-height: 1.55; color: var(--sf-body); }
.sf-mail { font-size: 14px; font-weight: 600; color: var(--sf-link); }
.sf-mail:hover { color: var(--sf-link-ink); }

.sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.sf-col { display: grid; gap: 10px; align-content: start; }
.sf-head {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-muted);
  margin-bottom: 2px;
}
.sf-col a { font-size: 14.5px; color: var(--sf-ink); transition: color 0.18s; }
.sf-col a:hover { color: var(--sf-link); }
.site-footer a:focus-visible { outline: 2px solid var(--sf-link); outline-offset: 2px; border-radius: 4px; }

.sf-legal {
  max-width: 1280px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--sf-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sf-muted);
}

@media (min-width: 640px) { .sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .site-footer { padding: 64px 40px 32px; } }
/* The support chat's button sits over the bottom right corner: the company
   line keeps clear of it. */
@media (min-width: 768px) { .sf-legal { padding-right: 64px; } }
@media (min-width: 960px) { .sf-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; } }
@media (prefers-reduced-motion: reduce) { .sf-col a { transition: none; } }