/* Knowledge-only visual alignment with the homepage. */
.content-shell {
  width: 100%;
  max-width: 80rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem) 0;
}

.content-header {
  gap: 1rem;
  padding: 0 0 0.8rem;
  border-color: rgba(17, 17, 17, 0.18);
}

.content-brand { position: relative; }
.content-brand img { width: 5.2rem; }

/* The image already contains the wordmark; retain the existing text accessibly. */
.content-brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.content-nav {
  gap: 0.5rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.content-nav a:hover { color: var(--foreground); }

h1 {
  max-width: 25ch;
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.article-deck {
  font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
  line-height: 1.65;
}

.knowledge-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 1.5rem; }
.knowledge-hero h1 { max-width: 25ch; }

.knowledge-grid { gap: 1rem; }
.knowledge-card { min-height: 16rem; }
.knowledge-card p { margin: 0.5rem 0 1.5rem; }
.knowledge-card .article-kicker { margin: 0 0 0.9rem; }

.article-layout {
  max-width: 66rem;
  margin-inline: auto;
  grid-template-columns: minmax(0, 46rem) minmax(0, 17rem);
  gap: clamp(2rem, 4vw, 3rem);
}

.article-aside { padding: 1.25rem; }

.cta-box {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--card);
  color: var(--foreground);
  gap: 1rem;
}

.cta-box p { color: var(--muted); }

.button-link {
  min-height: 3.45rem;
  max-width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #41464c;
  background: var(--primary);
  color: #f7f7f5;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.button-link:hover { background: #5a6067; }
.content-shell a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
  .article-aside { position: static; }
}

@media (min-width: 801px) {
  .content-header { flex-direction: row; align-items: center; }
  .content-nav { justify-content: flex-end; }
}

@media (max-width: 800px) {
  .content-header { flex-direction: column; align-items: flex-start; }
  .content-nav { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .knowledge-card { min-height: 0; padding: 1.25rem; }
  .knowledge-card h2 { margin-bottom: 0.5rem; }
  .knowledge-card p { margin-bottom: 1.25rem; }
  .article-layout { padding-top: 2rem; }
  .button-link { width: 100%; }
}