/* ─────────────────────────────────────────────────────────────────────────────
   Kotwel Knowledge Base — article styles  (Astra child theme)
   Pairs with Kotwise "Copy as Gutenberg". Content rules stay scoped to
   `.kw-article`; Phase 1 template components use the collision-safe `kw-`
   namespace so nothing else on the site is affected.

   Install: child theme → assets/kw-article.css, enqueued in functions.php.
   After editing, PURGE your CSS cache plugin (site serves /cache/min/…).

   Palette and layout values are exposed as scoped custom properties below.
   Typography inherits the WordPress theme defaults. External links use the
   green treatment from the earlier stylesheet.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Phase 1 design tokens (scoped to Knowledge Base posts) ────────────────── */
.single-kb {
    --kw-navy: #0f2942;
    --kw-navy-deep: #001d35;
    --kw-primary: #0170b9;
    --kw-primary-dark: #005792;
    --kw-primary-soft: #eff6fc;
    --kw-accent: #ffc000;
    --kw-accent-soft: #fffbeb;
    /* The brand gold as text. #ffc000 is 1.5:1 on the pale-blue ground; this is
       5.97:1 on #eff6fc, which clears AA for the small uppercase label. */
    --kw-accent-ink: #7a5800;
    --kw-text: #334155;
    --kw-text-strong: #1e293b;
    --kw-text-muted: #64748b;
    --kw-border: #dbe7f0;
    --kw-border-subtle: #eaf0f5;
    --kw-border-active: #7fb6d9;
    --kw-surface: #ffffff;
    --kw-surface-soft: #f7f9fb;
    --kw-surface-highlight: #eff6fc;
    --kw-success: #059669;
    --kw-danger: #dc2626;
    --kw-radius-sm: 4px;
    --kw-radius: 8px;
    --kw-radius-lg: 12px;
    --kw-content-width: 47rem;
    --kw-container-width: 80rem;
    --kw-shell-width: 75rem;
    --kw-section-gap: 2.375rem;
    --kw-font-code: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

/* Astra's separate-container presentation is useful for standard posts, but
   the Knowledge Base template owns its full-width hero and reading shell. */
.single-kb.ast-separate-container #content > .ast-container {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.single-kb #primary.kw-kb-page {
    width: 100%;
    margin: 0;
    padding: 0;
}
.single-kb .site-content {
    background: var(--kw-surface, #fff);
}

/* ── Article shell ──────────────────────────────────────────────────────────── */
.kw-article {
    max-width: var(--kw-content-width, 47rem); /* comfortable measure (~75 chars) */
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--kw-text, #334155);
}
/* Gutenberg can preserve blocks as direct children or insert its legacy
   `.wp-block-group__inner-container`. Support both DOM shapes so the published
   rhythm matches Kotwise regardless of the active WordPress block renderer. */
:where(.kw-article, .kw-article > .wp-block-group__inner-container) > * + * {
    margin-top: 1.25rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(p, ul, ol, h2, h3, h4, blockquote, pre, table, figure, .kw-callout) {
    margin-bottom: 0;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > p + p {
    margin-top: 1rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(p, ul, ol) + :is(ul, ol),
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(ul, ol) + p {
    margin-top: 0.875rem;
}
/* ── Typography invariant ───────────────────────────────────────────────────
   Justification is a system decision, not a per-component one. Prose is
   justified everywhere on an editorial surface, at any DOM depth, at every
   breakpoint — an author or a component must not be able to opt a paragraph
   out by nesting it.

   Three rules, in this order, and nothing else in this file may set
   `text-align` on a prose element:

     R1  prose is justified + hyphenated (the two travel together, always)
     R2a genuinely atomic UI text is exempt — labels, navigation, status,
         controls, table cells, and the two components whose measure is too
         narrow to justify well
     R2b prose in a component that has already decided its own alignment
         defers to it with `text-align: inherit`, rather than restating a
         value that would then have to be maintained per breakpoint
     R3  author-chosen centre/right survives; without it R1 (0,1,1) would
         outrank Gutenberg's `.has-text-align-*` (0,1,0) and silently
         re-align every centred paragraph in every published post

   R1 is 0,1,1. R2a, R2b and R3 are all 0,2,1, so each outranks R1 on
   specificity alone rather than on source order; R3 follows R2 so author
   intent also wins over an exemption. Headings are excluded by omission
   rather than by exemption, so they cannot drift back in.

   `.kw-prefooter-cta` is deliberately NOT a root: it is page chrome — a
   heading, one line and a button — that already centres itself below 767px,
   at R1's exact specificity. That made the outcome depend on source order,
   which is the fragility this section exists to remove.

   Verified by resolving the cascade over this stylesheet at both breakpoints
   rather than by reading specificity off the page. */

/* R1 — prose. */
:is(.kw-article, .kw-related-card, .kw-stay-updated) :is(p, li, dd, dt, blockquote) {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* R2a — non-prose. Atomic UI text: reads as a label, a control or a datum
   rather than as a sentence, so justification has nothing to justify. */
:is(.kw-article, .kw-related-card, .kw-stay-updated)
:is(
    /* navigation */
    .kw-toc__title, .kw-toc li, .kw-related li, .kw-related-reading__header p,
    /* eyebrows and labels */
    .kw-takeaways__eyebrow,
    /* status and metadata */
    .kw-stay-updated__note, .kw-stay-updated__status, .kw-article-taxonomy,
    /* controls */
    .kw-faq summary, .kw-disclosure summary,
    /* table cells are scanned column-wise, and Gutenberg wraps cell content in
       a paragraph — which R1 would otherwise match directly, beating the
       `left` inherited from the cell. */
    :where(.wp-block-table) :is(th, td), :where(.wp-block-table) :is(th, td) :is(p, li),
    /* measure below ~30ch: justification gaps are visible however it is set.
       Narrow measure, not "it is a card" — prose in a card is still prose. */
    .kw-use-case-card p, .kw-checklist li
) {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* R2b — prose whose component has already made an alignment decision, at a
   measure too narrow to justify well (a feature card's column is ~34ch at the
   47rem measure). `inherit` defers to that decision instead of restating it,
   so the component stays the single place it is made and the value tracks the
   breakpoint automatically — a feature card is a centred icon-card on desktop
   and a left-aligned icon + text row below 767px. */
:is(.kw-article, .kw-related-card, .kw-stay-updated)
:is(.kw-feature-card p, .kw-modality p, .kw-process__step p) {
    text-align: inherit;
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* R3 — author intent. All four explicit alignments, at any nesting depth.
   `null`/absent is the common case and carries no class at all, which is what
   lets R1 and R2 reach it; a class here means the author actually chose.

   `th`/`td` are in the list for column alignment: a cell carrying an explicit
   `has-text-align-*` outranks R2a's blanket `left` for table cells, while a
   cell with no class stays left as before. */
:is(.kw-article, .kw-related-card, .kw-stay-updated) :is(p, li, dd, dt, blockquote, th, td).has-text-align-left {
    text-align: left;
}
:is(.kw-article, .kw-related-card, .kw-stay-updated) :is(p, li, dd, dt, blockquote, th, td).has-text-align-center {
    text-align: center;
}
:is(.kw-article, .kw-related-card, .kw-stay-updated) :is(p, li, dd, dt, blockquote, th, td).has-text-align-right {
    text-align: right;
}
:is(.kw-article, .kw-related-card, .kw-stay-updated) :is(p, li, dd, dt, blockquote, th, td).has-text-align-justify {
    text-align: justify;
    text-justify: inter-word;
}

/* Keep the editorial body comfortably large throughout instead of making only
   the opening paragraph read as a lead-in. Component copy remains independently
   sized by its own selectors below. */
.kw-article > .wp-block-group__inner-container > p,
.kw-article > p,
.kw-article > .wp-block-group__inner-container > :is(ul, ol),
.kw-article > :is(ul, ol) {
    font-size: 1.18rem;
    line-height: 1.78;
}
.kw-article > .wp-block-group__inner-container > p:first-of-type,
.kw-article > p:first-of-type {
    color: var(--kw-text-strong, #1e293b);
}

/* ── Headings ───────────────────────────────────────────────────────────────── */
.kw-article h2,
.kw-article h3,
.kw-article h4 {
    color: var(--kw-navy, #0f2942);
    line-height: 1.27;
    font-weight: 600;
    scroll-margin-top: 6rem;   /* so TOC anchor jumps clear the sticky header */
}
.kw-article h2 {
    margin-top: var(--kw-section-gap, 2.375rem);
    font-size: 1.875rem;
    padding-bottom: 0;
    border-bottom: 0;
}
/* The opening section starts level with the desktop Contents card. Subsequent
   H2s retain the full editorial section rhythm above. */
.kw-kb-shell__content .kw-article > h2:first-child,
.kw-kb-shell__content .kw-article > .wp-block-group__inner-container > h2:first-child {
    margin-top: 0;
}
@media (min-width: 68.75rem) {
    .kw-kb-shell__content .kw-article > h2:first-child,
    .kw-kb-shell__content .kw-article > .wp-block-group__inner-container > h2:first-child {
        margin-top: 0.26rem;
    }
}
/* Major editorial headings echo the active TOC state. Restrict this to direct
   article sections so component headings retain their own surface colors. */
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h2 {
    width: fit-content;
    max-width: 100%;
    color: var(--kw-statement-blue, #0347b8);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    :is(.kw-article, .kw-article > .wp-block-group__inner-container) > h2 {
        background: linear-gradient(
            100deg,
            var(--kw-statement-blue, #0347b8) 0%,
            #167ee8 55%,
            var(--kw-statement-cyan, #36a8ff) 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
.kw-article h3 {
    margin-top: 1.75rem;
    font-size: 1.25rem;
}
.kw-article h4 {
    margin-top: 1.5rem;
    font-size: 1rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h3 {
    color: #064586;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h4 {
    color: #294f6c;
}

/* Headings stay attached to the content they introduce. Consecutive heading
   levels keep their established, slightly wider hierarchy spacing. */
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h2 + :is(p, ul, ol, blockquote, pre, .kw-role-fixed) {
    margin-top: 0.875rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h3 + :is(p, ul, ol, blockquote, pre) {
    margin-top: 0.625rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h4 + :is(p, ul, ol, blockquote, pre) {
    margin-top: 0.625rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > h2 + h3 {
    margin-top: 1.75rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(h2, h3) + h4 {
    margin-top: 1.375rem;
}

/* Tables stay compact; media and callouts get more room as reading pauses. */
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > * + :is(
    table,
    .wp-block-table
),
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(
    table,
    .wp-block-table
) + :not(h2, h3, h4) {
    margin-top: 0.65rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > * + :is(
    figure:not(.wp-block-table),
    .wp-block-image,
    .wp-block-video,
    .wp-block-audio
),
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > :is(
    figure:not(.wp-block-table),
    .wp-block-image,
    .wp-block-video,
    .wp-block-audio
) + :not(h2, h3, h4) {
    margin-top: 1.25rem;
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > * + .kw-callout,
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > .kw-callout + :not(h2, h3, h4) {
    margin-top: 1.25rem;
}

/* ── Links: internal (blue) vs external (green) ─────────────────────────────────
   Class-based (from the compiler) with attribute-selector fallbacks, so styling
   holds even if an inline class gets normalized away by the editor. */
.kw-article a.kw-internal,
.kw-article a[href^="#"],
.kw-article a[href^="/"],
.kw-article a[href*="kotwel.com"] {
    color: var(--kw-primary, #0170b9);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 112, 185, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.kw-article a.kw-internal:hover,
.kw-article a[href^="#"]:hover,
.kw-article a[href^="/"]:hover,
.kw-article a[href*="kotwel.com"]:hover {
    border-bottom-color: var(--kw-primary, #0170b9);
}
.kw-article a.kw-external:not([href*="kotwel.com"]),
.kw-article a[href^="http"]:not([href*="kotwel.com"]) {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(5, 150, 105, 0.35);
    transition: border-color 0.15s ease;
}
.kw-article a.kw-external:not([href*="kotwel.com"]):hover,
.kw-article a[href^="http"]:not([href*="kotwel.com"]):hover {
    border-bottom-color: #059669;
}
/* Small outbound marker on external links */
.kw-article a.kw-external:not([href*="kotwel.com"])::after,
.kw-article a[href^="http"]:not([href*="kotwel.com"])::after {
    content: "↗";
    font-size: 0.8em;
    margin-left: 0.15em;
    vertical-align: baseline;
}
.kw-article a:focus-visible {
    outline: 2px solid var(--kw-accent, #ffc000);
    outline-offset: 3px;
    border-radius: 2px;
}

/* `.has-text-align-justify` on older posts needs no rule: justification is the
   default for prose now. The class stays in published markup because it lives
   in the block comment's JSON — stripping it would invalidate the block. */

/* ── Lists ──────────────────────────────────────────────────────────────────── */
/* Marker types are stated rather than inherited from the theme: a theme that
   resets `list-style` (as several block themes do) would otherwise render
   article lists as unmarked indented text.

   Scoped to body lists — Gutenberg's `.wp-block-list` plus the unclassed lists
   the compiler emits — so component lists that style their own items
   (`.kw-checklist`, `.kw-related-media`, `.kw-concept-list`) keep theirs. */
.kw-article ul,
.kw-article ol {
    padding-left: 1.4rem;
}
.kw-article :is(ul, ol):is(:not([class]), .wp-block-list) {
    list-style-position: outside;
}
.kw-article ul:is(:not([class]), .wp-block-list) {
    list-style-type: disc;
}
.kw-article ol:is(:not([class]), .wp-block-list) {
    list-style-type: decimal;
}
.kw-article ul ul:is(:not([class]), .wp-block-list) {
    list-style-type: circle;
}
.kw-article ul ul ul:is(:not([class]), .wp-block-list) {
    list-style-type: square;
}
.kw-article ol ol:is(:not([class]), .wp-block-list) {
    list-style-type: lower-alpha;
}
.kw-article ol ol ol:is(:not([class]), .wp-block-list) {
    list-style-type: lower-roman;
}
.kw-article li + li {
    margin-top: 0.25rem;
}
.kw-article li > :is(ul, ol) {
    margin-top: 0.25rem;
}
.kw-article li > p {
    margin: 0;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.kw-article .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    border: 1px solid #d8e5f2;
    box-shadow:
        0 0.85rem 2rem rgba(15, 41, 66, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    overflow: hidden;
}
.kw-article .wp-block-table th,
.kw-article .wp-block-table td {
    border: 1px solid #e3ebf4;
    padding: 0.65rem 0.9rem;
    /* No `text-align` here: R2a already left-aligns table cells, and this rule
       sits after R3, so repeating it outranked an explicitly aligned column and
       flattened `:---:` back to left. */
    vertical-align: top;
}
.kw-article .wp-block-table thead th,
.kw-article .wp-block-table tr:first-child th {
    background: linear-gradient(180deg, #0c315f 0%, #08264c 100%);
    color: #fff;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.kw-article .wp-block-table tbody tr:nth-child(2n) td {
    background: #f6f9fd;
}
.kw-article .wp-block-table tbody tr {
    transition: background-color 0.15s ease;
}
.kw-article .wp-block-table tbody tr:hover td {
    background: #edf5ff;
}

/* ── Images, video and audio ────────────────────────────────────────────────── */
.kw-article .wp-block-image,
.kw-article .wp-block-video,
.kw-article .wp-block-audio {
    margin-block: 1.25rem;
}
.kw-article .wp-block-image img,
.kw-article .wp-block-video video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--kw-radius-lg, 12px);
}
.kw-article .wp-block-audio audio {
    display: block;
    width: 100%;
}
.kw-article .wp-block-image figcaption,
.kw-article .wp-block-video figcaption {
    margin-top: 0.625rem;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Blockquote ─────────────────────────────────────────────────────────────── */
.kw-article .wp-block-quote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border: 1px solid var(--kw-border, #e2e8f0);
    border-left: 4px solid var(--kw-primary, #0170b9);
    background: var(--kw-surface-soft, #f7f9fb);
    border-radius: var(--kw-radius, 8px);
    color: var(--kw-text-muted, #64748b);
    font-style: normal;
}
.kw-article .wp-block-quote p { margin: 0.25rem 0; }

/* ── Code ───────────────────────────────────────────────────────────────────── */
.kw-article :not(pre) > code {
    background: var(--kw-surface-soft, #f7f9fb);
    border: 1px solid var(--kw-border, #e2e8f0);
    border-radius: var(--kw-radius-sm, 4px);
    padding: 0.12em 0.38em;
    font-family: var(--kw-font-code, monospace);
    font-size: 0.88em;
    color: var(--kw-navy, #0f2942);
}
.kw-article .wp-block-code {
    margin: 1.5rem 0;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--kw-radius, 8px);
    padding: 1.5rem;
    overflow-x: auto;
    font-family: var(--kw-font-code, monospace);
    font-size: 0.9rem;
    line-height: 1.6;
}
.kw-article .wp-block-code code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* ── Separator ──────────────────────────────────────────────────────────────── */
.kw-article .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--kw-border, #e2e8f0);
    max-width: 4rem;
    margin: 2.5rem auto;
}

/* ── Callout boxes (inserted from the Kotwise toolbar) ───────────────────────────
   The type label is drawn by ::before, keyed on the modifier class. */
.kw-article .kw-callout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 1.25rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--kw-radius, 8px);
    border-left: 4px solid var(--kw-primary, #0170b9);
    background:
        radial-gradient(circle at 100% 0, rgba(34, 126, 255, 0.08), transparent 42%),
        linear-gradient(145deg, #f8fbff 0%, var(--kw-primary-soft, #eff6fc) 100%);
    box-shadow:
        0 0.65rem 1.7rem rgba(15, 41, 66, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.kw-article .kw-callout::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -2rem;
    bottom: -2.75rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(1, 112, 185, 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 0.75rem rgba(1, 112, 185, 0.025);
}
.kw-article .kw-callout::before {
    content: "Note";
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--kw-primary, #0170b9);
}
.kw-article .kw-callout > :last-child { margin-bottom: 0; }
.kw-article .kw-callout--note {
    border-left-color: var(--kw-primary, #0170b9);
    background:
        radial-gradient(circle at 100% 0, rgba(34, 126, 255, 0.08), transparent 42%),
        linear-gradient(145deg, #f8fbff 0%, var(--kw-primary-soft, #eff6fc) 100%);
}
.kw-article .kw-callout--note::before    { content: "Note"; color: var(--kw-primary, #0170b9); }
.kw-article .kw-callout--info {
    border-left-color: var(--kw-primary, #0170b9);
    background:
        radial-gradient(circle at 100% 0, rgba(34, 126, 255, 0.08), transparent 42%),
        linear-gradient(145deg, #f9fcff 0%, #f0f7ff 100%);
}
.kw-article .kw-callout--info::before    { content: "Technical Note"; color: var(--kw-primary, #0170b9); }
.kw-article .kw-callout--tip {
    border-left-color: var(--kw-success, #059669);
    background:
        radial-gradient(circle at 100% 0, rgba(5, 150, 105, 0.08), transparent 42%),
        linear-gradient(145deg, #fbfffd 0%, #ecfdf5 100%);
}
.kw-article .kw-callout--tip::before     { content: "Tip";     color: #047857; }
.kw-article .kw-callout--warning {
    border-left-color: var(--kw-accent, #ffc000);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 192, 0, 0.11), transparent 42%),
        linear-gradient(145deg, #fffefa 0%, var(--kw-accent-soft, #fffbeb) 100%);
}
.kw-article .kw-callout--warning::before { content: "Warning"; color: #92700a; }
.kw-article .kw-callout--danger {
    border-left-color: var(--kw-danger, #dc2626);
    background:
        radial-gradient(circle at 100% 0, rgba(220, 38, 38, 0.07), transparent 42%),
        linear-gradient(145deg, #fffafa 0%, #fef2f2 100%);
}
.kw-article .kw-callout--danger::before  { content: "Danger";  color: #b91c1c; }
.kw-article .kw-callout--success {
    border-left-color: var(--kw-success, #059669);
    background:
        radial-gradient(circle at 100% 0, rgba(5, 150, 105, 0.08), transparent 42%),
        linear-gradient(145deg, #fbfffc 0%, #f0fdf4 100%);
}
.kw-article .kw-callout--success::before { content: "Success / Production Ready"; color: #047857; }
.kw-article .kw-callout--operator {
    border: 1px solid var(--kw-navy, #0f2942);
    border-left-width: 6px;
    background: var(--kw-surface, #fff);
}
.kw-article .kw-callout--operator::before { content: "Operator Perspective"; color: var(--kw-navy, #0f2942); }

/* ── Kotwel's Role: the fixed positioning and boundary ──────────────────────────
   Written by the compiler directly under the "Kotwel's Role" heading
   (_shared/kotwelRoleBlocks.ts); never stored in a note. A quiet block, not a
   card: a very pale blue ground, a 3px cobalt rule, no icon, no shadow, no full
   border. The positioning is always visible; the boundary folds behind its
   label (a native details/summary), closed by default.

   Prose in it is justified and hyphenated by R1 like the rest of the article.
   The summary row is a label, not a sentence, and sits outside R1.

   Spacing. The gap after the block is set on `> .kw-role-fixed` below, at the
   same specificity as the article's sibling-margin rules. It was once zeroed by
   the `margin-bottom: 0` list near the top of this file (that list outranks a
   plain `.kw-article .kw-role-fixed`), which left the next paragraph pressed
   against the panel. 2.25rem is a little over one body line (1.18rem * 1.78).

   Contrast on #f7fafd: the text (#334155) and the label (--kw-accent-ink) both
   clear 4.5:1 (measured on #eff6fc at 9.5 and 5.97; this ground is lighter). */
.kw-article .kw-role-fixed {
    margin: 1.25rem 0 2.25rem;
    padding: 1.125rem 1.5rem;
    border-left: 3px solid var(--kw-primary, #0170b9);
    border-radius: 0 6px 6px 0;
    background: #f7fafd;
    color: var(--kw-text, #334155);
}
:is(.kw-article, .kw-article > .wp-block-group__inner-container) > .kw-role-fixed {
    margin-bottom: 2.25rem;
}
/* The positioning and the boundary are one voice: same size, same line height,
   same colour (inherited from the block), so what folds away reads exactly like
   what stays. */
.kw-article .kw-role-fixed__positioning,
.kw-article .kw-role-fixed__boundary {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.72;
}
.kw-article .kw-role-fixed__positioning strong {
    font-weight: 700;
    color: var(--kw-text-strong, #1e293b);
}
.kw-article .kw-role-fixed__scope {
    margin: 1rem 0 0;
    border-top: 1px solid rgb(1 112 185 / 14%);
}
/* The row that folds the boundary. 2.75rem keeps the tap target comfortable. */
.kw-article .kw-role-fixed__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0;
    color: var(--kw-accent-ink, #7a5800);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: left;
    list-style: none;
    cursor: pointer;
    /* A double or triple click on the row would otherwise select the label and
       the folded paragraph with it. The row is a control, not text to copy. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-hyphens: manual;
    hyphens: manual;
}
.kw-article .kw-role-fixed__label::-webkit-details-marker {
    display: none;
}
/* A plus that becomes a minus, drawn with two bars so it adds no text for a
   screen reader to announce. */
.kw-article .kw-role-fixed__label::after {
    content: "";
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: background-size 150ms ease;
}
.kw-article .kw-role-fixed__scope[open] > .kw-role-fixed__label::after {
    background-size: 100% 2px, 0 100%;
}
.kw-article .kw-role-fixed__label:focus-visible {
    outline: 2px solid var(--kw-primary, #0170b9);
    outline-offset: 2px;
    border-radius: 2px;
}
.kw-article .kw-role-fixed__boundary {
    margin: 0.125rem 0 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
    .kw-article .kw-role-fixed__label::after {
        transition: none;
    }
}
@media (max-width: 47.9375rem) {
    .kw-article .kw-role-fixed {
        padding: 1rem;
    }
    /* A body line is 1rem * 1.78 here, so the gap steps down with it. */
    :is(.kw-article, .kw-article > .wp-block-group__inner-container) > .kw-role-fixed {
        margin-bottom: 2rem;
    }
}

/* ── Table of contents (quiet navigation rail) ──────────────────────────────── */
.kw-article .kw-toc,
.kw-kb-shell__toc .kw-toc {
    margin: 0 0 2.5rem;
    padding: 1rem;
    border: 1px solid #d8e5f2;
    border-radius: 10px;
    background:
        radial-gradient(circle at 0 0, rgba(1, 112, 185, 0.07), transparent 38%),
        linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
    box-shadow:
        0 0.75rem 2rem rgba(15, 41, 66, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.kw-article .kw-toc__title,
.kw-kb-shell__toc .kw-toc__title {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kw-navy, #0f2942);
}
.kw-article .kw-toc ul,
.kw-kb-shell__toc .kw-toc ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: none;
}
/* Defensive override for older/minified copies that generated a number before
   links whose heading text already contains its own section number. */
.kw-toc > ul {
    counter-reset: none !important;
}
.kw-toc > ul > li {
    counter-increment: none !important;
}
.kw-toc > ul > li > a::before {
    content: none !important;
}
.kw-article .kw-toc li,
.kw-kb-shell__toc .kw-toc li { margin: 0.25rem 0; }
.kw-article .kw-toc a,
.kw-kb-shell__toc .kw-toc a {
    display: block;
    color: var(--kw-text, #334155);
    text-decoration: none;
    border: 0;
    font-weight: 500;
    line-height: 1.45;
    padding-block: 0.35rem;
}
.kw-article .kw-toc a:hover,
.kw-kb-shell__toc .kw-toc a:hover { color: var(--kw-primary, #0170b9); }
.kw-article .kw-toc a.is-active,
.kw-kb-shell__toc .kw-toc a.is-active {
    color: var(--kw-primary, #0170b9);
    font-weight: 700;
}
.kw-kb-shell__toc .kw-toc__item--h2.is-active::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: -1rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b93ff, var(--kw-primary, #0170b9));
    box-shadow: 0 0 0.65rem rgba(1, 112, 185, 0.28);
}
/* Dynamic TOC wrapper rendered by single-kb.php. */
.kw-toc-disclosure {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--kw-border, #e2e8f0) transparent;
}
.kw-toc-disclosure > summary {
    display: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
.kw-toc-disclosure > summary::-webkit-details-marker {
    display: none;
}
.kw-toc-disclosure__control,
.kw-toc-disclosure__logo,
.kw-toc-disclosure__collapse-icon {
    display: none;
}
.kw-toc-disclosure .kw-toc {
    margin-bottom: 0;
}
.kw-toc__list {
    margin: 0;
    padding: 0 !important;
}
.kw-toc__item {
    position: relative;
    list-style: none;
}
@media (min-width: 68.75rem) {
    .kw-toc-disclosure > summary {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
        min-height: 3.75rem;
        padding: 0.6rem 0.65rem 0.6rem 0.9rem;
        border: 1px solid rgba(44, 128, 242, 0.3);
        border-radius: var(--kw-radius-lg, 12px);
        color: var(--kw-statement-navy, #071d40);
        background:
            radial-gradient(circle at 105% 0, rgba(54, 168, 255, 0.16), transparent 42%),
            linear-gradient(145deg, #fff, #edf5ff);
        box-shadow:
            0 0.8rem 1.8rem rgba(7, 35, 79, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .kw-toc-disclosure[open] > summary {
        margin-bottom: 0.6rem;
    }
    .kw-toc-disclosure__control {
        display: grid;
        flex: 0 0 2.35rem;
        width: 2.35rem;
        height: 2.35rem;
        overflow: hidden;
        place-items: center;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent;
        box-shadow: none;
    }
    .kw-toc-disclosure__collapse-icon {
        display: block;
        color: #0759b8;
    }
    .kw-toc-disclosure__collapse-icon svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .kw-toc-disclosure:not([open]) {
        width: 4rem;
        overflow: visible;
    }
    .kw-toc-disclosure:not([open]) > summary {
        min-height: 4rem;
        padding: 0.45rem;
        justify-content: center;
    }
    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__control {
        flex-basis: 3rem;
        width: 3rem;
        height: 3rem;
        overflow: visible;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__collapse-icon {
        display: none;
    }
    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__logo {
        display: block;
        width: 3rem;
        height: 3rem;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        opacity: 1;
        animation: kw-toc-logo-in 180ms ease-out;
    }
}
@keyframes kw-toc-logo-in {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ── Related notes ──────────────────────────────────────────────────────────── */
.kw-article .kw-related {
    margin: 3rem 0 0;
    padding: 1.25rem 1.4rem;
    background: var(--kw-surface, #fff);
    border: 1px solid var(--kw-border, #e2e8f0);
    border-radius: var(--kw-radius-lg, 12px);
}
.kw-article .kw-related__title {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kw-navy, #0f2942);
}
.kw-article .kw-related ul {
    margin: 0;
    padding-left: 1.2rem;
}
.kw-article .kw-related li { margin: 0.3rem 0; }
.kw-article .kw-related a {
    color: var(--kw-primary, #0170b9);
    font-weight: 600;
    text-decoration: none;
    border: 0;
}
.kw-article .kw-related a:hover { text-decoration: underline; }

/* ── Hero summary (template-level, from the post excerpt — NOT in .kw-article) ── */
.kw-hero__summary {
    margin: 0.5rem 0 1.75rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--kw-text-muted, #64748b);
    font-weight: 400;
}
.kw-article-hero .kw-hero__summary {
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.82);
}
.kw-article-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 1rem;
}
.kw-article-taxonomy__type {
    --kw-type-color: #d1fae5;
    --kw-type-border: rgba(110, 231, 183, 0.65);
    --kw-type-background: rgba(6, 95, 70, 0.58);
    --kw-type-hover-background: rgba(6, 95, 70, 0.72);
    display: inline-flex;
    box-sizing: border-box;
    min-height: 1.8rem;
    align-items: center;
    padding: 0.34rem 0.64rem;
    border: 1px solid var(--kw-type-border);
    border-radius: 999px;
    color: var(--kw-type-color);
    background: var(--kw-type-background);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.kw-article-taxonomy__type--concept {
    --kw-type-color: #d1fae5;
    --kw-type-border: rgba(110, 231, 183, 0.65);
    --kw-type-background: rgba(6, 95, 70, 0.58);
    --kw-type-hover-background: rgba(6, 95, 70, 0.72);
}
.kw-article-taxonomy__type--insight {
    --kw-type-color: #fef3c7;
    --kw-type-border: rgba(251, 191, 36, 0.72);
    --kw-type-background: rgba(146, 100, 10, 0.58);
    --kw-type-hover-background: rgba(146, 100, 10, 0.72);
}
.kw-article-taxonomy__type--guide {
    --kw-type-color: #dbeafe;
    --kw-type-border: rgba(147, 197, 253, 0.68);
    --kw-type-background: rgba(30, 64, 175, 0.64);
    --kw-type-hover-background: rgba(30, 64, 175, 0.78);
}
.kw-article-taxonomy__type--report {
    --kw-type-color: #ede9fe;
    --kw-type-border: rgba(196, 181, 253, 0.7);
    --kw-type-background: rgba(91, 33, 182, 0.6);
    --kw-type-hover-background: rgba(91, 33, 182, 0.74);
}
.kw-article-taxonomy__type--news {
    --kw-type-color: #ffedd5;
    --kw-type-border: rgba(253, 186, 116, 0.72);
    --kw-type-background: rgba(154, 52, 18, 0.64);
    --kw-type-hover-background: rgba(154, 52, 18, 0.78);
}
.kw-article-taxonomy__topic {
    display: inline-flex;
    box-sizing: border-box;
    min-height: 1.8rem;
    gap: 0.4rem;
    align-items: center;
    padding: 0.34rem 0.72rem;
    border: 1px solid rgba(143, 208, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    background: rgba(8, 66, 146, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.kw-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: -0.6rem;
}
.kw-article-tags a {
    padding: 0.38rem 0.72rem;
    border: 1px solid rgba(255, 216, 74, 0.5);
    border-radius: 999px;
    color: #fff;
    background: rgba(112, 77, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.kw-article-taxonomy__topic:visited,
.kw-article-taxonomy__topic:focus,
.kw-article-taxonomy__topic:active {
    color: #fff;
    border-color: rgba(143, 208, 255, 0.5);
}
.kw-article-taxonomy__type:visited,
.kw-article-taxonomy__type:focus,
.kw-article-taxonomy__type:active {
    color: var(--kw-type-color);
    border-color: var(--kw-type-border);
}
.kw-article-tags a:visited,
.kw-article-tags a:focus,
.kw-article-tags a:active {
    color: #fff;
    border-color: rgba(255, 216, 74, 0.5);
}
.kw-article-taxonomy__topic:hover {
    color: #fff;
    border-color: rgba(143, 208, 255, 0.7);
    background: rgba(8, 66, 146, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0.2rem 0.45rem rgba(0, 20, 55, 0.14);
    transform: translateY(-2px);
}
.kw-article-tags a:hover { color: #fff; border-color: rgba(143, 208, 255, 0.7); }
.kw-article-taxonomy__type:hover {
    color: var(--kw-type-color);
    border-color: var(--kw-type-border);
    background: var(--kw-type-hover-background);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0.2rem 0.45rem rgba(0, 20, 55, 0.14);
    transform: translateY(-2px);
}
.kw-article-tags a:hover {
    border-color: #ffd84a;
    background: rgba(112, 77, 0, 0.46);
    transform: translateY(-1px);
}
.kw-article-taxonomy a:focus-visible,
.kw-article-tags a:focus-visible { outline: 3px solid rgba(255, 216, 74, 0.8); outline-offset: 3px; }

/* ── Phase 1 article hero ──────────────────────────────────────────────────── */
.kw-article-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(22rem, 34vw, 30rem);
    color: #fff;
    border-bottom: 1px solid rgba(78, 151, 255, 0.22);
    background:
        radial-gradient(circle at 82% 18%, rgba(38, 128, 255, 0.24), transparent 31%),
        radial-gradient(circle at 68% 105%, rgba(255, 192, 0, 0.1), transparent 24%),
        linear-gradient(118deg, #04162d 0%, #062654 56%, #0a3977 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}
/* Hero scrim, and the default for every cover. Current covers carry their own
   quiet left field, so the artwork stays visible from roughly 40% rightward
   instead of 72%. The left edge holds at 0.82 because the 11px breadcrumbs — not the H1 —
   set the contrast floor: the headline is large text with ~17:1 to spare, while
   the breadcrumbs are small text needing 4.5:1. Do not take the left stop below
   0.80 without re-checking them against a worst-case bright cover. */
.kw-article-hero--with-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 18, 40, 0.82) 0%, rgba(3, 27, 59, 0.66) 38%, rgba(3, 30, 66, 0.28) 70%, rgba(4, 39, 84, 0.08) 100%),
        linear-gradient(180deg, rgba(5, 20, 43, 0.12) 0%, rgba(2, 15, 34, 0.26) 100%);
    pointer-events: none;
}
/* The manual exception: a heavier scrim for covers that are bright, busy, or
   carry their own text behind the headline. Applied by single-kb.php only when
   `kw_hero_dark_scrim` is set, so it can never darken a hero nobody asked to
   darken. */
.kw-article-hero--dark-scrim::before {
    background:
        linear-gradient(90deg, rgba(2, 18, 40, 0.98) 0%, rgba(3, 27, 59, 0.92) 42%, rgba(3, 30, 66, 0.52) 72%, rgba(4, 39, 84, 0.24) 100%),
        linear-gradient(180deg, rgba(5, 20, 43, 0.18) 0%, rgba(2, 15, 34, 0.38) 100%);
}
.kw-article-hero--with-media::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0.62;
    background:
        linear-gradient(123deg, transparent 0 61%, rgba(255, 255, 255, 0.08) 61.1% 61.25%, transparent 61.4%),
        radial-gradient(circle at 86% 22%, rgba(33, 134, 255, 0.3), transparent 24%),
        radial-gradient(circle at 75% 94%, rgba(255, 192, 0, 0.1), transparent 19%);
    pointer-events: none;
}
.kw-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 1.25rem;
    color: rgba(225, 237, 255, 0.7);
    font-size: 0.6875rem;
}
.kw-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.kw-breadcrumbs a:hover {
    color: #fff;
}
.kw-breadcrumbs a:focus-visible {
    outline: 2px solid var(--kw-accent, #ffc000);
    outline-offset: 3px;
}
.kw-breadcrumbs__current {
    overflow: hidden;
    max-width: 42ch;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Language switcher: the same quiet strip as the breadcrumbs, one row below,
   only rendered when the article exists in more than one language. */
.kw-lang-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin: -0.5rem 0 1.25rem;
    font-size: 0.6875rem;
    color: rgba(225, 237, 255, 0.7);
}
.kw-lang-switch a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(225, 237, 255, 0.35);
}
.kw-lang-switch a:hover {
    color: #fff;
    border-bottom-color: #fff;
}
.kw-lang-switch a:focus-visible {
    outline: 2px solid var(--kw-accent, #ffc000);
    outline-offset: 3px;
}
.kw-lang-switch__current {
    color: #fff;
    font-weight: 600;
}
.kw-article-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: -55%;
    width: 62%;
    aspect-ratio: 2 / 1;
    border: 1px solid rgba(1, 112, 185, 0.45);
    border-radius: 50%;
    transform: rotate(-8deg);
    box-shadow: 0 0 0 24px rgba(1, 112, 185, 0.08), 0 0 0 48px rgba(1, 112, 185, 0.05);
    pointer-events: none;
}
.kw-article-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    width: min(100% - 3rem, var(--kw-shell-width, 75rem));
    min-height: inherit;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 3.5rem clamp(2rem, 4vw, 4rem);
}
.kw-article-hero--with-media .kw-article-hero__inner {
    grid-template-columns: minmax(0, 1fr);
}
.kw-article-hero__content {
    position: relative;
    z-index: 3;
    max-width: 40rem;
}
.kw-article-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 1rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(110, 177, 255, 0.32);
    border-radius: 999px;
    color: #e8f2ff;
    background: linear-gradient(180deg, rgba(24, 111, 230, 0.72), rgba(8, 76, 177, 0.62));
    box-shadow:
        0 0.45rem 1.25rem rgba(0, 82, 190, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kw-article-hero h1 {
    max-width: 18ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 0.35rem 1.25rem rgba(0, 10, 28, 0.28);
}
.kw-article-hero__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: var(--kw-navy-deep, #001d35);
}
.kw-article-hero__media img,
.kw-article-hero__media svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--kw-hero-object-position, center);
}
.kw-article-hero__media img {
    filter: saturate(1.06) contrast(1.04);
    transform: scale(1.008);
}
.kw-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    margin-top: 1.5rem;
    color: rgba(232, 241, 255, 0.84);
    font-size: 0.75rem;
}
/* Shared editorial metadata chips. The hero uses translucent glass variants;
   Related Reading uses quiet light-surface variants built from the same shape,
   icon scale, and semantic level colors. */
.kw-meta-chip {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    width: fit-content;
    min-height: 1.9rem;
    padding: 0.3rem 0.72rem;
    border: 1px solid #c8d9e8;
    border-radius: 999px;
    color: #183653;
    background: linear-gradient(180deg, #fff, #edf4fa);
    box-shadow:
        0 0.3rem 0.75rem rgba(15, 41, 66, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
.kw-meta-chip svg {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kw-meta-chip__dot {
    flex: 0 0 0.28rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.5);
    opacity: 0.95;
}
.kw-article-hero .kw-meta-chip {
    min-height: 2.2rem;
    padding: 0.38rem 0.8rem;
    border-color: rgba(143, 208, 255, 0.52);
    color: #fff;
    background: linear-gradient(180deg, rgba(14, 60, 112, 0.88), rgba(3, 32, 72, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0.55rem 1.25rem rgba(0, 18, 48, 0.25);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    backdrop-filter: blur(12px);
}
.kw-article-hero .kw-meta-chip__dot {
    display: none;
}
.kw-article-meta__item {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    min-height: 1.875rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(4, 24, 52, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(8px);
}
.kw-article-meta__badge,
.kw-badge {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    width: fit-content;
    padding: 0.25rem 0.75rem;
    min-height: 1.875rem;
    border: 1px solid rgba(112, 180, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, rgba(19, 112, 235, 0.68), rgba(4, 75, 172, 0.64));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0.4rem 1rem rgba(0, 54, 136, 0.13);
    backdrop-filter: blur(8px);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ── Responsive article shell ──────────────────────────────────────────────── */
.kw-kb-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 14rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    width: min(100% - 3rem, var(--kw-shell-width, 75rem));
    margin-inline: auto;
    padding-block: 2rem 4rem;
    transition:
        grid-template-columns 320ms cubic-bezier(.22, .72, .18, 1),
        gap 260ms cubic-bezier(.22, .72, .18, 1);
}
.kw-kb-shell--toc-collapsed {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1.25rem;
}
.kw-kb-shell--without-toc {
    grid-template-columns: minmax(0, 1fr);
}
.kw-kb-shell__content {
    min-width: 0;
}
.kw-kb-shell__content .kw-article {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.kw-kb-shell__toc,
.kw-kb-shell__newsletter,
.kw-kb-shell__content {
    min-width: 0;
}
.kw-kb-shell__toc {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.kw-kb-shell__toc-nav {
    flex: 1 1 auto;
    min-width: 0;
}
.kw-kb-shell__toc-nav > :first-child {
    position: sticky;
    top: 6rem;
}
.kw-kb-shell__newsletter {
    width: 100%;
    margin-top: 2.5rem;
}

/* ── Closing "Stay updated" newsletter ─────────────────────────────────────
   A full-width continuation prompt between the article/FAQ and Related Reading. */
.kw-stay-updated {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    gap: 1.75rem;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid #cbdff6;
    border-radius: var(--kw-radius-lg, 12px);
    background:
        radial-gradient(circle at 0 0, rgba(54, 168, 255, 0.18), transparent 40%),
        linear-gradient(135deg, #f9fcff 0%, #eaf4ff 55%, #f7fbff 100%);
    box-shadow:
        0 1rem 2.5rem rgba(7, 35, 79, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.kw-stay-updated::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -3.25rem;
    bottom: -3.75rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid rgba(3, 71, 184, 0.11);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.85rem rgba(3, 71, 184, 0.026),
        0 0 0 1.7rem rgba(3, 71, 184, 0.014);
}
.kw-stay-updated__header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0;
}
.kw-stay-updated__icon {
    display: grid;
    flex: 0 0 2.25rem;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(3, 71, 184, 0.15);
    border-radius: 9px;
    color: #0759d6;
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 0.4rem 1rem rgba(3, 71, 184, 0.1),
        inset 0 1px 0 #fff;
}
.kw-stay-updated__icon svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    max-width: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kw-stay-updated__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    color: #0759d6;
    font-size: 0.575rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kw-stay-updated h2 {
    margin: 0;
    color: var(--kw-navy, #0f2942);
    font-size: 1.35rem;
    line-height: 1.3;
}

.kw-stay-updated__copy {
    margin: 0.75rem 0 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 1rem;
    line-height: 1.6;
}
.kw-stay-updated__signup {
    min-width: 0;
}
.kw-stay-updated__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    margin: 0;
}
.kw-stay-updated__form input[type="email"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #cfe1f7;
    border-radius: var(--kw-radius-sm, 4px);
    background: rgba(255, 255, 255, 0.9);
    color: var(--kw-navy, #0f2942);
    font-size: 0.9rem;
}
.kw-stay-updated__form input[type="email"]:focus-visible {
    outline: 2px solid var(--kw-primary, #0170b9);
    outline-offset: 1px;
}
.kw-stay-updated__form button {
    min-height: 2.75rem;
    padding: 0.65rem 1.15rem;
    border: 0;
    border-radius: var(--kw-radius-sm, 4px);
    color: #fff;
    background: linear-gradient(145deg, #36a8ff, #0347b8);
    box-shadow: 0 0.35rem 0.9rem rgba(3, 71, 184, 0.18);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.kw-stay-updated__form button:hover {
    filter: brightness(1.05);
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.kw-stay-updated__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.kw-stay-updated__note {
    margin: 0.55rem 0 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.8rem;
}
.kw-stay-updated__status {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.72rem;
    line-height: 1.45;
}
.kw-stay-updated__status.is-success {
    color: #047857;
}
.kw-stay-updated__status.is-error {
    color: #b91c1c;
}

/* ── Related reading ──────────────────────────────────────────────────────── */
.kw-related-reading {
    width: min(100% - 3rem, var(--kw-shell-width, 75rem));
    margin: 0 auto 2rem;
    padding: 1.5rem;
    border-radius: var(--kw-radius-lg, 12px);
    color: #fff;
    background: linear-gradient(135deg, #061d47 0%, #0b2e70 100%);
    box-shadow: 0 1rem 2.5rem rgba(0, 29, 53, 0.12);
}
.kw-related-reading__header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.kw-related-reading__header h2 {
    margin: 0;
    color: #ffd84a;
    font-size: 1.35rem;
    text-shadow:
        0 0 0.75rem rgba(255, 216, 74, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.16);
}
.kw-related-reading__header p {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}
.kw-related-reading__actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex: 0 0 auto;
}
.kw-related-reading__actions > a {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}
.kw-related-reading__controls {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.kw-related-reading__controls[hidden] {
    display: none;
}
.kw-related-reading__controls button {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1rem;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}
.kw-related-reading__controls button:hover:not(:disabled) {
    border-color: rgba(255, 216, 74, 0.72);
    background: rgba(255, 216, 74, 0.12);
    transform: translateY(-1px);
}
.kw-related-reading__controls button:focus-visible {
    outline: 2px solid #ffd84a;
    outline-offset: 2px;
}
.kw-related-reading__controls button:disabled {
    opacity: 0.32;
    cursor: default;
}
/* Six links remain in the document, while the viewport exposes three cards at
   a time on desktop. Trackpad, mouse, touch, and controls share scroll snap. */
.kw-related-reading__grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    margin-inline: -0.35rem;
    padding: 0.35rem 0.35rem 0.85rem;
    scroll-padding-inline: 0.35rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}
.kw-related-reading__grid::-webkit-scrollbar {
    display: none;
}
.kw-related-reading__grid {
    cursor: grab;
}
.kw-related-reading__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.kw-related-reading__pagination {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    min-height: 1.4rem;
    margin-top: 0.6rem;
}
.kw-related-reading__pagination[hidden] {
    display: none;
}
.kw-related-reading__pagination button {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.36);
    cursor: pointer;
    transition:
        width 160ms ease,
        background-color 160ms ease;
}
.kw-related-reading__pagination button[aria-current="true"] {
    width: 1.4rem;
    background: #36a8ff;
}
.kw-related-reading__pagination button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.kw-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 2rem) / 3);
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid rgba(125, 190, 255, 0.3);
    border-radius: 14px;
    color: var(--kw-text, #334155);
    background: #fff;
    cursor: pointer;
    box-shadow:
        0 0.8rem 1.8rem rgba(0, 20, 55, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}
.kw-related-card:hover,
.kw-related-card:focus-within {
    border-color: rgba(54, 168, 255, 0.72);
    box-shadow:
        0 1.15rem 2.35rem rgba(0, 20, 55, 0.25),
        0 0 0 1px rgba(54, 168, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: translateY(-2px);
}
.kw-related-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: #031a3f;
}
.kw-related-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.kw-related-card:hover .kw-related-card__image img,
.kw-related-card:focus-within .kw-related-card__image img {
    transform: scale(1.025);
}
.kw-related-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 75% 35%, rgba(26, 128, 255, 0.8) 0 2px, transparent 3px),
        linear-gradient(150deg, transparent 35%, rgba(10, 109, 231, 0.8) 36% 38%, transparent 39%),
        #031a3f;
}
.kw-related-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem 1.05rem 1.1rem;
}
.kw-related-card__taxonomy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.65rem;
}
.kw-related-card__type {
    --kw-card-type-color: #126344;
    --kw-card-type-border: #91d9bb;
    --kw-card-type-background: #e7f8f0;
    display: inline-flex;
    align-items: center;
    min-height: 1.625rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--kw-card-type-border);
    border-radius: 999px;
    color: var(--kw-card-type-color);
    background: var(--kw-card-type-background);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.kw-related-card__type--insight {
    --kw-card-type-color: #775300;
    --kw-card-type-border: #e9c55d;
    --kw-card-type-background: #fff7d9;
}
.kw-related-card__type--guide {
    --kw-card-type-color: #145897;
    --kw-card-type-border: #9ec9f1;
    --kw-card-type-background: #eaf4ff;
}
.kw-related-card__type--report {
    --kw-card-type-color: #5b38a3;
    --kw-card-type-border: #c9b8ee;
    --kw-card-type-background: #f1edff;
}
.kw-related-card__type--news {
    --kw-card-type-color: #8a4219;
    --kw-card-type-border: #efbd94;
    --kw-card-type-background: #fff0e5;
}
.kw-related-card__topic {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-height: 1.625rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid #9ec9f1;
    border-radius: 999px;
    color: #145897;
    background: #eaf4ff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.kw-related-card__topic span { transition: transform 180ms ease; }
.kw-related-card__type:hover {
    color: var(--kw-card-type-color);
    background: color-mix(in srgb, var(--kw-card-type-background) 86%, #bdebd7);
    box-shadow: 0 0.2rem 0.45rem rgba(0, 29, 53, 0.12);
    transform: translateY(-2px);
}
.kw-related-card__topic:hover {
    color: #145897;
    background: #dbeeff;
    box-shadow: 0 0.2rem 0.45rem rgba(0, 29, 53, 0.12);
    transform: translateY(-2px);
}
.kw-related-card__type:visited,
.kw-related-card__type:focus,
.kw-related-card__type:active { color: var(--kw-card-type-color); }
.kw-related-card__topic:visited,
.kw-related-card__topic:focus,
.kw-related-card__topic:active { color: #145897; }
.kw-related-card__topic:hover span,
.kw-related-card__topic:focus-visible span { transform: translateX(0.12rem); }
.kw-related-card__type:focus-visible,
.kw-related-card__topic:focus-visible,
.kw-related-card__title-link:focus-visible { outline: 3px solid rgba(22, 126, 232, 0.25); outline-offset: 3px; }
.kw-related-card h3 {
    margin: 0;
    font-size: 1.075rem;
    line-height: 1.25;
}
.kw-related-card h3 {
    height: 2.5em;
    overflow: hidden;
    color: var(--kw-navy, #0f2942);
}
.kw-related-card h3 a {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 180ms ease;
}
.kw-related-card.has-overflowing-title h3 a {
    align-items: flex-start;
}
.kw-related-card__title-text { display: block; transform: translateY(0); transition: transform var(--kw-title-reveal-duration, 1.4s) ease-in-out; }
.kw-related-card.has-overflowing-title:hover .kw-related-card__title-text,
.kw-related-card.has-overflowing-title .kw-related-card__title-link:focus-visible .kw-related-card__title-text { transform: translateY(calc(-1 * var(--kw-title-overflow, 0px))); transition-delay: 400ms; }
.kw-related-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.kw-related-card:hover .kw-related-card__title-link,
.kw-related-card:focus-within .kw-related-card__title-link {
    color: var(--kw-primary, #0170b9);
}
.kw-related-card__body > p {
    min-height: 4.8em;
    margin: 0.5rem 0 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ── Shared surfaces and contextual modules ───────────────────────────────── */
:where(.kw-context-card, .kw-feature-card, .kw-use-case-card, .kw-modality-grid, .kw-example, .kw-takeaways, .kw-knowledge-graph) {
    border: 1px solid var(--kw-border, #e2e8f0);
    border-radius: var(--kw-radius-lg, 12px);
    background: var(--kw-surface, #fff);
}
.kw-context-card {
    padding: 1.25rem;
}
.kw-context-card__title,
.kw-section-label {
    margin: 0 0 1rem;
    color: var(--kw-navy, #0f2942);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kw-article .kw-context-card__title {
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    line-height: 1.4;
}
.kw-context-card > :last-child,
.kw-feature-card > :last-child,
.kw-use-case-card > :last-child,
.kw-example > :last-child,
.kw-takeaways > :last-child {
    margin-bottom: 0;
}
.kw-checklist,
.kw-related-media,
.kw-concept-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.kw-checklist li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.8125rem;
}
.kw-checklist li + li {
    margin-top: 0.875rem;
}
.kw-checklist li::before {
    content: "✓";
    display: grid;
    flex: 0 0 1rem;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    border-radius: 50%;
    color: #fff;
    background: var(--kw-accent, #ffc000);
    font-size: 0.65rem;
    font-weight: 800;
}

/* ── Approved Gutenberg article patterns ──────────────────────────────────── */
.kw-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.kw-feature-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1rem;
    text-align: center;
    border-color: #dce7f2;
    background:
        radial-gradient(circle at 100% 0, rgba(31, 124, 255, 0.07), transparent 42%),
        linear-gradient(145deg, #fff 0%, #f9fbfe 100%);
    box-shadow:
        0 0.65rem 1.6rem rgba(15, 41, 66, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}
.kw-feature-card:hover {
    border-color: var(--kw-primary, #0170b9);
    background:
        radial-gradient(circle at 100% 0, rgba(31, 124, 255, 0.11), transparent 44%),
        linear-gradient(145deg, #fff 0%, #f3f8ff 100%);
    transform: translateY(-2px);
    box-shadow:
        0 1rem 2rem rgba(15, 41, 66, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.kw-feature-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    color: var(--kw-feature-accent, var(--kw-primary, #0170b9));
    border: 1px solid rgba(1, 112, 185, 0.13);
    border-radius: 50%;
    background: rgba(239, 246, 255, 0.86);
    box-shadow:
        0 0.35rem 0.9rem rgba(1, 112, 185, 0.08),
        inset 0 1px 0 #fff;
}
.kw-feature-card h3,
.kw-feature-card h4 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}
.kw-feature-card p {
    margin: 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.75rem;
    line-height: 1.6;
}
.kw-modality-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}
.kw-modality {
    display: grid;
    gap: 0.4rem;
    place-items: center;
    min-height: 4.5rem;
    padding: 0.5rem;
    border: 1px solid var(--kw-border, #e2e8f0);
    border-radius: var(--kw-radius, 8px);
    color: var(--kw-primary, #0170b9);
    background: var(--kw-surface-soft, #f7f9fb);
    font-size: 0.6875rem;
    text-align: center;
}
.kw-example {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-color: #bfdbfe;
    background: var(--kw-primary-soft, #eff6fc);
}
.kw-example__icon {
    display: grid;
    flex: 0 0 2.5rem;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--kw-radius, 8px);
    color: var(--kw-primary, #0170b9);
    background: #fff;
}
.kw-example__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--kw-primary-dark, #005792);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}
.kw-example p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
}
.kw-use-case-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.kw-use-case-card {
    overflow: hidden;
}
.kw-use-case-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.kw-use-case-card__body {
    padding: 0.875rem;
}
.kw-use-case-card h3,
.kw-use-case-card h4 {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
}
.kw-use-case-card p {
    margin: 0;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.6875rem;
    line-height: 1.55;
}
.kw-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-block: 2rem;
}
.kw-process__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    padding-inline: 0.5rem;
    text-align: center;
}
.kw-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1.25rem;
    left: calc(50% + 1.25rem);
    width: calc(100% - 2.5rem);
    border-top: 1px dashed #93c5fd;
}
.kw-process__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #60a5fa;
    border-radius: 50%;
    color: var(--kw-primary, #0170b9);
    background: #fff;
}
.kw-process__step strong {
    color: var(--kw-navy, #0f2942);
    font-size: 0.75rem;
}
.kw-process__step small {
    color: var(--kw-text-muted, #64748b);
    font-size: 0.625rem;
    line-height: 1.45;
}
.kw-challenge-list,
.kw-concept-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.kw-challenge,
.kw-concept {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    width: fit-content;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.kw-challenge {
    border: 1px solid #fecaca;
    color: #b91c1c;
    background: #fef2f2;
}
.kw-concept {
    border: 1px solid #dbeafe;
    color: var(--kw-primary-dark, #005792);
    background: #eff6ff;
}
.kw-takeaways {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-color: rgba(214, 158, 0, 0.24);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 192, 0, 0.11), transparent 38%),
        linear-gradient(145deg, #fffef9 0%, #fffaf0 58%, #fff 100%);
    box-shadow:
        0 0.75rem 2rem rgba(15, 41, 66, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.kw-takeaways::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -3.5rem;
    bottom: -4rem;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(214, 158, 0, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 1rem rgba(255, 192, 0, 0.025),
        0 0 0 2rem rgba(255, 192, 0, 0.012);
}
.kw-takeaways__header {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1rem;
}
.kw-takeaways__icon {
    display: grid;
    flex: 0 0 2.5rem;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(214, 158, 0, 0.2);
    border-radius: 10px;
    color: var(--kw-navy, #0f2942);
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 0.4rem 1rem rgba(127, 92, 0, 0.08),
        inset 0 1px 0 #fff;
}
.kw-takeaways__icon svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kw-takeaways__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    color: #9a6b00;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kw-article .kw-takeaways h2 {
    margin: 0;
    color: var(--kw-navy, #0f2942);
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    line-height: 1.2;
}
.kw-takeaways__heading {
    min-width: 0;
}
.kw-takeaways ul {
    margin: 0;
    padding-left: 1.25rem;
}
.kw-takeaways li {
    padding-left: 0.25rem;
    font-size: 1.18rem;
    line-height: 1.78;
}
.kw-takeaways li + li {
    margin-top: 0.625rem;
}

/* ── Related content, FAQ and CTA ─────────────────────────────────────────── */
.kw-related-media li + li {
    margin-top: 0.875rem;
}
.kw-related-media a {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    color: var(--kw-navy, #0f2942);
    text-decoration: none;
}
.kw-related-media img {
    width: 3.5rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--kw-radius-sm, 4px);
    object-fit: cover;
}
.kw-related-media strong,
.kw-related-media small {
    display: block;
}
.kw-related-media strong {
    font-size: 0.75rem;
    line-height: 1.4;
}
.kw-related-media small {
    margin-top: 0.2rem;
    color: var(--kw-text-muted, #64748b);
    font-size: 0.625rem;
}
.kw-faq {
    overflow: hidden;
    border: 1px solid #d5e3f2;
    border-radius: var(--kw-radius-lg, 12px);
    background: #fff;
    box-shadow:
        0 0.75rem 2rem rgba(15, 41, 66, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
.kw-faq__header {
    padding: 1.35rem 1.75rem 1.4rem;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(54, 168, 255, 0.2), transparent 45%),
        linear-gradient(135deg, #061d47 0%, #0b2e70 100%);
}
.kw-faq__eyebrow {
    display: block;
    margin-bottom: 0.3rem;
    color: #8fd0ff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.kw-article .kw-faq__header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.kw-faq__intro {
    padding: 1rem 1.75rem 0;
    color: var(--kw-text-muted, #64748b);
}
.kw-faq__intro > :first-child {
    margin-top: 0;
}
.kw-faq__intro > :last-child {
    margin-bottom: 1rem;
}
.kw-faq details {
    border-bottom: 1px solid #e2eaf2;
    transition: background-color 180ms ease;
}
.kw-faq details:last-child {
    border-bottom: 0;
}
.kw-faq details[open] {
    background: rgba(239, 246, 252, 0.68);
}
.kw-faq summary,
.kw-disclosure summary {
    cursor: pointer;
    list-style: none;
}
.kw-faq summary::-webkit-details-marker,
.kw-disclosure summary::-webkit-details-marker {
    display: none;
}
.kw-faq summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: 3.75rem;
    padding: 1rem 1.75rem;
    color: var(--kw-navy, #0f2942);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease;
}
.kw-faq summary:hover {
    color: var(--kw-primary-dark, #005792);
}
.kw-faq summary::after,
.kw-disclosure summary::after {
    content: "+";
    color: var(--kw-primary, #0170b9);
}
.kw-faq summary::after {
    display: grid;
    flex: 0 0 1.75rem;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid rgba(1, 112, 185, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    line-height: 1;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.kw-faq details[open] summary::after,
.kw-disclosure[open] summary::after {
    content: "−";
}
.kw-faq details[open] summary::after {
    color: #fff;
    border-color: var(--kw-primary, #0170b9);
    background: var(--kw-primary, #0170b9);
    transform: rotate(180deg);
}
.kw-faq__answer {
    height: 0;
    overflow: hidden;
    padding: 0 4.5rem 0 1.75rem;
    color: var(--kw-text-muted, #64748b);
    font-size: 1.18rem;
    line-height: 1.78;
    opacity: 0;
    transition:
        height 220ms cubic-bezier(.2, .7, .2, 1),
        opacity 160ms ease;
}
.kw-faq:not(.is-enhanced) details[open] .kw-faq__answer,
.kw-faq.is-enhanced details[open] .kw-faq__answer {
    opacity: 1;
}
.kw-faq.is-enhanced details.is-closing .kw-faq__answer {
    opacity: 0;
}
.kw-faq:not(.is-enhanced) details[open] .kw-faq__answer {
    height: auto;
}
.kw-faq__answer > :first-child {
    margin-top: 0;
}
.kw-faq__answer > :last-child {
    margin-bottom: 1.125rem;
}
/* Compatibility for articles compiled before `.kw-faq__answer` existed. This
   keeps legacy answer text off the card border until the post is republished. */
.kw-faq details > :not(summary):not(.kw-faq__answer) {
    margin: 0;
    padding: 0 4.5rem 1.125rem 1.75rem;
    color: var(--kw-text-muted, #64748b);
    font-size: 1.18rem;
    line-height: 1.78;
}
.kw-disclosure {
    border: 1px solid var(--kw-border, #e2e8f0);
    border-radius: var(--kw-radius, 8px);
    background: #fff;
}
.kw-disclosure summary {
    display: flex;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    color: var(--kw-navy, #0f2942);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kw-disclosure__content {
    padding: 0 1rem 1rem;
}
.kw-knowledge-graph {
    min-height: 18rem;
    padding: 1.25rem;
}
.kw-knowledge-graph svg {
    display: block;
    width: 100%;
    height: auto;
}
.kw-button,
.kw-article a.kw-button {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--kw-navy-deep, #001d35);
    background: var(--kw-accent, #ffc000);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}
.kw-button:hover,
.kw-button:focus-visible,
.kw-article a.kw-button:hover,
.kw-article a.kw-button:focus-visible {
    color: var(--kw-navy-deep, #001d35);
    border-bottom-color: transparent;
    background: #ffca33;
}
.kw-button:focus-visible,
.kw-article a.kw-button:focus-visible,
.kw-faq summary:focus-visible,
.kw-disclosure summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.kw-faq summary:focus-visible,
.kw-disclosure summary:focus-visible {
    outline-color: var(--kw-primary, #0170b9);
    outline-offset: -2px;
}

/* ── KB pre-footer CTA (rendered by functions.php) ───────────────────────── */
.kw-prefooter-cta {
    margin: 0;
    color: var(--kw-navy-deep, #001d35);
    background: linear-gradient(105deg, #ffd84a 0%, #ffc61a 48%, #f7ba00 100%);
}
.single-kb .kw-prefooter-cta + footer,
.single-kb .kw-prefooter-cta + .site-footer,
.single-kb .site-footer {
    margin-top: 0;
    border-top: 0;
}
.kw-prefooter-cta__inner {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 3rem, var(--kw-shell-width, 75rem));
    margin-inline: auto;
    padding-block: clamp(2rem, 3.75vw, 3.125rem);
}
.kw-prefooter-cta__content { max-width: 48rem; }
.kw-prefooter-cta h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.65rem, 2.8vw, 2.35rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.kw-prefooter-cta p {
    max-width: 43rem;
    margin: 0.65rem 0 0;
    color: rgba(0, 29, 53, 0.72);
    font-size: 0.95rem;
}
.kw-prefooter-cta__button {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    min-width: 11.5rem;
    min-height: 3rem;
    padding: 0.85rem 1.35rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #0a315b 0%, var(--kw-navy-deep, #001d35) 100%);
    box-shadow: 0 0.55rem 1.2rem rgba(0, 29, 53, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kw-prefooter-cta__button:hover {
    color: #fff;
    background: linear-gradient(180deg, #0e4077 0%, #062745 100%);
    transform: translateY(-1px);
    box-shadow: 0 0.7rem 1.4rem rgba(0, 29, 53, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.kw-prefooter-cta__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Large displays: use the available canvas without stretching prose into
   difficult-to-read line lengths. */
@media (min-width: 90rem) {
    .single-kb {
        --kw-shell-width: min(92vw, 90rem);
        --kw-content-width: 52rem;
    }
    .kw-kb-shell {
        grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
        column-gap: clamp(3rem, 6vw, 7rem);
    }
    .kw-kb-shell--toc-collapsed {
        grid-template-columns: 4rem minmax(0, 1fr);
        column-gap: 1.25rem;
    }
    .kw-article-hero__inner {
        width: min(92vw, 90rem);
    }
}

/* Tablet and smaller desktop: the TOC becomes a top-level disclosure. */
@media (max-width: 68.6875rem) {
    .kw-kb-shell {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: min(100% - 3rem, var(--kw-content-width, 47rem));
    }
    /* The rail box is dropped so the TOC can become a full-width disclosure.
       The independently rendered newsletter follows the article. */
    .kw-kb-shell__toc {
        display: contents;
    }
    .kw-kb-shell__toc-nav {
        order: 1;
        align-self: stretch;
        width: 100%;
        min-width: 0;
        margin-bottom: 1rem;
    }
    .kw-kb-shell__content {
        order: 2;
    }
    .kw-kb-shell__newsletter {
        order: 3;
        width: 100%;
        margin-top: 2.5rem;
    }
    .kw-stay-updated {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    .kw-kb-shell__toc-nav > :first-child {
        position: static;
    }
    .kw-toc-disclosure {
        position: static;
        display: block;
        width: 100%;
        max-height: none;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #d5e3f2;
        border-radius: var(--kw-radius-lg, 12px);
        background:
            radial-gradient(circle at 100% 0, rgba(1, 112, 185, 0.07), transparent 42%),
            linear-gradient(145deg, #fff 0%, #f8fbff 100%);
        box-shadow:
            0 0.65rem 1.6rem rgba(15, 41, 66, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    .kw-toc-disclosure > summary {
        display: flex;
        width: 100%;
        min-height: 3.5rem;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.2rem;
        color: var(--kw-navy, #0f2942);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .kw-toc-disclosure > summary::after {
        content: "+";
        color: var(--kw-primary, #0170b9);
        font-size: 1.1rem;
    }
    .kw-toc-disclosure[open] > summary::after {
        content: "−";
    }
    .kw-kb-shell__toc .kw-toc {
        margin-bottom: 0;
        padding: 0.75rem 1.2rem 1rem;
        border: 0;
        border-top: 1px solid var(--kw-border-subtle, #eaf0f5);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .kw-toc-disclosure .kw-toc__title {
        display: none;
    }
    .kw-related-card {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (max-width: 47.9375rem) {
    .kw-article-hero {
        min-height: 24rem;
    }
    .kw-breadcrumbs__current,
    .kw-breadcrumbs__current-separator {
        display: none;
    }
    .kw-article-hero__eyebrow {
        width: fit-content;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
        color: #fff;
        background: rgba(1, 112, 185, 0.62);
        letter-spacing: 0.08em;
    }
    .kw-article-meta__badge {
        border-color: rgba(255, 255, 255, 0.22);
    }
    .kw-article-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        width: min(100% - 2rem, var(--kw-content-width, 47rem));
        padding: 2rem 0;
    }
    .kw-article-hero h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
    .kw-article-hero .kw-hero__summary {
        font-size: 1rem;
    }
    .kw-article-meta {
        gap: 0.625rem 1rem;
        font-size: 0.75rem;
    }
    .kw-kb-shell {
        width: min(100% - 2rem, var(--kw-content-width, 47rem));
        padding-block: 0.75rem 3rem;
    }
    .kw-kb-shell__toc-nav {
        margin-bottom: 0.75rem;
    }
    .kw-related-reading {
        width: min(100% - 2rem, var(--kw-content-width, 47rem));
        padding: 1rem;
    }
    .kw-stay-updated {
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 1.15rem;
        box-sizing: border-box;
    }
    .kw-stay-updated__form {
        grid-template-columns: minmax(0, 1fr);
    }
    .kw-stay-updated__form button {
        width: 100%;
    }
    .kw-related-reading__header > div {
        min-width: 0;
    }
    .kw-related-reading__actions > a {
        min-height: 2.25rem;
        padding: 0.5rem 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        font-size: 0.6875rem;
    }
    .kw-related-reading__actions > a span {
        display: inline;
    }
    .kw-related-reading__controls {
        display: none;
    }
    .kw-related-reading__grid {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        margin-inline: -0.35rem;
        padding: 0.35rem 0.35rem 0.85rem;
        scroll-padding-inline: 0.35rem;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    .kw-related-reading__grid::-webkit-scrollbar {
        display: none;
    }
    .kw-related-card {
        flex: 0 0 88%;
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .kw-related-card h3 {
        height: 3.75em;
    }
    .kw-related-card__title-text { transform: none !important; transition: none; }
    .kw-related-reading__pagination {
        margin-top: 0.75rem;
    }
    .kw-article > .wp-block-group__inner-container > p,
    .kw-article > p,
    .kw-article > .wp-block-group__inner-container > :is(ul, ol),
    .kw-article > :is(ul, ol) {
        font-size: 1rem;
        line-height: 1.75;
    }
    .kw-takeaways li,
    .kw-faq__answer,
    .kw-faq details > :not(summary):not(.kw-faq__answer) {
        font-size: 1rem;
        line-height: 1.75;
    }
    /* No alignment override here: R1 is breakpoint-independent, and
       `hyphens: auto` does the work the old mobile left-align switch did. */
    .kw-faq summary {
        padding-inline: 1.4rem;
    }
    .kw-faq__answer {
        padding-right: 3.5rem;
        padding-left: 1.4rem;
    }
    .kw-faq details > :not(summary):not(.kw-faq__answer) {
        padding-right: 3.5rem;
        padding-left: 1.4rem;
    }
    .kw-article h2 {
        margin-top: 2.125rem;
        font-size: 1.5rem;
    }
    .kw-feature-grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    .kw-feature-card {
        display: grid;
        grid-template-columns: 2.5rem 1fr;
        gap: 0 0.75rem;
        align-items: center;
        padding: 0.875rem;
        text-align: left;
    }
    .kw-feature-card__icon {
        grid-row: 1 / span 2;
        margin: 0;
    }
    .kw-modality-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0;
        border: 0;
    }
    .kw-use-case-grid {
        grid-template-columns: 1fr;
    }
    .kw-use-case-card {
        display: grid;
        grid-template-columns: 7rem 1fr;
    }
    .kw-use-case-card img {
        height: 100%;
        aspect-ratio: auto;
    }
    .kw-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
    .kw-process__step:not(:last-child)::after {
        display: none;
    }
    .kw-process__step:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .kw-example,
    .kw-takeaways {
        padding: 1rem;
    }
    .kw-challenge-list {
        gap: 0.5rem;
    }
    .kw-prefooter-cta__inner {
        align-items: center;
        flex-direction: column;
        width: min(100% - 2rem, 75rem);
        gap: 1.5rem;
        padding-block: 1.875rem;
    }
    .kw-prefooter-cta__content,
    .kw-prefooter-cta p {
        text-align: center;
    }
    .kw-prefooter-cta p { margin-inline: auto; }
    .kw-prefooter-cta h2 { font-size: 1.75rem; }
    .kw-prefooter-cta__button {
        width: fit-content;
        max-width: 100%;
        align-self: center;
        text-align: center;
    }
    .kw-article .wp-block-table th,
    .kw-article .wp-block-table td {
        min-width: 8rem;
        padding: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kw-article *,
    .kw-kb-shell *,
    .kw-article-hero *,
    .kw-related-reading * {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }
    .kw-related-card__title-text { transform: none !important; }
}

/* ── Hide the author/date byline on knowledge-base articles ─────────────────── */
.single-kb .entry-meta {
    display: none;
}

/* ── Premium TOC accents ──────────────────────────────────────────────────── */
.single-kb {
    --kw-statement-blue: #0347b8;
    --kw-statement-cyan: #36a8ff;
    --kw-statement-navy: #071d40;
}

.kw-kb-shell__toc .kw-toc {
    position: relative;
    overflow: hidden;
    padding: 1.15rem;
    border-color: rgba(44, 128, 242, 0.28);
    background:
        radial-gradient(circle at 112% -8%, rgba(54, 168, 255, 0.24), transparent 38%),
        linear-gradient(155deg, #ffffff 0%, #edf5ff 100%);
    box-shadow:
        0 1.15rem 2.8rem rgba(7, 35, 79, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.kw-kb-shell__toc .kw-toc::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kw-statement-blue), var(--kw-statement-cyan), #ffc933);
}
.kw-kb-shell__toc .kw-toc__title {
    color: var(--kw-statement-navy);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}
.kw-kb-shell__toc .kw-toc a {
    margin-inline: -0.45rem;
    padding: 0.5rem 0.55rem;
    border-radius: 7px;
    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
}
.kw-kb-shell__toc .kw-toc a:hover {
    color: var(--kw-statement-blue);
    background: transparent;
    transform: translateX(2px);
}
.kw-kb-shell__toc .kw-toc a.is-active {
    color: #fff;
    background: linear-gradient(105deg, var(--kw-statement-blue), var(--kw-statement-cyan));
    box-shadow:
        0 0.5rem 1.1rem rgba(7, 94, 232, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.kw-kb-shell__toc .kw-toc__item--h2.is-active::before {
    display: none;
}

@media (max-width: 68.6875rem) {
    .kw-toc-disclosure {
        border-color: rgba(44, 128, 242, 0.3);
        box-shadow:
            0 1rem 2.4rem rgba(7, 35, 79, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }
    .kw-toc-disclosure > summary {
        position: relative;
        overflow: hidden;
        color: var(--kw-statement-navy);
    }
    .kw-toc-disclosure > summary::before {
        content: "";
        position: absolute;
        top: 0;
        right: 1px;
        left: 1px;
        height: 3px;
        border-radius: var(--kw-radius-lg, 12px) var(--kw-radius-lg, 12px) 0 0;
        background: linear-gradient(90deg, var(--kw-statement-blue), var(--kw-statement-cyan), #ffc933);
    }
    .kw-kb-shell__toc .kw-toc {
        padding: 0.75rem 1.2rem 1rem;
        border: 0;
        border-top: 1px solid var(--kw-border-subtle, #eaf0f5);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .kw-kb-shell__toc .kw-toc::after {
        display: none;
    }
}

/* ── End premium TOC accents ─────────────────────────────────────────────── */

/* Desktop TOC: one unified Contents card, with the collapse control in its
   header. Compact layouts retain the clearer "On this page" disclosure. */
.kw-toc-disclosure__label--desktop {
    display: none;
}

@media (min-width: 68.75rem) {
    .kw-toc-disclosure__label--compact {
        display: none;
    }

    .kw-toc-disclosure__label--desktop {
        display: inline;
    }

    .kw-toc-disclosure[open] {
        position: sticky;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid rgba(44, 128, 242, 0.28);
        border-radius: var(--kw-radius-lg, 12px);
        background:
            radial-gradient(circle at 112% -8%, rgba(54, 168, 255, 0.2), transparent 38%),
            linear-gradient(155deg, #ffffff 0%, #edf5ff 100%);
        box-shadow:
            0 1.15rem 2.8rem rgba(7, 35, 79, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .kw-toc-disclosure,
    .kw-toc-disclosure > summary,
    .kw-toc-disclosure__control {
        transition:
            width 260ms cubic-bezier(.22, .72, .18, 1),
            height 260ms cubic-bezier(.22, .72, .18, 1),
            min-height 260ms cubic-bezier(.22, .72, .18, 1),
            padding 220ms ease,
            border-radius 220ms ease,
            box-shadow 220ms ease;
    }

    .kw-toc-disclosure[open]::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        right: 1px;
        left: 1px;
        height: 3px;
        border-radius: var(--kw-radius-lg, 12px) var(--kw-radius-lg, 12px) 0 0;
        background: linear-gradient(
            90deg,
            var(--kw-statement-blue, #075ee8),
            var(--kw-statement-cyan, #36a8ff),
            #ffc933
        );
        pointer-events: none;
    }

    .kw-toc-disclosure[open] > summary {
        min-height: 2.92rem;
        margin-bottom: 0;
        padding: 0.38rem 0.55rem 0.38rem 1rem;
        border: 0;
        border-bottom: 1px solid rgba(44, 128, 242, 0.16);
        border-radius: var(--kw-radius-lg, 12px) var(--kw-radius-lg, 12px) 0 0;
        background: transparent;
        box-shadow: none;
    }

    .kw-toc-disclosure[open] .kw-toc {
        box-sizing: border-box;
        max-height: calc(100vh - 7rem - 2.92rem);
        max-height: calc(100dvh - 7rem - 2.92rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--kw-border, #e2e8f0) transparent;
        margin: 0;
        padding: 0.8rem 1rem 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        animation: kw-toc-panel-in 220ms cubic-bezier(.22, .72, .18, 1);
    }

    .kw-toc-disclosure[open] .kw-toc::after,
    .kw-toc-disclosure[open] .kw-toc__title {
        display: none;
    }

    .kw-toc-disclosure:not([open]) {
        width: 100%;
        height: 3.5rem;
        aspect-ratio: 1;
    }

    .kw-toc-disclosure:not([open]) > summary {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0.35rem;
    }

    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__control {
        flex-basis: 2.6rem;
        width: 2.6rem;
        height: 2.6rem;
    }

    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__logo {
        width: 2.6rem;
        height: 2.6rem;
    }

    .kw-toc-disclosure__control {
        position: relative;
    }

    .kw-toc-disclosure .kw-toc-disclosure__logo,
    .kw-toc-disclosure .kw-toc-disclosure__collapse-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        transition:
            opacity 180ms ease,
            transform 220ms cubic-bezier(.22, .72, .18, 1);
    }

    .kw-toc-disclosure .kw-toc-disclosure__logo {
        width: 2.6rem;
        height: 2.6rem;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.78) rotate(-5deg);
    }

    .kw-toc-disclosure .kw-toc-disclosure__collapse-icon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }

    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__logo {
        display: block;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0);
        animation: none;
    }

    .kw-toc-disclosure:not([open]) .kw-toc-disclosure__collapse-icon {
        display: block;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72) rotate(5deg);
        pointer-events: none;
    }

    /* The rail and its logo control are 20% smaller when collapsed. The
       article receives all space released by the rail. */
    .kw-kb-shell--toc-collapsed {
        grid-template-columns: minmax(3.5rem, 3.5rem) minmax(0, 1fr);
    }

    .kw-kb-shell--toc-collapsed .kw-kb-shell__content {
        width: 100%;
        max-width: none;
    }

    .kw-kb-shell--toc-collapsed .kw-kb-shell__content .kw-article {
        width: 100%;
        max-width: none;
    }
}

@keyframes kw-toc-panel-in {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* On large desktop canvases, the collapsed rail releases all remaining shell
   width to the article. */
@media (min-width: 90rem) {
    .kw-kb-shell--toc-collapsed {
        grid-template-columns:
            minmax(3.5rem, 3.5rem)
            minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kw-kb-shell,
    .kw-toc-disclosure,
    .kw-toc-disclosure > summary,
    .kw-toc-disclosure__control,
    .kw-toc-disclosure__logo,
    .kw-toc-disclosure__collapse-icon,
    .kw-toc-disclosure .kw-toc {
        transition: none !important;
        animation: none !important;
    }
}