@layer base {

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
ul, ol { padding-left: 1.4em; margin: 0.5em 0; list-style-position: outside; }
html { scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; background-color: var(--bg); }
body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
a { color: var(--text-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
.is-js .reveal > * { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.21, 1); }
.is-js .reveal.is-visible > * { opacity: 1; transform: translateY(0); }
.is-js .reveal.is-visible > :nth-child(1) { transition-delay: 0s; }
.is-js .reveal.is-visible > :nth-child(2) { transition-delay: 0.07s; }
.is-js .reveal.is-visible > :nth-child(3) { transition-delay: 0.14s; }
.is-js .reveal.is-visible > :nth-child(4) { transition-delay: 0.21s; }
.is-js .reveal.is-visible > :nth-child(n+5) { transition-delay: 0.28s; }
.is-js .reveal:not(.is-visible) .kn-service-steps__item, .is-js .reveal:not(.is-visible) .kn-prc__card, .is-js .reveal:not(.is-visible) .kn-vcard, .is-js .reveal:not(.is-visible) .kn-faq__item { opacity: 0; transform: translateY(14px); }
.is-js .reveal.is-visible .kn-service-steps__item, .is-js .reveal.is-visible .kn-prc__card, .is-js .reveal.is-visible .kn-vcard, .is-js .reveal.is-visible .kn-faq__item { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.21, 1); }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(1), .is-js .reveal.is-visible .kn-prc__card:nth-child(1), .is-js .reveal.is-visible .kn-vcard:nth-child(1), .is-js .reveal.is-visible .kn-faq__item:nth-child(1) { transition-delay: 0.05s; }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(2), .is-js .reveal.is-visible .kn-prc__card:nth-child(2), .is-js .reveal.is-visible .kn-vcard:nth-child(2), .is-js .reveal.is-visible .kn-faq__item:nth-child(2) { transition-delay: 0.1s; }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(3), .is-js .reveal.is-visible .kn-prc__card:nth-child(3), .is-js .reveal.is-visible .kn-vcard:nth-child(3), .is-js .reveal.is-visible .kn-faq__item:nth-child(3) { transition-delay: 0.15s; }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(4), .is-js .reveal.is-visible .kn-prc__card:nth-child(4), .is-js .reveal.is-visible .kn-vcard:nth-child(4), .is-js .reveal.is-visible .kn-faq__item:nth-child(4) { transition-delay: 0.2s; }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(5), .is-js .reveal.is-visible .kn-prc__card:nth-child(5), .is-js .reveal.is-visible .kn-vcard:nth-child(5), .is-js .reveal.is-visible .kn-faq__item:nth-child(5) { transition-delay: 0.25s; }
.is-js .reveal.is-visible .kn-service-steps__item:nth-child(n+6), .is-js .reveal.is-visible .kn-prc__card:nth-child(n+6), .is-js .reveal.is-visible .kn-vcard:nth-child(n+6), .is-js .reveal.is-visible .kn-faq__item:nth-child(n+6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .is-js .reveal > *, .is-js .reveal.is-visible .kn-service-steps__item, .is-js .reveal.is-visible .kn-prc__card, .is-js .reveal.is-visible .kn-vcard, .is-js .reveal.is-visible .kn-faq__item { opacity: 1; transform: none; transition: none; }
}

h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); line-height: 1.02; letter-spacing: 0; text-transform: uppercase; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.05; letter-spacing: 0; text-transform: uppercase; }
h3 { font-weight: 600; font-size: var(--text-h3); line-height: 1.25; }
h4 { font-weight: 500; font-size: var(--text-h4); line-height: 1.3; }
h5 { font-weight: 500; font-size: var(--text-h5); line-height: 1.4; }
h6 { font-weight: 500; font-size: var(--text-h6); line-height: 1.4; letter-spacing: 0.05em; }
p { font-weight: 400; font-size: 1rem; line-height: 1.6; }

@media (max-width: 900px) {
  h5 { font-size: 0.875rem; }
  h6 { font-size: 0.75rem; }
  p { font-size: 0.9375rem; }
}

input[type="checkbox"] { accent-color: var(--accent-ink); }

}