/* ============================================================================
   FOREFITTER — global suite footer (shared across the hub, Ball Lab, Shaft Lab)

   One consistent footer everywhere, matching the home page. Colours and type
   come from forefitter-tokens.css (same pattern as forefitter-bar.css); the
   literals below are only the fallback if that sheet fails to load.
   Served at /shared/forefitter-footer.css; the markup is mirrored inline in each
   site. Cross-app links are absolute so they resolve from any site.
   ========================================================================== */

.ff-foot {
  --f-bg: var(--bg-2, #0d1110);
  --f-line: var(--line, rgba(216, 255, 62, 0.11));
  --f-ink: var(--ink, #eaf0ea);
  --f-dim: var(--ink-dim, #96a099);
  --f-faint: var(--ink-faint, #7d877f);
  --f-volt: var(--volt, #d8ff3e);
  --f-maxw: var(--maxw, 1200px);

  position: relative; z-index: 2;
  border-top: 1px solid var(--f-line);
  margin-top: 90px;
  background: var(--f-bg);
  font-family: var(--sans, 'Hanken Grotesk', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.ff-foot * { box-sizing: border-box; }

.ff-foot__grid {
  max-width: var(--f-maxw); margin: 0 auto; padding: 52px 32px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px;
}

/* brand */
.ff-foot__brandlink { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 14px; }
.ff-foot__emblem { display: block; }
.ff-foot__emblem path, .ff-foot__emblem polygon { fill: var(--f-ink); }
.ff-foot__word { display: block; height: 18px; width: auto; }
.ff-foot__word .wm-fore path { fill: var(--f-ink); }
.ff-foot__word .wm-fitter path { fill: var(--f-volt); }
.ff-foot__tag { color: var(--f-dim); font-size: 0.92rem; max-width: 26em; line-height: 1.55; }

/* columns */
.ff-foot__col h4 {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: var(--fs-label, 0.76rem); letter-spacing: var(--tr-label, 0.16em); text-transform: uppercase;
  color: var(--f-faint); font-weight: 600; margin-bottom: 14px;
}
.ff-foot__col a, .ff-foot__note {
  display: block; font-size: 0.92rem; color: var(--f-dim); margin-bottom: 9px;
  text-decoration: none; transition: color 0.2s ease;
}
.ff-foot__col a:hover { color: var(--f-volt); }
.ff-foot__note { color: var(--f-faint); }

/* bottom bar */
.ff-foot__bottom {
  max-width: var(--f-maxw); margin: 0 auto; padding: 20px 32px 34px;
  border-top: 1px solid var(--f-line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--f-faint);
}
.ff-foot__fine { max-width: 44em; }

@media (max-width: 760px) {
  .ff-foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ff-foot__bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .ff-foot__grid { grid-template-columns: 1fr; }
}