/* Shared by every page. The footer markup lives in scripts/footer.html and is
   copied into each page by scripts/sync-footer.py — edit those, never a page's
   footer directly. Relies on each page's own :root tokens (--border, --faint,
   --dim, --text, --brand-bright, --ease). Space above the footer stays a
   per-page `footer{margin-top}` rule. */

footer{border-top:1px solid var(--border);padding:54px 0 64px}
.f-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.f-brand{display:flex;align-items:center;gap:11px;font-weight:650;font-size:16px}
.f-brand img{width:24px;height:24px}
.f-note{color:var(--faint);font-size:13px;max-width:40ch;margin-top:14px;line-height:1.6}
.f-cols{display:flex;gap:44px;flex-wrap:wrap}
.f-col h5{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:14px;font-weight:650}
.f-col div{font-size:14px;color:var(--dim);margin-bottom:9px}
.f-col a{color:var(--dim);transition:color .2s}.f-col a:hover{color:var(--text)}
.f-social{display:flex;gap:12px;margin-top:18px}
.f-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--border);color:var(--dim);transition:color .2s,border-color .2s,background .2s}
.f-social a:hover{color:var(--text);border-color:var(--brand-bright);background:rgba(59,158,255,.08)}
.f-social svg{width:17px;height:17px}

/* Directory badges: own left-aligned row above the copyright line, so the
   brand column never widens. One height for every badge (never below 40px on
   desktop); self-hosted except Startup Fame (CSP img-src allows startupfa.me).
   Badges with dark/light artwork use .f-badge + .badge-dark/.badge-light. */
.f-badges{display:flex;align-items:center;flex-wrap:wrap;gap:24px 14px;margin-top:44px}
.f-badges a{display:inline-block;line-height:0;transition:opacity .2s}
.f-badges a:hover{opacity:.8}
.f-badges img{display:block;height:40px;width:auto;max-width:100%}
.f-badges + .copy{margin-top:28px}
/* Badges whose artwork packs small multi-line text (Toolradar) render taller,
   so their text reads at the same size as the one-line badges. */
.f-badges .badge-lg img{height:60px}
@media(max-width:560px){.f-badges{gap:18px 12px}.f-badges img{height:36px}.f-badges .badge-lg img{height:54px}}
.f-badge .badge-light,
[data-theme="light"] .f-badge .badge-dark{display:none}
[data-theme="light"] .f-badge .badge-light{display:block}
.copy{margin-top:44px;font-size:12.5px;color:var(--faint)}

/* Email reveal (footer + homepage FAQ): the address lives base64-encoded in
   data-e; a click waits a short random delay, then swaps in a real mailto
   link. Defeats naive regex-mailto scrapers. Behaviour in shared.js. */
.reveal-email{display:inline-flex;align-items:center;gap:6px;
  background:rgba(59,158,255,.10);border:1px solid rgba(59,158,255,.32);
  color:var(--brand-bright);font:inherit;font-size:.92em;font-weight:600;letter-spacing:-.005em;
  padding:2px 11px;border-radius:999px;cursor:pointer;vertical-align:baseline;line-height:1.55;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.reveal-email::before{content:"";display:inline-block;width:10px;height:10px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>") center/contain no-repeat}
.reveal-email:hover{background:rgba(59,158,255,.18);border-color:rgba(59,158,255,.55)}
.reveal-email[disabled]{cursor:wait;opacity:.75}
.reveal-email .dots{display:inline-flex;gap:2px}
.reveal-email .dots i{width:3px;height:3px;border-radius:50%;background:currentColor;
  animation:dotPulse 1.1s ease-in-out infinite}
.reveal-email .dots i:nth-child(2){animation-delay:.15s}
.reveal-email .dots i:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
.email-revealed{color:var(--brand-bright);text-decoration:underline;
  text-decoration-color:rgba(59,158,255,.4);text-underline-offset:2px;text-decoration-thickness:1px}
.email-revealed:hover{text-decoration-color:var(--brand-bright)}
.f-col .reveal-email{font-size:13px}