@layer components {

.kn-service-intro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 32px;
}
.kn-service-intro::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 1px;
  background: var(--border);
}

.kn-service-intro--cols-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.kn-service-intro--cols-4 .kn-service-intro__item:not(:last-child)::after { right: -24px; }

.kn-service-intro__item { position: relative; padding-top: 56px; }

.kn-service-intro__num {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: 0;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.kn-service-intro__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -40px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--border-accent);
  border-right: 1px solid var(--border-accent);
  transform: rotate(45deg);
}

.kn-service-intro__title { color: var(--text-primary); margin-bottom: 10px; }
.kn-service-intro__text { max-width: var(--measure); font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }

.kn-service-steps { display: flex; flex-direction: column; margin-top: 32px; max-width: var(--measure); }
.kn-service-steps__item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; border-top: 0.5px solid var(--border); }
.kn-service-steps__item:last-child { border-bottom: 0.5px solid var(--border); }
.kn-service-steps__num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--accent-ink); line-height: 1; }
.kn-service-steps__title { margin-bottom: 8px; }
.kn-service-steps__text { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); margin: 0 0 8px; }
.kn-service-steps__text:last-child { margin-bottom: 0; }
.kn-service-steps__issues { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kn-service-steps__issues li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.kn-service-steps__issues li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-top: 1px solid var(--border-accent); border-right: 1px solid var(--border-accent); transform: rotate(45deg); }
.kn-service-steps__issues strong { color: var(--text-primary); font-weight: 600; }

@media (max-width: 900px) {
  .kn-service-intro,
  .kn-service-intro--cols-4 { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .kn-service-intro::before { display: none; }
  .kn-service-intro__item { padding: 24px 0 0; border-top: 1px solid var(--border); margin-top: 24px; }
  .kn-service-intro__item:first-child { border-top: none; margin-top: 0; padding-top: 0; }
  .kn-service-intro__num { position: static; margin-bottom: 14px; }
  .kn-service-intro__item:not(:last-child)::after { display: none; }
  .kn-service-steps { margin-top: 32px; }
  .kn-service-steps__item { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .kn-service-steps__num { font-size: 1.5rem; }
}

}