@layer components {

.kn-btn--primary-dark { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; border-radius: 0; background: var(--border-strong); color: #FFFFFF; border: 2px solid var(--border-strong); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.kn-btn--primary-dark::after { content: "→"; font-size: 1em; line-height: 1; }
.kn-btn--primary-dark:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.kn-btn--secondary-dark { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; border-radius: 0; background: transparent; color: var(--text-primary); border: 2px solid var(--border-strong); cursor: pointer; text-decoration: none; display: inline-block; }
.kn-btn--secondary-dark:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

@media (max-width: 900px) {
  .kn-btn--primary-dark, .kn-btn--secondary-dark { width: 100%; text-align: center; }
}

}