@layer components {

.kn-footer { border-top: 2px solid var(--border-strong); padding: 16px; text-align: center; }
.kn-footer p { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); }
.kn-footer__socials { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.kn-footer__social { display: inline-block; color: var(--text-secondary); transition: color 0.2s; }
.kn-footer__social:hover { color: var(--accent-ink); opacity: 1; }

@media (max-width: 900px) {
  .kn-footer { padding: 24px 20px; }
  .kn-footer__socials { gap: 16px; }
}

}