/* The site footer (home, cities and the invite page). It carries its own colours and type, so it reads the same
   under styles.css and under the invite page's m.css. */
.sitefoot {
  --sf-paper: #f2f0ea; --sf-ink: #101014; --sf-ash: #8c8c96; --sf-lime: #c6ff3d;
  display: grid; justify-items: center; gap: 26px;
  margin-top: 72px; padding: 56px 20px 16px; text-align: center;
  border-top: 2px dashed rgba(242, 240, 234, 0.22);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}
.sitefoot__mark {
  font-family: "Unbounded", "Arial Black", sans-serif; font-weight: 800; font-size: clamp(34px, 9vw, 52px);
  line-height: 1; letter-spacing: -0.08em; text-decoration: none; text-transform: none; color: var(--sf-paper);
}
.sitefoot__mark span { color: var(--sf-lime); }

.sitefoot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sitefoot__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  color: var(--sf-ink); background: var(--sf-paper); border: 2px solid var(--sf-paper); border-radius: 999px;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms, border-color 150ms;
}
.sitefoot__btn svg { flex: none; }
.sitefoot__btn--ghost { color: var(--sf-paper); background: rgba(242, 240, 234, 0.08); border-color: rgba(242, 240, 234, 0.4); }
.sitefoot__btn:hover { transform: translateY(-2px); background: var(--sf-lime); border-color: var(--sf-lime); color: var(--sf-ink); }
.sitefoot__btn:active { transform: translateY(0); }

.sitefoot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.sitefoot__links a, .sitefoot__app {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--sf-paper);
}
.sitefoot__links a:hover { color: var(--sf-lime); }
.sitefoot__app { gap: 8px; font-size: 18px; font-weight: 700; color: var(--sf-lime); }
.sitefoot__app svg { transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
.sitefoot__app:hover svg { transform: translate(2px, -2px); }
.sitefoot__social { display: flex; justify-content: center; gap: 18px; }
.sitefoot__social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--sf-paper); transition: color 150ms, transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }
.sitefoot__social a:hover { color: var(--sf-lime); transform: translateY(-2px); }
.sitefoot :focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; border-radius: 4px; }

.sitefoot__copy {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sf-ash);
}

@media (prefers-reduced-motion: reduce) { .sitefoot__btn, .sitefoot__app svg { transition: none; } }