/* ══════════════════════════════════════════════════════════════════════════
   SHARED SITE FOOTER
   Same story as the header: this lived inline in index.html, so most pages had
   a different footer and three pages (pricing and the two SEO pages) had none
   at all — dead ends with no way back into the site.

   Tokens carry fallbacks so the file renders identically whether the page loads
   the home page's full token set or the smaller one in legal.css.
   ══════════════════════════════════════════════════════════════════════════ */

.footer {
  background: var(--bg, #04080f);
  border-top: 1px solid var(--border, rgba(148, 163, 184, .15));
  padding: 64px 0 36px;
  margin-top: 80px;
}

/* The footer is full-width chrome — one comfortable shell on every page so its
   four columns have room to breathe, the same way the header spans the viewport.
   It is deliberately NOT tied to the page's content width: the legal pages set
   their article to 800px for readable line length, and a footer squeezed to
   match that wraps its columns ("Platform overview" onto two lines). A wide
   footer under narrower article text is the normal, intentional pattern. */
.footer .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.fbrand {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fbrand-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--teal, #0f766e), var(--teal2, #14b8a6));
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fdesc {
  font-size: 14px;
  color: var(--muted, #94a3b8);
  line-height: 1.7;
  max-width: 260px;
}

.fcontact { margin-top: 18px; font-size: 13px; color: var(--muted, #94a3b8); }
.fcontact a { color: var(--teal2, #14b8a6); text-decoration: none; }
.fcontact .ic { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }

.fcol-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin-bottom: 16px;
}

.flinks { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.flinks a { font-size: 14px; color: var(--muted, #94a3b8); text-decoration: none; transition: color .15s; }
.flinks a:hover { color: #fff; }

.fbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, .15));
  font-size: 13px;
  color: var(--muted, #94a3b8);
  flex-wrap: wrap;
  gap: 12px;
}

.fbottom a { color: var(--muted, #94a3b8); text-decoration: none; }
.fbottom a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}