/* /knowledge/: every article grouped by question, in the selling-page look. Loaded after home.css, topic-pitch.css and start-here.css. */

.knowledge-hub [hidden] { display: none !important; }

/* Hero: short, so the first group shows on a phone's first screen */
.kn-hero { padding: 3.5rem 0 2.5rem; }
.kn-hero .breadcrumbs { padding-bottom: 1.75rem; }
.page-home .kn-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; max-width: 16em; }
.kn-lead { max-width: 36rem; margin-top: 1rem; color: var(--hm-muted); font-size: 1.0625rem; line-height: 1.8; }

/* One search */
.kn-search { display: flex; gap: .75rem; max-width: 40rem; margin-top: 2rem; }
.kn-search input { flex: 1 1 auto; min-width: 0; min-height: 3.25rem; padding: 0 1.25rem; border-radius: 999rem; border: .0625rem solid var(--hm-line-strong); background: var(--hm-surface); color: var(--hm-text); font: inherit; font-size: 1rem; }
.kn-search input::placeholder { color: var(--hm-muted); }
.kn-search input:focus { outline: none; border-color: var(--hm-jade); box-shadow: 0 0 0 .1875rem var(--hm-jade-tint); }
.kn-search .hm-btn { flex: 0 0 auto; min-height: 3.25rem; }
.kn-status { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .875rem; color: var(--hm-muted); font-size: .875rem; }
.kn-status button { padding: .375rem 0; border: 0; background: none; color: var(--hm-jade-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .1875rem; cursor: pointer; }

/* Jump to a group */
.kn-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.kn-jump a { display: inline-flex; gap: .5rem; align-items: baseline; padding: .5rem 1rem; border-radius: 999rem; border: .0625rem solid var(--hm-line); background: var(--hm-surface); color: var(--hm-text); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.kn-jump a:hover { border-color: var(--hm-jade); }
.kn-jump span { color: var(--hm-gold-ink); font-size: .8125rem; font-weight: 700; }

/* Groups */
.kn-group { padding: 4rem 0; scroll-margin-top: 4.5rem; }
.kn-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: 1.75rem; }
.page-home .kn-group-head h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); }
.kn-group-head p:not(.kn-group-count) { max-width: 36rem; margin-top: .5rem; color: var(--hm-muted); line-height: 1.75; }
.kn-group-count { flex: 0 0 auto; color: var(--hm-muted); font-size: .875rem; white-space: nowrap; }
.kn-group-count span { color: var(--hm-gold-ink); font-weight: 700; }

/* Featured cards */
.kn-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kn-card { height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: 1.375rem 1.25rem 1.5rem; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); color: var(--hm-text); }
.kn-card:hover { border-color: rgb(74 122 115 / .45); box-shadow: var(--hm-shadow-hover); }
.kn-card-meta { color: var(--hm-gold-ink); font-size: .8125rem; font-weight: 700; }
.kn-card strong { font-family: var(--hm-serif); font-weight: 600; font-size: 1.125rem; line-height: 1.5; text-wrap: balance; }
.kn-card:hover strong { color: var(--hm-jade-ink); }
.kn-card-summary { color: var(--hm-muted); font-size: .9375rem; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.kn-needs { list-style: none; padding: 0; margin: 0; }
.kn-needs .hm-need { height: 100%; color: var(--hm-text); }

/* The rest of a group, folded */
.knowledge-hub details.kn-more { margin-top: 1.5rem; border: 0; }
.page-home .kn-more summary { display: inline-flex; justify-content: flex-start; gap: .5rem; padding: .625rem 1.125rem; border-radius: 999rem; border: .0625rem solid var(--hm-line-strong); background: var(--hm-surface); color: var(--hm-jade-ink); font: 700 .9375rem/1.4 var(--sans); }
.kn-more summary::after { content: ""; width: .5rem; height: .5rem; margin-left: .125rem; border-right: .125rem solid currentColor; border-bottom: .125rem solid currentColor; transform: translateY(-.125rem) rotate(45deg); transition: transform .2s; }
.kn-more[open] summary::after { transform: translateY(.125rem) rotate(-135deg); }
.kn-more summary:hover { border-color: var(--hm-jade); }
.kn-more .tp-reading-list { margin-top: 1.25rem; }
.kn-all { margin-top: 1.25rem; }

/* No results */
.kn-empty { padding: 1.5rem 0 4rem; }
.kn-empty p { max-width: 36rem; color: var(--hm-muted); line-height: 1.8; }
.kn-empty h2 { font-size: 1.5rem; margin-bottom: .75rem; }

/* By practice */
.kn-practice-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kn-practice-list a { height: 100%; display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: 1rem; background: var(--hm-surface); border: .0625rem solid var(--hm-line); color: var(--hm-text); }
.kn-practice-list a:hover { border-color: rgb(74 122 115 / .45); }
.kn-practice-list strong { font-family: var(--hm-serif); font-size: 1.1875rem; font-weight: 600; }
.kn-practice-list span:not(.kn-practice-arrow) { grid-column: 1; color: var(--hm-muted); font-size: .875rem; }
.kn-practice-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--hm-jade-ink); }
.kn-practices .hm-section-head { margin-bottom: 2rem; }
.kn-practices { padding: 4.5rem 0; }

/* Four cards fit their longest clause only at full content width */
@media (max-width: 75em) {
  .kn-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 60em) {
  .kn-practice-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40em) {
  .kn-hero { padding: 1.75rem 0 1.5rem; }
  .kn-hero .breadcrumbs { padding-bottom: 1rem; }
  .page-home .kn-hero h1 { font-size: 1.75rem; }
  .kn-lead { font-size: .9375rem; margin-top: .625rem; }
  .kn-search { margin-top: 1.25rem; gap: .5rem; }
  .kn-search .hm-btn { padding-left: 1.25rem; padding-right: 1.25rem; }
  .kn-jump { flex-wrap: nowrap; overflow-x: auto; margin: 1rem -1.5rem 0; padding: 0 1.5rem .25rem; scrollbar-width: none; }
  .kn-jump::-webkit-scrollbar { display: none; }
  .kn-group { padding: 2.75rem 0; scroll-margin-top: 1.5rem; }
  .kn-group-head { flex-direction: column; gap: .375rem; margin-bottom: 1.25rem; }
  .page-home .kn-group-head h2 { font-size: 1.5rem; }
  .kn-cards { grid-template-columns: 1fr; gap: .75rem; }
  .kn-card { padding: 1.125rem 1.25rem 1.25rem; gap: .375rem; }
  .kn-card strong { font-size: 1.0625rem; }
  .kn-needs { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .kn-needs .hm-need { padding: 1rem 1.125rem; }
  .kn-needs .hm-need strong { font-size: 1.0625rem; }
  .kn-needs .hm-need span { font-size: .8125rem; text-wrap: balance; }
  .kn-practice-list { grid-template-columns: 1fr; gap: .75rem; }
  .kn-practices { padding: 3rem 0; }
}