/* --- p.green — информационный блок (позитивный/зелёный) --- */
.content-item .body p.green {
    font-size: inherit;
    line-height: inherit;
    margin: 1em 0;
    padding: 0.75rem 1.25rem;
    border: none;
    border-left: 4px solid #22c55e;
    background-color: rgba(34, 197, 94, 0.08);
    border-radius: 0 var(--kg-radius-card) var(--kg-radius-card) 0;
    font-style: italic;
    color: rgba(237, 240, 242, 0.85);
}

.content-item .body p.green .bold {
    font-weight: 700;
    color: #4ade80;
}

/* --- p.red — предупредительный блок (красный/оранжевый) --- */
.content-item .body p.red {
    font-size: inherit;
    line-height: inherit;
    margin: 1em 0;
    padding: 0.75rem 1.25rem;
    border: none;
    border-left: 4px solid #f97316;
    background-color: rgba(249, 115, 22, 0.08);
    border-radius: 0 var(--kg-radius-card) var(--kg-radius-card) 0;
    font-style: italic;
    color: rgba(237, 240, 242, 0.85);
}

.content-item .body p.red .bold {
    font-weight: 700;
    color: #fb923c;
}

/* --- span.bold и span.italic --- */
.content-item .body span.bold {
    font-weight: 600;
    color: #00fff2;
}

.content-item .body span.italic {
    font-style: italic;
}

/* --- table.rainbowTable / table.rainbowTable2 --- */
.content-item .body .table-wrapper table.rainbowTable,
.content-item .body .table-wrapper table.rainbowTable2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.content-item .body .table-wrapper table.rainbowTable2 > tbody > tr:first-child > * {
    background-color: var(--kg-wash-3);
    color: var(--kg-text);
    font-weight: 600;
}

.content-item .body .table-wrapper table.rainbowTable2 > tbody > tr > * p {
    margin: 8px 0;
}

.content-item .body .table-wrapper table.rainbowTable2 tr > * {
    border: 1px solid var(--kg-border);
    padding: 0.75rem 1rem;
}

.content-item .body .table-wrapper table.rainbowTable tr > * {
    border: 1px solid var(--kg-border);
    padding: 0.75rem 1rem;
}

/* --- Главная кнопка системы в статьях: a.template_readmore2, a.dwnld, a.b-btn-prev, button.cta-button --- */
.content-item .body a.template_readmore2,
.content-item .body a.dwnld,
.content-item .body a.b-btn-prev,
.content-item .body button.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 45px;
    padding: 0.75rem 1.25rem;
    margin: 0.75rem 0;
    border: 1px solid var(--kg-brand-cyan);
    border-radius: var(--kg-radius-button);
    background: transparent;
    color: var(--kg-brand-cyan);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}

.content-item .body button.cta-button svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.content-item .body a.template_readmore2:focus-visible,
.content-item .body a.dwnld:focus-visible,
.content-item .body a.b-btn-prev:focus-visible,
.content-item .body button.cta-button:focus-visible {
    outline: 2px solid var(--kg-brand-cyan);
    outline-offset: 2px;
}

@media (hover: hover) {
    .content-item .body a.template_readmore2:hover,
    .content-item .body a.dwnld:hover,
    .content-item .body a.b-btn-prev:hover,
    .content-item .body button.cta-button:hover {
        background: rgb(var(--kg-brand-cyan-rgb) / 0.08);
        color: var(--kg-brand-cyan);
        text-decoration: none;
    }
}

/* --- .imgbrdr / p.img-bckgrnd — обёртка для изображений --- */
.content-item .body .imgbrdr,
.content-item .body p.img-bckgrnd {
    text-align: center;
    border: 1px solid var(--kg-border);
    background: var(--kg-wash-1);
    border-radius: var(--kg-radius-xl);
    padding: 1rem;
    padding-bottom: 0.5rem;
    max-width: 650px;
    margin: 1.5rem auto;
}

.content-item .body .imgbrdr img,
.content-item .body p.img-bckgrnd img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    border-radius: var(--kg-radius-md);
}

/* --- span.tg_bl — бейдж Telegram --- */
.content-item .body .tg_bl {
    display: inline-block;
    color: #fff;
    border-radius: var(--kg-radius-sm);
    padding: 2px 8px 3px 32px;
    background: #61A8DE url('/templates/kapperguru/images/telegram-icon.png') no-repeat center left 6px;
    background-size: 20px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.content-item .body .tg_bl:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* --- span.yt_bl — бейдж YouTube --- */
.content-item .body .yt_bl {
    display: inline-block;
    color: #fff;
    border-radius: var(--kg-radius-sm);
    padding: 2px 8px 3px 32px;
    background: #e62017 url('/templates/kapperguru/images/youtube-icon.png') no-repeat center left 6px;
    background-size: 20px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.content-item .body .yt_bl:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Универсальный вертикальный ритм внутри секции */
.content-item .body section > * + * {
    margin-top: 1em;
}

/* Заголовки не должны получать сверху такой же отступ как обычные блоки */
.content-item .body section > h2 + *,
.content-item .body section > h3 + * {
    margin-top: 0.6em;
}

/* У последнего элемента в секции убираем нижний отступ */
.content-item .body section > :last-child {
    margin-bottom: 0;
}

/* Заголовки внутри текста статьи: более плотный line-height */
.content-item .body h2 {
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.content-item .body h3 {
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.content-item .nav-bar {
    margin: 0;
}

.content-item {
    min-height: 100vh;
}

.content-item .article {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-4xl);
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.content-item .header {
    padding: 2rem;
}

.content-item .title-block {
    text-align: center;
    margin-bottom: 3.5rem;
}

.content-item .title-main {
    display: block;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900;
    margin-bottom: 0.75rem;
    color: #f8f9fa;
}

.content-item .title-sub {
    display: block;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 500;
    color: rgba(237, 240, 242, 0.8);
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.content-item .divider {
    width: 100%;
    max-width: 320px;
    height: 1px;
    margin: -2rem auto 3rem;
    background: linear-gradient(to right, transparent, #6ad0ff, transparent);
    opacity: 0.3;
}

.content-item .featured-image {
    margin-bottom: 3rem;
    border-radius: var(--kg-radius-2xl);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px var(--kg-shadow-black-a0p25);
}

.content-item .featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.content-item .lead-meta {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

.content-item .lead {
    grid-column: span 1;
}

.content-item .lead-card {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-2xl);
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}

.content-item .lead-card p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #edf0f2;
    margin: 0;
}

.content-item .meta {
    grid-column: span 1;
}

.content-item .meta-card {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-2xl);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}

.content-item .meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;
    gap: 1rem;
    margin: 0;
}

.content-item .meta-item {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-card);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-item .meta-item--link {
    text-decoration: none;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .content-item .meta-item--link:hover {
        background: var(--kg-wash-a0p06);
    }
}

.content-item .meta-icon {
    width: 1rem;
    height: 1rem;
    color: #6ad0ff;
    flex-shrink: 0;
}

.content-item .meta-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.content-item .meta-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(233, 238, 245, 0.6);
}

.content-item .meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #edf0f2;
}

.content-item .toc {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-card);
    padding: 1.5rem;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.content-item .toc-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: rgba(233, 238, 245, 0.5);
}

.content-item .toc-grid {
    display: grid;
    gap: 0.75rem;
}

.content-item .toc-item {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-card);
    color: rgba(233, 238, 245, 0.75);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .content-item .toc-item:hover {
        background: var(--kg-wash-3);
        border-color: #6ad0ff;
        transform: translateX(0.25rem);
    }
}

.content-item .toc-num {
    font-size: 0.75rem;
    color: rgba(233, 238, 245, 0.4);
}

.content-item .body {
    padding: 0 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.content-item .body a {
    color: #6ad0ff;
    text-decoration: underline;
    text-decoration-color: rgba(106, 208, 255, 0.3);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
    .content-item .body a:hover {
        color: #87e5ff;
        text-decoration-color: rgba(135, 229, 255, 0.6);
    }
}

.content-item a,
.content-item button,
.content-item .toc-item,
.content-item .table-wrapper {
    -webkit-tap-highlight-color: transparent;
}

.content-item section {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-2xl);
    padding: 2rem;
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}

.content-item .section-title, .content-item h2 {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
}

.content-item .body h2,
.content-item .body .section-title {
    margin: 1.4em 0 0.6em;
}

.content-item .section-emoji {
    -webkit-text-fill-color: #78c2d6;
}

.content-item .section-text {
    background: linear-gradient(to right, #78c2d6, #a4d5c6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content-item .paragraph, .content-item p {
    font-size: 1rem;
    line-height: 1.75;
    color: #edf0f2;
    margin: 0 0 10px 0;
}

.content-item .body p,
.content-item .body .paragraph {
    margin: 0 0 1em 0;
}


.content-item strong {
    color: #00fff2;
    font-weight: 600;
}

.content-item .table-wrapper {
    margin: 1rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    max-width: 100%;
    border-radius: var(--kg-radius-card);
    border: 1px solid var(--kg-border);
    background: var(--kg-wash-1);
}

.content-item table, .site-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.content-item table thead tr, .site-table thead tr {
    border-bottom: 1px solid var(--kg-border);
    background: var(--kg-wash-2);
}

.content-item table th, .site-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #edf0f2;
}

.content-item table tbody tr, .site-table tbody tr {
    border-bottom: 1px solid var(--kg-border);
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .content-item table tbody tr:hover, .site-table tbody tr:hover {
        background: var(--kg-wash-1);
    }
}

.content-item table td, .site-table td {
    padding: 1rem;
    color: #edf0f2;
    border: 1px solid var(--kg-border);
}

.content-item .body table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
}

.content-item .body table img {
    max-width: 100%;
    height: auto;
}

/* Светлые подложки из старых статей: тот же оттенок, но тёмная поверхность */
.content-item .body table [style*="#f8cac6" i] {
    background-color: rgba(248, 113, 113, 0.18) !important;
    color: #edf0f2 !important;
}

.content-item .body table [style*="#c2ffb8" i] {
    background-color: rgba(74, 222, 128, 0.16) !important;
    color: #edf0f2 !important;
}

.content-item .body table [style*="#c2e0f4" i] {
    background-color: rgba(106, 208, 255, 0.16) !important;
    color: #edf0f2 !important;
}

/* Таблица шире блока: затухание у края показывает продолжение (состояние ставит article.js) */
.content-item .table-wrapper[data-scroll="start"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.content-item .table-wrapper[data-scroll="middle"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.content-item .table-wrapper[data-scroll="end"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
    mask-image: linear-gradient(to right, transparent, #000 40px);
}





.content-item .body blockquote p {
    margin: 0;
}

.content-item .body blockquote,.content-item .infobox {
    border-left: 4px solid;
    border-radius: 0 var(--kg-radius-card) var(--kg-radius-card) 0;
    padding: 1.5rem;
    margin: 1em 0;
    font-size: inherit;
    line-height: inherit;
}

.content-item .infobox p {
    margin: 0;
    color: #edf0f2;
}

.content-item .infobox--primary {
    border-color: var(--kg-brand-cyan);
    background: rgb(var(--kg-brand-cyan-rgb) / 0.1);
}

.content-item .infobox--destructive {
    border-color: hsl(0, 84%, 60%);
    background: hsla(0, 84%, 60%, 0.1);
}

.content-item .infobox-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.content-item .infobox--primary .infobox-title {
    color: var(--kg-brand-cyan);
}

.content-item .infobox--destructive .infobox-title {
    color: hsl(0, 84%, 60%);
}

.content-item .subsections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.content-item .subsection-title {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(265, 70%, 63%);
    margin-top: 0.5rem;
}

.content-item figure {
    margin: 1rem 0;
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-card);
    overflow: hidden;
    background: var(--kg-wash-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.content-item figure img {
    width: 100%;
    height: auto;
    display: block;
}

.content-item figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: rgba(233, 238, 245, 0.7);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--kg-border);
}


@media (min-width: 768px) {
    .content-item .header {
        padding: 3rem;
    }

        .content-item .lead-meta {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
    }
    
    
        .content-item .lead-card p {
        font-size: 1.25rem;
    }
    .content-item .lead {
        grid-column: span 2;
    }
    
        .content-item .toc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
        .content-item .body {
        padding: 0 3rem 3rem;
    }
    
        .content-item .paragraph, .content-item p {
        font-size: 1.125rem;
        line-height: 1.8;
    }

    .content-item .paragraph2 {
        line-height: 1.625;
        font-size: 1rem;
    }
    
        .content-item .subsection-title {
        font-size: 1.5rem;
    }
    
        .content-item section {
        padding: 2.5rem;
    }

    .content-item .section-title, .content-item h2 {
        font-size: 2.25rem;
    }
    
}

@media (max-width: 768px) {
    .content-item .body table th,
    .content-item .body table td,
    .content-item .body table.rainbowTable2 tr > *,
    .content-item .body table.rainbowTable tr > * {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
        line-height: 1.35;
        overflow-wrap: break-word;
    }

    .content-item .body table p {
        margin: 0;
        font-size: inherit;
        line-height: inherit;
    }

    .content-item .body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    

        .content-item .lead-meta {
        margin-bottom: 2rem;
    }
}
/* Article anchors clear the 64px sticky site header. */
.content-item .body [id] {
    scroll-margin-top: 80px;
}

.content-item .toc:not(:has(a[href])) {
    display: none;
}

/* Legacy editor colours need higher contrast on the dark article surface. */
.content-item .body [style*="color: #169179"] {
    color: #5ee0bb !important;
}

.content-item .body [style*="color: #ba372a"] {
    color: #ff9388 !important;
}

.content-item .table-wrapper:focus-visible {
    outline: 2px solid var(--kg-brand-cyan);
    outline-offset: 2px;
}

/* #5132: the blog header owns every gap; bookmaker.php keeps its existing layout. */
.content-item .header.kg-blog-article-top {
    display: flex;
    flex-direction: column;
    gap: var(--kg-rhythm-head, 24px);
}
.content-item .kg-blog-article-top > *,
.content-item .kg-blog-article-top .title-main { margin: 0; }
.content-item .kg-blog-article-top .title-block { line-height: 1.2; }
.content-item .kg-blog-article-top .title-main {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}
.content-item .kg-blog-article-top .title-sub {
    margin-top: var(--kg-rhythm-related, 12px);
    font-size: clamp(.875rem, 1.5vw, 1.125rem);
    line-height: 1.4;
    color: var(--kg-text-secondary);
}
.content-item .kg-blog-article-top .featured-image {
    align-self: center;
    width: 100%;
    max-width: 720px;
}
.content-item .kg-blog-article-top > .kg-review-site-action { margin: 0; }
.content-item .kg-blog-article-top .lead-meta {
    display: flex;
    flex-direction: column;
    gap: var(--kg-rhythm-stack);
}
.content-item .kg-blog-article-top .lead-meta:not(:first-child) {
    margin-top: calc(var(--kg-rhythm-stack) - var(--kg-rhythm-head, 24px));
}
.content-item .kg-blog-article-top .lead-card {
    height: auto;
    display: block;
}
.content-item .kg-blog-article-top .lead-card p {
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}
.content-item .kg-blog-article-top .lead-card p + p { margin-top: var(--kg-rhythm-related, 12px); }
.content-item .kg-blog-article-top .lead-meta + .toc {
    margin-top: calc(var(--kg-rhythm-stack) - var(--kg-rhythm-head, 24px));
}
@media (min-width: 768px) {
    .content-item .kg-blog-article-top .lead-card p { font-size: 1.125rem; line-height: 1.8; }
}

/* The opening groups title, cover and lead.
   On desktop its children remain in the original header flex stack. */
.content-item .kg-article-opening { display: contents; }
.content-item .kg-article-opening > * { margin: 0; }
@media (width >= 768px) {
    .content-item .kg-article-opening > .lead {
        order: 1;
        margin-top: calc(var(--kg-rhythm-stack) - var(--kg-rhythm-head, 24px));
    }
    .content-item .kg-blog-article-top > .lead-meta { order: 2; }
    .content-item .kg-blog-article-top > .toc { order: 3; }
}

/* #5201, #5232: mobile blog/secrets/reviews articles; desktop and other layouts stay unchanged. */
@media (width < 768px) {
    .content-item:has(> .article > .kg-blog-article-top) {
        /* Cancel the main container's outer gutter and top padding for the article only. */
        margin: -1rem -1rem 0;
        min-height: 0;
    }

    .content-item > .article:has(> .kg-blog-article-top) {
        --kg-article-gutter: 1rem;
        --kg-article-stack-gap: var(--kg-article-gutter);
        /* Montserrat's ink starts about 5px below its line box: 35 + 5 = 40px. */
        --kg-article-top: 35px;
        --kg-article-cover-min: 160px;
        --kg-article-opening-height: calc(100vh - var(--kg-edge-header-height, 64px) - var(--kg-article-top));
        --kg-article-divider: rgba(255, 255, 255, .05);
        --kg-article-lead-edge: 2px;
        --kg-article-lead-glow: 0 0 12px rgb(var(--kg-brand-cyan-rgb) / .22);
        --kg-article-cell-padding: 1rem;
        --kg-article-toc-number: rgba(233, 238, 245, .4);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .content-item .header.kg-blog-article-top {
        --kg-article-h1-mobile: 26px;
        gap: var(--kg-article-stack-gap);
        padding: var(--kg-article-top) var(--kg-article-gutter) var(--kg-article-stack-gap);
    }

    .content-item .kg-article-opening {
        display: flex;
        flex-direction: column;
        gap: var(--kg-article-stack-gap);
    }

    .content-item .kg-article-opening > * { flex-shrink: 0; }

    .content-item .kg-article-opening .featured-image {
        position: relative;
        flex: none;
        height: clamp(min(var(--kg-article-cover-min), calc((100vw - 2 * var(--kg-article-gutter)) * var(--kg-article-cover-ratio, .5625))), calc(var(--kg-article-opening-height) * .4), calc((100vw - 2 * var(--kg-article-gutter)) * var(--kg-article-cover-ratio, .5625)));
    }

    .content-item .kg-article-opening .featured-image img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
    }

    .content-item .kg-article-opening > .lead {
        display: block;
        flex: none;
        min-width: 0;
    }

    .content-item .kg-article-opening .lead-card {
        position: relative;
        height: auto;
        border: 0;
        background: var(--kg-article-surface);
        box-shadow: var(--kg-article-surface-shadow);
    }

    .content-item .kg-article-opening .lead-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--kg-radius-2xl);
        right: var(--kg-radius-2xl);
        height: var(--kg-article-lead-edge);
        background: linear-gradient(90deg, transparent, var(--kg-brand-cyan), transparent);
        box-shadow: var(--kg-article-lead-glow);
        pointer-events: none;
    }

    /* #5266: one soft mobile surface for the article's utility cards. */
    .content-item > .article:has(> .kg-blog-article-top) :is(.meta-card, .toc) {
        background: var(--kg-article-surface);
        border-color: var(--kg-article-surface-border);
        box-shadow: var(--kg-article-surface-shadow);
    }

    .content-item .kg-blog-article-top .toc {
        padding: var(--kg-article-cell-padding);
    }
    .content-item .kg-blog-article-top .toc-item {
        padding-left: 0;
        padding-right: 0;
    }
    .content-item .kg-blog-article-top .toc-item:first-child { padding-top: 0; }
    .content-item .kg-blog-article-top .toc-item:last-child { padding-bottom: 0; }

    .content-item .kg-blog-article-top .meta-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        height: auto;
        overflow: hidden;
    }

    .content-item .kg-blog-article-top .meta-grid { display: contents; }

    .content-item .kg-blog-article-top .meta-item {
        min-width: 0;
        padding: var(--kg-article-cell-padding);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: 1px 0 var(--kg-article-divider), 0 1px var(--kg-article-divider);
        overflow-wrap: anywhere;
    }

    .content-item .kg-blog-article-top .kg-article-author-desktop,
    .content-item .kg-blog-article-top .kg-article-author--empty { display: none; }
    /* Override the template’s global [hidden] !important only for the mobile byline. */
    .content-item .kg-blog-article-top .kg-article-author-mobile[hidden] { display: inline !important; }
    .content-item .kg-blog-article-top .meta-card:has(.kg-article-author--empty) .meta-grid:last-child > .meta-item:last-child { grid-column: 1 / -1; }

    .content-item .kg-blog-article-top .toc-grid { gap: 0; }
    .content-item .kg-blog-article-top .toc-item {
        background: transparent;
        border: 0;
        border-radius: 0;
        transform: none;
    }
    .content-item .kg-blog-article-top .toc-item + .toc-item {
        border-top: 1px solid var(--kg-article-divider);
    }
    .content-item .kg-blog-article-top .toc-num { color: var(--kg-article-toc-number); }

    .content-item .header.kg-blog-article-top > .lead-meta:not(:first-child),
    .content-item .header.kg-blog-article-top > .lead-meta + .toc {
        margin: 0;
    }

    .content-item .kg-blog-article-top > .lead-meta { order: 1; }
    .content-item .kg-blog-article-top > .kg-review-summary { order: 2; }
    .content-item .kg-blog-article-top > .kg-review-site-action { order: 3; }
    .content-item .kg-blog-article-top > .toc { order: 4; }

    @supports (height: 100svh) {
        .content-item > .article:has(> .kg-blog-article-top) {
            --kg-article-opening-height: calc(100svh - var(--kg-edge-header-height, 64px) - var(--kg-article-top));
        }
    }

    .content-item .kg-blog-article-top .title-main {
        font-size: var(--kg-article-h1-mobile);
    }

    .content-item .kg-blog-article-top + .body {
        --kg-article-h2-mobile: 22px;
        --kg-article-h3-mobile: 19px;
        --kg-article-heading-line-height-mobile: 1.2;
        display: flex;
        gap: var(--kg-article-stack-gap);
        padding-left: var(--kg-article-gutter) !important;
        padding-right: var(--kg-article-gutter) !important;
        /* The following modules already own their 32px section gap. */
        padding-bottom: 0;
    }

    .content-item .kg-blog-article-top + .body,
    .content-item .kg-blog-article-top + .body section {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .content-item .kg-blog-article-top + .body section { padding: 0; }
    .content-item .kg-blog-article-top + .body section > :first-child { margin-top: 0; }

    .content-item .kg-blog-article-top + .body > * {
        margin-top: 0;
        margin-bottom: 0;
    }

    .content-item .kg-blog-article-top + .body > .nav-bar {
        gap: var(--kg-article-stack-gap);
    }

    .content-item .kg-blog-article-top + .body h2 {
        font-size: var(--kg-article-h2-mobile);
        line-height: var(--kg-article-heading-line-height-mobile);
    }

    .content-item .kg-blog-article-top + .body h3 {
        font-size: var(--kg-article-h3-mobile);
        line-height: var(--kg-article-heading-line-height-mobile);
    }
}

/* #5271: reading colours and paragraph rhythm, shared by both viewports.
   Keep these tokens local to the article; headings and semantic callouts retain
   their existing colours. CMS line breaks are deliberately not rewritten. */
.content-item .article:has(> .kg-blog-article-top) {
    --kg-article-text: #cfd6db;
    --kg-article-accent-text: #3cc8dc;
    --kg-article-paragraph-gap: 12px;
}

.content-item .kg-blog-article-top + .body,
.content-item .kg-blog-article-top .lead-card p,
.content-item .kg-blog-article-top + .body :is(p, .paragraph, td) {
    color: var(--kg-article-text);
}

.content-item .kg-blog-article-top + .body :is(h2, h3) {
    color: var(--kg-text);
}

.content-item .kg-blog-article-top + .body :is(p.green, p.red) {
    color: rgba(237, 240, 242, 0.85);
}

.content-item .kg-blog-article-top + .body :is(strong, span.bold),
.content-item .kg-blog-article-top + .body :is(p, li, .paragraph) a:not(:is(.kg-review-button, .template_readmore2, .dwnld, .b-btn-prev, .tg_bl, .yt_bl)) {
    color: var(--kg-article-accent-text);
    text-decoration-color: rgb(60 200 220 / 0.3);
}

.content-item .kg-blog-article-top + .body p.green .bold { color: #4ade80; }
.content-item .kg-blog-article-top + .body p.red .bold { color: #fb923c; }

.content-item .kg-blog-article-top + .body :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)):not(:last-child) {
    margin-bottom: var(--kg-article-paragraph-gap);
}

.content-item .kg-blog-article-top + .body :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)) + :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)) {
    margin-top: var(--kg-article-paragraph-gap);
}

/* Direct children participate in the body's flex gap instead of margin collapse. */
.content-item .kg-blog-article-top + .body > :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)):not(:last-child):has(+ :is(p, .paragraph)) {
    margin-bottom: 0;
}
.content-item .kg-blog-article-top + .body > :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)) + :is(p, .paragraph):not(.img-bckgrnd, .imgbrdr, :has(> img)) {
    margin-top: calc(var(--kg-article-paragraph-gap) - var(--kg-article-paragraph-flex-gap, var(--kg-article-stack-gap, 2rem)));
}

/* Existing heading rhythm is retained, with a 12px floor for small headings. */
.content-item .kg-blog-article-top + .body section > :is(h2, h3) + * {
    margin-top: max(0.6em, var(--kg-article-paragraph-gap));
}

/* A legacy unclassed image paragraph has no top margin of its own. */
.content-item .kg-blog-article-top + .body :is(p, .paragraph):not(:last-child):has(+ .img-bckgrnd, + .imgbrdr, + p > img) {
    margin-bottom: 1em;
}

@media (min-width: 768px) {
    /* Service reviews use block flow on desktop (review-elements.css). */
    .content-item .kg-blog-article-top + .body.kg-review-service-body {
        --kg-article-paragraph-flex-gap: 0px;
    }
}