/*
 * Knowledge centre (13 Nov 2026, UI pass 2): topic hubs, learning paths, discovery sections,
 * news centre, the homepage knowledge-centre sections and the article hub box.
 *
 * Reuses the colour variables declared on body by home-v2.css, so dark mode follows the theme.
 * Tints are made with color-mix against transparent, so they sit correctly on light and dark.
 * Motion is limited to short colour/shadow transitions and is removed under prefers-reduced-motion.
 * Nothing here overlays content.
 */

body {
    --kc-text: var(--h2-text, #18181b);
    --kc-muted: var(--h2-muted, #6b7280);
    --kc-line: var(--h2-line, #e5e7eb);
    --kc-accent: #0398cc;
    --kc-soft: var(--h2-media-bg, #f3f4f6);
    --kc-radius: 12px;
    --kc-up: #15803d;
}
[data-bs-theme="dark"] body { --kc-up: #4ade80; }
[data-bs-theme="dark"] .kc, [data-bs-theme="dark"] .kc-hero, [data-bs-theme="dark"] .kc-home, [data-bs-theme="dark"] .kc-article,
[data-bs-theme="dark"] .kc-cta, [data-bs-theme="dark"] .kc-lesson-nav, [data-bs-theme="dark"] [style*="--kc-accent"] {
    --kc-accent-ink: color-mix(in srgb, var(--kc-accent) 70%, #fff);
}

/* Tints are recomputed wherever a subject colour is set inline, so a blue or green card
   never inherits the red tint of its container. */
.kc, .kc-hero, .kc-home, .kc-article, .kc-cta, .kc-lesson-nav, [style*="--kc-accent"] {
    --kc-accent-ink: color-mix(in srgb, var(--kc-accent) 78%, #000);
    --kc-tint: color-mix(in srgb, var(--kc-accent) 4.5%, transparent);
    --kc-tint-strong: color-mix(in srgb, var(--kc-accent) 10%, transparent);
    --kc-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px -8px rgba(0, 0, 0, 0.14);
}

.kc { padding-top: 1.75rem; color: var(--kc-text); }
.kc a { color: inherit; }
.kc :target { scroll-margin-top: 90px; }
.kc-block[id], .kc-stage[id] { scroll-margin-top: 90px; }

/* ---------- shared: headings, notes, counts ---------- */
.kc-eyebrow { display: block; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--kc-accent-ink); }
.kc-eyebrow a { color: inherit; text-decoration: none; }
.kc-eyebrow a:hover { text-decoration: underline; }
.kc-h1 { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.kc-lede { margin: 0 0 1.25rem; max-width: 68ch; font-size: 1.12rem; line-height: 1.65; color: var(--kc-text); }
.kc-h2 { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; padding: 0 0 0.7rem 0.9rem; border-bottom: 1px solid var(--kc-line); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.kc-h2::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 4px; height: 1.1em; border-radius: 2px; background: var(--kc-accent); }
.kc-h2 a { text-decoration: none; }
.kc-h2 a:hover { color: var(--kc-accent-ink); }
.kc-h2-note { margin-left: auto; font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--kc-muted); }
.kc-h2-note a { font-weight: 700; color: var(--kc-accent-ink) !important; }
.kc-h3 { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.kc-note { margin: -0.35rem 0 0.75rem; font-size: 0.85rem; color: var(--kc-muted); }
.kc-count { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; background: var(--kc-tint-strong); color: var(--kc-accent-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; }
.kc-block { margin-bottom: 2.75rem; }
.kc-block-head p { margin: -0.6rem 0 1rem; color: var(--kc-muted); }
.kc-more { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--kc-muted); }
.kc-more a, .kc-foot a { color: var(--kc-accent-ink); font-weight: 600; }
.kc-foot { margin: 0 0 2rem; padding-top: 1rem; border-top: 1px solid var(--kc-line); font-size: 0.85rem; color: var(--kc-muted); }
.kc-cols { --bs-gutter-x: 2.5rem; }
.kc-card { padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); background: var(--kc-tint); }

/* ---------- header band ---------- */
/* The theme leaves 1.5rem of page background under the navigation bar. On knowledge-centre
   pages the tinted band should meet the bar, the same way the theme does for profile pages. */
body.kc-page .mega-menu-wrapper { --mn-margin-bottom: 0 !important; }
body.kc-page .mobile-nav-wrapper .mobile-header-spacer { margin-bottom: 0; }
.kc-hero { padding: 1.25rem 0 2rem; border-bottom: 1px solid var(--kc-line); background: linear-gradient(180deg, var(--kc-tint-strong), var(--kc-tint) 60%, transparent); color: var(--kc-text); }
.kc-crumbs .breadcrumb { margin-bottom: 1.25rem; font-size: 0.85rem; }
.kc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 2.5rem; align-items: start; }
.kc-hero-grid-single { grid-template-columns: minmax(0, 1fr); }
.kc-hero-main { max-width: 820px; }
.kc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }
.kc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0; }
.kc-stats div { padding: 0.9rem 1rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); background: color-mix(in srgb, var(--kc-soft) 55%, transparent); backdrop-filter: blur(2px); }
.kc-stats div:first-child { border-color: color-mix(in srgb, var(--kc-accent) 35%, transparent); }
.kc-stats dd { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.kc-stats div:first-child dd { color: var(--kc-accent-ink); }
.kc-stats dt { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 500; line-height: 1.3; color: var(--kc-muted); }
.kc-stats div:nth-child(n+3):last-child:nth-child(odd) { grid-column: 1 / -1; }
.kc-stats div:nth-child(n+3):last-child:nth-child(odd) dd { font-size: 1.05rem; }

/* audience and prerequisites */
.kc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.75rem 0 0; }
.kc-facts div { padding: 0.85rem 1rem; border: 1px solid var(--kc-line); border-left: 3px solid var(--kc-accent); border-radius: 10px; }
.kc-facts dt { margin-bottom: 0.2rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kc-muted); }
.kc-facts dd { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* ---------- buttons and search ---------- */
.kc-btn, .kc-search button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 46px; padding: 0 1.25rem; border: 2px solid var(--kc-accent); border-radius: 10px; background: var(--kc-accent); color: #fff !important; font-size: 0.95rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 0.15s, background-color 0.15s, color 0.15s; }
.kc-btn:hover, .kc-search button:hover { filter: brightness(0.9); }
.kc-btn-ghost { background: transparent; color: var(--kc-accent-ink) !important; }
.kc-btn-ghost:hover { background: var(--kc-tint-strong); filter: none; }
.kc-search { display: flex; gap: 0.5rem; max-width: 640px; }
.kc-search input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 1.1rem; border: 2px solid var(--kc-line); border-radius: var(--kc-radius); background: color-mix(in srgb, var(--kc-soft) 40%, transparent); color: var(--kc-text); font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s; }
.kc-search input::placeholder { color: var(--kc-muted); }
.kc-search input:focus { outline: none; border-color: var(--kc-accent); box-shadow: 0 0 0 4px var(--kc-tint-strong); }
.kc-search button { min-height: 54px; border-radius: var(--kc-radius); }
.kc-btn:focus-visible, .kc-search button:focus-visible, .kc a:focus-visible, .kc-hero a:focus-visible, .kc-home a:focus-visible, .kc-article a:focus-visible, .kc-lesson-nav a:focus-visible, .kc-cta a:focus-visible { outline: 3px solid var(--kc-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- "on this page" ---------- */
.kc-jump { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kc-line); }
.kc-jump-label { flex: 0 0 auto; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-muted); }
.kc-jump ul { display: flex; gap: 0.4rem; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.kc-jump li { flex: 0 0 auto; }
.kc-jump a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.8rem; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color 0.15s, color 0.15s; }
.kc-jump a span { font-weight: 500; color: var(--kc-muted); }
.kc-jump a:hover { border-color: var(--kc-accent); color: var(--kc-accent-ink); }

/* ---------- article rows ---------- */
.kc-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.kc-row { position: relative; display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.8rem 0.5rem; margin: 0 -0.5rem; border-bottom: 1px solid var(--kc-line); border-radius: 8px; transition: background-color 0.15s; }
.kc-row:last-child { border-bottom-color: transparent; }
.kc-row:hover { background: var(--kc-tint); }
.kc-row-body { flex: 1 1 auto; min-width: 0; }
.kc-thumb { flex: 0 0 128px; display: block; overflow: hidden; border-radius: 8px; background: var(--kc-soft); aspect-ratio: 16 / 9; }
.kc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kc-num { flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 0.15rem; border-radius: 50%; background: var(--kc-tint-strong); color: var(--kc-accent-ink); font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-list-title { display: block; font-size: 1.02rem; font-weight: 650; line-height: 1.4; text-decoration: none; color: var(--kc-text); }
.kc-row:hover .kc-list-title, .kc-list-title:hover { color: var(--kc-accent-ink); }
/* the whole row is one click target; chips and topic links stay clickable above it */
.kc-list-title::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.kc-list-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-top: 0.4rem; font-size: 0.8rem; color: var(--kc-muted); pointer-events: none; }
.kc-list-meta a { pointer-events: auto; }
.kc-chip { padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--kc-soft); font-weight: 600; color: var(--kc-text); text-decoration: none; }
.kc-chip-lab-project, .kc-chip-troubleshooting, .kc-chip-tutorial { background: var(--kc-tint-strong); color: var(--kc-accent-ink); }
.kc-chip-link { background: transparent; box-shadow: inset 0 0 0 1px var(--kc-line); }
a.kc-chip-link:hover { color: var(--kc-accent-ink); box-shadow: inset 0 0 0 1px var(--kc-accent); }
.kc-up { margin-left: 0.25rem; font-weight: 700; color: var(--kc-up); }

/* numbered steps joined by a line */
.kc-list-rail .kc-row { border-bottom: 0; padding-bottom: 1rem; }
.kc-list-rail .kc-row::before { content: ""; position: absolute; left: calc(0.5rem + 14px); top: calc(0.8rem + 34px); bottom: -0.6rem; width: 2px; background: var(--kc-line); }
.kc-list-rail .kc-row:last-child::before { content: none; }
.kc-list-rail .kc-num { position: relative; z-index: 1; background: var(--kc-accent); color: #fff; }

/* text-only rows (side columns) */
.kc-list-plain .kc-row { gap: 0.7rem; padding: 0.6rem 0.5rem; }
.kc-list-plain .kc-list-title { font-size: 0.95rem; }
.kc-list-plain .kc-num { flex-basis: 24px; width: 24px; height: 24px; font-size: 0.75rem; }

@media (min-width: 992px) {
    .kc-jump ul { flex-wrap: wrap; overflow: visible; }
    .kc-jump { align-items: flex-start; }
    .kc-jump-label { padding-top: 0.6rem; }
    .kc-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
    .kc-sticky { position: sticky; top: 88px; }
}

/* ---------- topic cards ---------- */
.kc-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.kc-topic-grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kc-topic-card { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.kc-topic-card:hover { border-color: var(--kc-accent); background: var(--kc-tint); box-shadow: var(--kc-shadow); }
.kc-topic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.kc-topic-name { font-size: 1.05rem; font-weight: 750; line-height: 1.3; }
.kc-topic-desc { font-size: 0.875rem; line-height: 1.55; color: var(--kc-muted); }
.kc-topic-go { margin-top: auto; padding-top: 0.25rem; font-size: 0.82rem; font-weight: 700; color: var(--kc-accent-ink); }
.kc-topic-card:hover .kc-topic-go span, .kc-path-card:hover .kc-path-go span, .kc-subject-all:hover span { display: inline-block; transform: translateX(3px); }
.kc-topic-go span, .kc-path-go span, .kc-subject-all span { display: inline-block; transition: transform 0.15s; }
.kc-subject-block { padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--kc-line); border-top: 4px solid var(--kc-accent); border-radius: var(--kc-radius); background: var(--kc-tint); }
.kc-subject-block .kc-topic-card { background: color-mix(in srgb, var(--kc-soft) 35%, transparent); }

/* ---------- learning path cards ---------- */
.kc-path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.kc-path-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); background: linear-gradient(160deg, var(--kc-tint-strong), transparent 55%); text-decoration: none; color: var(--kc-text); transition: border-color 0.15s, box-shadow 0.15s; }
.kc-path-card:hover { border-color: var(--kc-accent); box-shadow: var(--kc-shadow); }
.kc-path-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.kc-path-top .kc-eyebrow { margin: 0; }
.kc-path-steps { display: inline-flex; gap: 4px; }
.kc-path-steps i { width: 14px; height: 4px; border-radius: 2px; background: var(--kc-accent); opacity: 0.35; }
.kc-path-steps i:first-child { opacity: 1; }
.kc-path-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.kc-path-sum { font-size: 0.9rem; line-height: 1.55; color: var(--kc-muted); }
.kc-path-foot { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; margin-top: 0.25rem; font-size: 0.8rem; color: var(--kc-muted); }
.kc-path-cert { padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--kc-tint-strong); color: var(--kc-accent-ink); font-weight: 700; }
.kc-path-go { margin-top: auto; padding-top: 0.6rem; font-size: 0.88rem; font-weight: 700; color: var(--kc-accent-ink); }

/* ---------- learning path page ---------- */
.kc-stages { margin: 0; padding: 0; list-style: none; }
.kc-stage { margin-bottom: 1.5rem; padding: 1.25rem 1.25rem 0.5rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); }
.kc-stage-head { position: relative; margin-bottom: 0.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--kc-line); }
.kc-stage-n { display: block; margin-bottom: 0.25rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--kc-accent-ink); }
.kc-stage-title { margin: 0; padding-right: 6rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.kc-stage-head .kc-note { margin: 0.35rem 0 0; }
.kc-stage-count { position: absolute; top: 0; right: 0; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--kc-tint-strong); color: var(--kc-accent-ink); font-size: 0.78rem; font-weight: 700; }
.kc-toc { margin: 0; padding: 0; list-style: none; counter-reset: kctoc; }
.kc-toc li { counter-increment: kctoc; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--kc-line); font-size: 0.95rem; }
.kc-toc li:last-child { border-bottom: 0; }
.kc-toc li::before { content: counter(kctoc); flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; color: var(--kc-accent-ink); }
.kc-toc a { flex: 1 1 auto; text-decoration: none; }
.kc-toc a:hover { color: var(--kc-accent-ink); }
.kc-toc span { font-size: 0.8rem; color: var(--kc-muted); }

/* ---------- side column ---------- */
.kc-side { padding: 1.1rem 1.15rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); }
.kc-side .kc-row:hover { background: transparent; }
.kc-side-links { margin: 0; padding: 0; list-style: none; }
.kc-side-links li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--kc-line); font-size: 0.95rem; }
.kc-side-links li:last-child { border-bottom: 0; }
.kc-side-links a { text-decoration: none; }
.kc-side-links a:hover { color: var(--kc-accent-ink); }
.kc-side-links span { color: var(--kc-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* ---------- training call to action (in flow, never an overlay) ---------- */
.kc-cta { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--kc-accent) 30%, transparent); border-radius: var(--kc-radius); background: linear-gradient(160deg, var(--kc-tint-strong), var(--kc-tint)); color: var(--kc-text); }
.kc-cta .kc-eyebrow { margin-bottom: 0.3rem; }
.kc-cta strong { display: block; margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.kc-cta-links { margin: 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.5; }
.kc-cta-links li { position: relative; padding: 0.2rem 0 0.2rem 1.1rem; }
.kc-cta-links li::before { content: ""; position: absolute; left: 0.1rem; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-accent); }
.kc-cta-links a { color: var(--kc-text); text-decoration: underline; text-decoration-color: var(--kc-line); text-underline-offset: 3px; }
.kc-cta-links a:hover { color: var(--kc-accent-ink); text-decoration-color: var(--kc-accent); }
.kc-cta-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.kc-cta-contact span a { font-weight: 800; color: var(--kc-text); white-space: nowrap; text-decoration: none; }
.kc-cta-contact span a:hover { color: var(--kc-accent-ink); }

/* ---------- filters, pagination, empty state ---------- */
.kc-filters, .kc-link-row, .kc-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.kc-filters { margin-bottom: 2rem; }
.kc-filters a, .kc-link-row a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.kc-filters a:hover, .kc-link-row a:hover { border-color: var(--kc-accent); color: var(--kc-accent-ink); }
.kc-filters a.active { border-color: var(--kc-accent); background: var(--kc-accent); color: #fff; }
.kc-highlights { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }
.kc-highlights .kc-block { margin-bottom: 1.5rem; }
.kc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2rem; }
.kc-pager a, .kc-pager-current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.8rem; border: 1px solid var(--kc-line); border-radius: 10px; text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color 0.15s, color 0.15s; }
.kc-pager a:hover { border-color: var(--kc-accent); color: var(--kc-accent-ink); }
.kc-pager-current { border-color: var(--kc-accent); background: var(--kc-accent); color: #fff; }
.kc-pager-gap { padding: 0 0.25rem; color: var(--kc-muted); }
.kc-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1rem; border: 1px dashed var(--kc-line); border-radius: var(--kc-radius); text-align: center; color: var(--kc-muted); }
.kc-empty p { margin: 0; font-size: 1.05rem; }

/* ---------- homepage ---------- */
/* The homepage keeps the site's own red, with the earlier colour per subject. Every other
   knowledge-centre page uses --kc-accent (#0398cc). Remove these four rules to make the
   homepage follow --kc-accent too. */
.kc-home { --kc-accent: var(--h2-accent, #e50914); }
.kc-home [data-subject="it-infrastructure"] { --kc-accent: #c8102e !important; }
.kc-home [data-subject="cybersecurity"] { --kc-accent: #0398cc !important; }
.kc-home [data-subject="ai-data"] { --kc-accent: #047857 !important; }
.kc-home { color: var(--kc-text); }
.kc-home-hero { padding: 2.25rem 0 2rem; background: linear-gradient(180deg, var(--kc-tint-strong), transparent 70%); }
.kc-home-intro { max-width: 760px; margin-bottom: 2rem; }
.kc-home-hero .kc-lede { color: var(--kc-muted); }
.kc-quick { margin-top: 0.9rem; align-items: center; }
.kc-quick::before { content: "Start with:"; font-size: 0.82rem; font-weight: 600; color: var(--kc-muted); }
.kc-quick a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.75rem; border-radius: 999px; background: var(--kc-soft); font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--kc-text); transition: background-color 0.15s, color 0.15s; }
.kc-quick a:hover { background: var(--kc-tint-strong); color: var(--kc-accent-ink); }
.kc-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kc-subject { display: flex; flex-direction: column; padding: 1.3rem; border: 1px solid var(--kc-line); border-top: 4px solid var(--kc-accent); border-radius: var(--kc-radius); background: linear-gradient(180deg, var(--kc-tint), transparent 60%); transition: box-shadow 0.15s; }
.kc-subject:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px -8px rgba(0, 0, 0, 0.14); }
.kc-subject-stats { margin-bottom: 0.4rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kc-accent-ink); }
.kc-subject-name { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.kc-subject-name a { text-decoration: none; color: inherit; }
.kc-subject-name a:hover { color: var(--kc-accent-ink); }
.kc-subject p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; color: var(--kc-muted); }
.kc-subject ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.kc-subject li a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.7rem; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 0.84rem; font-weight: 500; text-decoration: none; color: inherit; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.kc-subject li a:hover { border-color: var(--kc-accent); background: var(--kc-tint-strong); color: var(--kc-accent-ink); }
.kc-subject-all { margin-top: auto; font-weight: 700; font-size: 0.9rem; color: var(--kc-accent-ink) !important; text-decoration: none; }
.kc-home .kc-block { margin-bottom: 3rem; }
.kc-home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.kc-home-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kc-home .kc-side .kc-h2 { font-size: 1.1rem; }
.kc-authors { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.kc-authors a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); text-decoration: none; color: inherit; transition: border-color 0.15s, background-color 0.15s; }
.kc-authors a:hover { border-color: var(--kc-accent); background: var(--kc-tint); }
.kc-authors img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.kc-authors strong { display: block; font-size: 0.95rem; line-height: 1.25; }
.kc-authors span span { font-size: 0.8rem; color: var(--kc-muted); }
.kc-cat-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.kc-cat-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.75rem; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 0.84rem; text-decoration: none; color: inherit; transition: border-color 0.15s, color 0.15s; }
.kc-cat-links a:hover { border-color: var(--kc-accent); color: var(--kc-accent-ink); }

/* ---------- article furniture ---------- */
.kc-article { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--kc-line); border-left: 4px solid var(--kc-accent); border-radius: var(--kc-radius); background: var(--kc-tint); font-size: 0.93rem; line-height: 1.6; color: var(--kc-text); }
.kc-article p { margin: 0; }
.kc-article p + p { margin-top: 0.3rem; }
.kc-article a { color: var(--kc-accent-ink); font-weight: 650; text-decoration: none; }
.kc-article a:hover { text-decoration: underline; }
.kc-article-label { display: inline-block; min-width: 7.5rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kc-muted); }
.kc-progress { height: 6px; margin-top: 0.6rem; border-radius: 3px; background: var(--kc-tint-strong); overflow: hidden; }
.kc-progress span { display: block; height: 100%; border-radius: 3px; background: var(--kc-accent); }
.kc-lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.kc-lesson-nav a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); text-decoration: none; color: var(--kc-text); transition: border-color 0.15s, background-color 0.15s; }
.kc-lesson-nav a:hover { border-color: var(--kc-accent); background: var(--kc-tint); }
.kc-lesson-nav span { display: block; margin-bottom: 0.3rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc-accent-ink); }
.kc-lesson-nav strong { font-size: 1rem; line-height: 1.35; }
.kc-lesson-nav .kc-next { grid-column: 2; text-align: right; border-color: color-mix(in srgb, var(--kc-accent) 40%, transparent); background: var(--kc-tint); }
.kc-article-cta { margin-top: 2.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .kc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .kc-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .kc-stats div:nth-child(n+3):last-child:nth-child(odd) { grid-column: auto; }
    .kc-subjects, .kc-home-cols, .kc-home-cols-3 { grid-template-columns: minmax(0, 1fr); }
    .kc-home-cols { gap: 0; }
    .kc aside.col-lg-4 { margin-top: 1rem; }
}
@media (max-width: 575px) {
    .kc-hero { padding-bottom: 1.5rem; }
    .kc-facts { grid-template-columns: minmax(0, 1fr); }
    .kc-search { flex-direction: column; }
    .kc-search button { width: 100%; }
    .kc-actions .kc-btn { flex: 1 1 100%; }
    .kc-thumb { flex-basis: 96px; }
    .kc-jump { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .kc-jump ul { max-width: 100%; }
    .kc-h2-note { margin-left: 0; flex-basis: 100%; }
    .kc-stage { padding: 1rem 0.9rem 0.25rem; }
    .kc-stage-title { padding-right: 0; }
    .kc-stage-count { position: static; display: inline-block; margin-top: 0.5rem; }
    .kc-lesson-nav { grid-template-columns: 1fr; }
    .kc-lesson-nav .kc-next { grid-column: 1; text-align: left; }
    .kc-topic-grid, .kc-topic-grid-wide, .kc-path-grid { grid-template-columns: minmax(0, 1fr); }
    .kc-article-label { min-width: 0; margin-right: 0.35rem; }
    .kc-subject-block { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .kc *, .kc-hero *, .kc-home *, .kc-cta *, .kc-lesson-nav * { transition: none !important; }
    .kc-topic-card:hover .kc-topic-go span, .kc-path-card:hover .kc-path-go span, .kc-subject-all:hover span { transform: none; }
}

/* view figure in lists: same icon and short format as the article page */
.kc-views { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.kc-views .vr-icon { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0.8; }

/* Section heading rows (article "More in ...", Latest Posts, category blocks): the heading takes
   the free width and stays on one line beside its link; the link never wraps or shrinks.
   Below 576px a long heading may wrap and the link stays at the top right. */
.section .section-title > .d-flex { flex-wrap: nowrap; }
.section .section-title > .d-flex > .title { flex: 1 1 auto; min-width: 0; }
.section .section-title > .d-flex > .view-all { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 576px) {
    .section .section-title > .d-flex > .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}