/* ==========================================================
   Knowledge article — Штрафы за ЭТрН (из DEV/shtrafy-etrn).
   Все селекторы ограничены .knowledge-article, чтобы не ломать лендинг.
   ========================================================== */

.knowledge-article .knowledge-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 500;
    color: #607084;
    text-decoration: none;
    transition: color 0.25s;
}

.knowledge-article .knowledge-back:hover {
    color: #1976d2;
}

/*==================================================
    ШТРАФЫ ЗА ЭТрН
    Часть 1
    Hero + Intro
==================================================*/

.knowledge-article {

    --color-primary:#1976d2;
    --color-secondary:#16c4b7;
    --color-danger:#ff5252;

    --color-dark:#203040;
    --color-text:#4f6478;
    --color-light:#f7fbff;
    --color-border:#dce8f4;

    --shadow:
        0 18px 45px rgba(25,118,210,.08);

    --radius:22px;

    --transition:.35s;
}

/****************************************************
                    Base
****************************************************/

.knowledge-article * {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.knowledge-article {
    scroll-behavior:smooth;
}

.knowledge-article {

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:#ffffff;
    color:var(--color-text);

    line-height:1.7;

    overflow-x:hidden;
}

.knowledge-article img {
    display:block;
    max-width:100%;
}

.knowledge-article a {

    color:inherit;

    text-decoration:none;

    transition:var(--transition);
}

.knowledge-article .container {

    width:min(1240px,92%);

    margin:auto;
}

.knowledge-article {

    overflow:hidden;
}

.knowledge-article section {

    position:relative;
}

/****************************************************
                Hero
****************************************************/

.knowledge-article .hero {

    padding:

        70px
        0
        90px;

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbff 100%
        );
}

/****************************************************
            Background circles
****************************************************/

.knowledge-article .hero__background {

    position:absolute;

    inset:0;

    pointer-events:none;
}

.knowledge-article .hero__circle {

    position:absolute;

    border-radius:50%;

    filter:blur(15px);

    opacity:.10;
}

.knowledge-article .hero__circle--blue {

    width:520px;
    height:520px;

    background:#1976d2;

    right:-180px;
    top:-180px;
}

.knowledge-article .hero__circle--green {

    width:380px;
    height:380px;

    background:#16c4b7;

    left:-120px;
    bottom:-120px;
}

/****************************************************
                Breadcrumbs
****************************************************/

.knowledge-article .breadcrumbs {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    font-size:.92rem;

    margin-bottom:45px;

    color:#6d8397;
}

.knowledge-article .breadcrumbs a {

    color:var(--color-primary);

    font-weight:500;
}

.knowledge-article .breadcrumbs a:hover {

    color:var(--color-secondary);
}

/****************************************************
                Hero layout
****************************************************/

.knowledge-article .hero__content {

    display:grid;

    grid-template-columns:

        1.2fr
        .8fr;

    gap:70px;

    align-items:center;
}

/****************************************************
                Badge
****************************************************/

.knowledge-article .hero__badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:

        10px
        18px;

    border-radius:50px;

    background:

        rgba(22,196,183,.12);

    color:

        var(--color-secondary);

    font-size:.92rem;

    font-weight:700;

    margin-bottom:24px;
}

/****************************************************
                    H1
****************************************************/

.knowledge-article .hero h1 {

    font-size:

        clamp(
            2.3rem,
            5vw,
            3.6rem
        );

    line-height:1.15;

    color:var(--color-dark);

    margin-bottom:28px;

    max-width:760px;
}

.knowledge-article .hero__lead {

    font-size:1.15rem;

    color:#5f7386;

    max-width:760px;

    margin-bottom:40px;
}

/****************************************************
                Buttons
****************************************************/

.knowledge-article .hero__buttons {

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:42px;
}

.knowledge-article .btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:

        16px
        28px;

    border-radius:16px;

    font-weight:700;

    transition:var(--transition);
}

.knowledge-article .btn-primary {

    background:

        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#ffffff;

    box-shadow:

        0 12px 30px
        rgba(25,118,210,.25);
}

.knowledge-article .btn-primary:hover {

    transform:

        translateY(-4px);

    box-shadow:

        0 18px 40px
        rgba(25,118,210,.35);
}

.knowledge-article .btn-secondary {

    background:#ffffff;

    color:var(--color-primary);

    border:

        2px solid
        var(--color-border);
}

.knowledge-article .btn-secondary:hover {

    border-color:

        var(--color-secondary);

    color:

        var(--color-secondary);
}

/****************************************************
                    Meta
****************************************************/

.knowledge-article .hero__meta {

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.knowledge-article .hero__meta div {

    background:#ffffff;

    border:

        1px solid
        var(--color-border);

    border-radius:16px;

    padding:

        16px
        22px;

    box-shadow:var(--shadow);

    font-size:.93rem;
}

.knowledge-article .hero__meta strong {

    color:var(--color-dark);
}

/****************************************************
                Illustration
****************************************************/

.knowledge-article .hero__image {

    display:flex;

    justify-content:center;

    align-items:center;
}

.knowledge-article .hero__image svg {

    width:100%;

    max-width:500px;

    animation:

        floating
        5s
        ease-in-out
        infinite;

    filter:

        drop-shadow(
            0 25px 40px
            rgba(25,118,210,.15)
        );
}

@keyframes floating{

    0%{

        transform:
            translateY(0);
    }

    50%{

        transform:
            translateY(-10px);
    }

    100%{

        transform:
            translateY(0);
    }
}

/****************************************************
                Important note
****************************************************/

.knowledge-article .important-note {

    margin-top:-20px;

    padding-bottom:70px;
}

.knowledge-article .note {

    display:flex;

    gap:30px;

    align-items:flex-start;

    padding:

        35px
        40px;

    border-radius:24px;

    background:#ffffff;

    box-shadow:var(--shadow);
}

.knowledge-article .note-warning {

    border-left:

        6px solid
        var(--color-danger);
}

.knowledge-article .note__icon {

    font-size:2rem;

    flex-shrink:0;
}

.knowledge-article .note h2 {

    color:var(--color-dark);

    margin-bottom:14px;

    font-size:1.6rem;
}

.knowledge-article .note p {

    color:var(--color-text);
}

/****************************************************
                Intro
****************************************************/

.knowledge-article .intro {

    padding:

        10px
        0
        90px;
}

.knowledge-article .section-heading {

    text-align:center;

    max-width:900px;

    margin:

        auto
        auto
        60px;
}

.knowledge-article .section-label {

    display:inline-block;

    padding:

        8px
        18px;

    border-radius:30px;

    background:

        rgba(25,118,210,.08);

    color:

        var(--color-primary);

    font-weight:700;

    margin-bottom:18px;
}

.knowledge-article .section-heading h2 {

    color:var(--color-dark);

    font-size:

        clamp(
            2rem,
            4vw,
            2.9rem
        );

    margin-bottom:22px;
}

.knowledge-article .section-heading p {

    font-size:1.08rem;
}

/****************************************************
                Intro Grid
****************************************************/

.knowledge-article .intro-grid {

    display:grid;

    grid-template-columns:

        2fr
        1fr;

    gap:45px;

    align-items:start;
}

.knowledge-article .intro-text p {

    margin-bottom:22px;

    font-size:1.05rem;
}

/****************************************************
                Facts
****************************************************/

.knowledge-article .quick-facts {

    display:grid;

    gap:22px;
}

.knowledge-article .fact-card {

    background:#ffffff;

    border:

        1px solid
        var(--color-border);

    border-radius:20px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);
}

.knowledge-article .fact-card:hover {

    transform:

        translateY(-6px);
}

.knowledge-article .fact-card__number {

    font-size:2.8rem;

    font-weight:800;

    color:var(--color-secondary);

    margin-bottom:10px;
}

.knowledge-article .fact-card__text {

    color:var(--color-text);

    font-weight:600;
}

/****************************************************
                Next section
****************************************************/

.knowledge-article .content-section {

    padding-bottom:60px;
}

/****************************************************
                Responsive
****************************************************/

@media (max-width:980px){

.knowledge-article .hero__content {

    grid-template-columns:1fr;

    text-align:center;
}

.knowledge-article .hero__buttons {

    justify-content:center;
}

.knowledge-article .hero__meta {

    justify-content:center;
}

.knowledge-article .intro-grid {

    grid-template-columns:1fr;
}

.knowledge-article .hero__image {

    order:-1;
}

}

@media (max-width:640px){

.knowledge-article .hero {

    padding-top:50px;
}

.knowledge-article .hero__meta {

    flex-direction:column;
}

.knowledge-article .note {

    flex-direction:column;

    padding:28px;
}

.knowledge-article .btn {

    width:100%;
}

.knowledge-article .hero__buttons {

    flex-direction:column;
}

}

/*==================================================
        ШТРАФЫ ЗА ЭТрН
        CSS. Часть 2
        Нарушения • Таблица • Внимание
==================================================*/

/****************************************************
                    Violations
****************************************************/

.knowledge-article .violations-grid {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;

    margin-top:50px;
}

.knowledge-article .violation-card {

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:24px;

    padding:34px 30px;

    box-shadow:var(--shadow);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

    display:flex;

    flex-direction:column;

    height:100%;

    position:relative;

    overflow:hidden;
}

.knowledge-article .violation-card::before {

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;
}

.knowledge-article .violation-card:hover {

    transform:translateY(-8px);

    box-shadow:
        0 22px 45px rgba(25,118,210,.14);

    border-color:#b7d8ff;
}

.knowledge-article .violation-card:hover::before {

    transform:scaleX(1);
}

/****************************************************
                    Icon
****************************************************/

.knowledge-article .violation-card__icon {

    width:72px;
    height:72px;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:2rem;

    border-radius:18px;

    margin-bottom:24px;

    background:
        linear-gradient(
            135deg,
            rgba(22,196,183,.12),
            rgba(25,118,210,.10)
        );
}

.knowledge-article .violation-card h3 {

    color:var(--color-dark);

    font-size:1.35rem;

    margin-bottom:18px;

    line-height:1.3;
}

.knowledge-article .violation-card p {

    color:var(--color-text);

    margin-bottom:26px;

    flex:1;
}

/****************************************************
                Risk labels
****************************************************/

.knowledge-article .risk {

    align-self:flex-start;

    padding:
        10px 18px;

    border-radius:40px;

    font-size:.88rem;

    font-weight:700;
}

.knowledge-article .risk-high {

    background:
        rgba(255,82,82,.14);

    color:#d73737;
}

.knowledge-article .risk-medium {

    background:
        rgba(255,193,7,.18);

    color:#b27a00;
}

.knowledge-article .risk-low {

    background:
        rgba(22,196,183,.15);

    color:#0d8d83;
}

/****************************************************
            Responsibility
****************************************************/

.knowledge-article .responsibility {

    padding:
        90px
        0;
}

.knowledge-article .table-wrapper {

    overflow-x:auto;

    border-radius:24px;

    box-shadow:var(--shadow);
}

.knowledge-article .responsibility-table {

    width:100%;

    border-collapse:collapse;

    min-width:900px;

    background:#ffffff;
}

/****************************************************
                Table Head
****************************************************/

.knowledge-article .responsibility-table thead {

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#ffffff;
}

.knowledge-article .responsibility-table th {

    text-align:left;

    padding:
        24px 26px;

    font-size:1rem;

    font-weight:700;
}

/****************************************************
                Table Body
****************************************************/

.knowledge-article .responsibility-table td {

    padding:
        22px
        26px;

    border-bottom:
        1px solid
        #edf4fb;

    color:var(--color-text);

    vertical-align:top;
}

.knowledge-article .responsibility-table tbody tr {

    transition:.25s;
}

.knowledge-article .responsibility-table tbody tr:hover {

    background:#f8fcff;
}

.knowledge-article .responsibility-table tbody td:first-child {

    font-weight:700;

    color:var(--color-dark);

    white-space:nowrap;
}

/****************************************************
            Attention block
****************************************************/

.knowledge-article .attention {

    padding-bottom:90px;
}

.knowledge-article .attention-box {

    display:flex;

    align-items:flex-start;

    gap:35px;

    padding:
        42px
        46px;

    border-radius:28px;

    background:

        linear-gradient(
            135deg,
            rgba(25,118,210,.05),
            rgba(22,196,183,.06)
        );

    border:
        1px solid
        rgba(22,196,183,.18);
}

.knowledge-article .attention-box__icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:20px;

    font-size:2rem;

    background:#ffffff;

    box-shadow:var(--shadow);
}

.knowledge-article .attention-box__content h2 {

    color:var(--color-dark);

    margin-bottom:18px;

    font-size:1.8rem;
}

.knowledge-article .attention-box__content p {

    color:var(--color-text);

    font-size:1.05rem;

    line-height:1.8;
}

/****************************************************
                Examples
****************************************************/

.knowledge-article .examples {

    padding:
        20px
        0
        90px;
}

/****************************************************
                Responsive
****************************************************/

@media (max-width:1180px){

    .knowledge-article .violations-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

}

@media (max-width:900px){

    .knowledge-article .attention-box {

        flex-direction:column;
    }

}

@media (max-width:768px){

    .knowledge-article .violations-grid {

        grid-template-columns:1fr;
    }

    .knowledge-article .responsibility {

        padding:70px 0;
    }

    .knowledge-article .attention {

        padding-bottom:70px;
    }

    .knowledge-article .attention-box {

        padding:30px;
    }

    .knowledge-article .attention-box__icon {

        width:70px;
        height:70px;
    }

    .knowledge-article .attention-box__content h2 {

        font-size:1.5rem;
    }

}

@media (max-width:560px){

    .knowledge-article .violation-card {

        padding:28px 24px;
    }

    .knowledge-article .responsibility-table th, .knowledge-article .responsibility-table td {

        padding:
            18px
            18px;
    }

}

/*==================================================
        ШТРАФЫ ЗА ЭТрН
        CSS. Часть 3
        Примеры • Таймлайн • FAQ • CTA
==================================================*/

/****************************************************
                    Examples
****************************************************/

.knowledge-article .examples-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    margin-top:55px;
}

.knowledge-article .example-card {

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:24px;

    padding:32px;

    box-shadow:var(--shadow);

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;
}

.knowledge-article .example-card:hover {

    transform:translateY(-8px);

    box-shadow:
        0 24px 48px rgba(25,118,210,.14);
}

.knowledge-article .example-card__header {

    margin-bottom:22px;
}

.knowledge-article .example-number {

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#ffffff;

    font-weight:700;

    font-size:.85rem;

    margin-bottom:16px;
}

.knowledge-article .example-card h3 {

    color:var(--color-dark);

    font-size:1.4rem;

    line-height:1.35;

    margin-bottom:16px;
}

.knowledge-article .example-card p {

    color:var(--color-text);

    margin-bottom:24px;
}

/****************************************************
                    Calc table
****************************************************/

.knowledge-article .calc-table {

    width:100%;

    border-collapse:collapse;

    margin-bottom:26px;
}

.knowledge-article .calc-table td {

    padding:14px 0;

    border-bottom:1px dashed #d9e7f4;

    color:var(--color-text);
}

.knowledge-article .calc-table td:last-child {

    text-align:right;

    font-weight:700;

    color:var(--color-dark);
}

.knowledge-article .calc-table .total td {

    padding-top:18px;

    border-bottom:none;

    color:var(--color-primary);

    font-size:1.05rem;
}

.knowledge-article .example-result {

    margin-top:auto;

    padding:18px;

    border-radius:16px;

    background:
        rgba(22,196,183,.08);

    border-left:4px solid var(--color-secondary);

    color:var(--color-dark);

    line-height:1.6;
}

/* Полузаметная оговорка под примерами расчётов: цифры — ориентир, не универсальный тариф */
.knowledge-article .examples-disclaimer {

    margin:28px 0 0;

    padding:0 4px;

    max-width:52rem;

    font-size:.88rem;

    line-height:1.55;

    color:#8a9bab;

    font-style:italic;
}

/****************************************************
                    Timeline
****************************************************/

.knowledge-article .inspection {

    padding:90px 0;
}

.knowledge-article .timeline {

    position:relative;

    max-width:900px;

    margin:60px auto 0;
}

.knowledge-article .timeline::before {

    content:"";

    position:absolute;

    left:29px;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            to bottom,
            var(--color-primary),
            var(--color-secondary)
        );

    border-radius:20px;
}

.knowledge-article .timeline-item {

    display:flex;

    gap:28px;

    position:relative;

    margin-bottom:45px;
}

.knowledge-article .timeline-item:last-child {

    margin-bottom:0;
}

.knowledge-article .timeline-item__number {

    width:62px;
    height:62px;

    border-radius:50%;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#ffffff;

    font-size:1.3rem;

    font-weight:700;

    position:relative;

    z-index:2;

    box-shadow:
        0 10px 25px rgba(25,118,210,.20);
}

.knowledge-article .timeline-item__content {

    background:#ffffff;

    border-radius:20px;

    padding:26px 28px;

    box-shadow:var(--shadow);

    flex:1;
}

.knowledge-article .timeline-item__content h3 {

    color:var(--color-dark);

    margin-bottom:12px;

    font-size:1.3rem;
}

.knowledge-article .timeline-item__content p {

    color:var(--color-text);
}

/****************************************************
                    Checklist
****************************************************/

.knowledge-article .checklist {

    padding-bottom:90px;
}

.knowledge-article .check-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin-top:55px;
}

.knowledge-article .check-item {

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:18px;

    padding:24px 26px;

    box-shadow:var(--shadow);

    font-weight:600;

    color:var(--color-dark);

    transition:.3s;
}

.knowledge-article .check-item:hover {

    transform:translateY(-4px);

    border-color:var(--color-secondary);
}

/****************************************************
                        FAQ
****************************************************/

.knowledge-article .faq {

    padding-bottom:90px;
}

.knowledge-article .faq-list {

    max-width:950px;

    margin:55px auto 0;
}

.knowledge-article .faq-list details {

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;
}

.knowledge-article .faq-list details:hover {

    border-color:#c7ddf3;
}

.knowledge-article .faq-list summary {

    cursor:pointer;

    list-style:none;

    padding:24px 30px;

    font-size:1.1rem;

    font-weight:700;

    color:var(--color-dark);

    position:relative;

    transition:.3s;
}

.knowledge-article .faq-list summary::-webkit-details-marker {

    display:none;
}

.knowledge-article .faq-list summary::after {

    content:"+";

    position:absolute;

    right:28px;
    top:50%;

    transform:translateY(-50%);

    font-size:1.8rem;

    color:var(--color-primary);

    transition:.3s;
}

.knowledge-article .faq-list details[open] summary::after {

    transform:
        translateY(-50%)
        rotate(45deg);
}

.knowledge-article .faq-list details p {

    padding:
        0
        30px
        28px;

    color:var(--color-text);

    line-height:1.8;
}

/****************************************************
                    CTA
****************************************************/

.knowledge-article .cta {

    padding-bottom:90px;
}

.knowledge-article .cta-box {

    text-align:center;

    padding:
        70px
        60px;

    border-radius:32px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 28px 55px rgba(25,118,210,.22);
}

.knowledge-article .cta-box h2 {

    font-size:

        clamp(
            2rem,
            4vw,
            3rem
        );

    margin-bottom:22px;
}

.knowledge-article .cta-box p {

    max-width:760px;

    margin:
        0 auto 36px;

    font-size:1.12rem;

    line-height:1.8;

    opacity:.97;
}

.knowledge-article .cta-box .btn {

    background:#ffffff;

    color:var(--color-primary);

    border:none;

    min-width:260px;
}

.knowledge-article .cta-box .btn:hover {

    transform:translateY(-5px);

    color:var(--color-secondary);
}

/****************************************************
                Responsive
****************************************************/

@media (max-width:1180px){

    .knowledge-article .examples-grid {

        grid-template-columns:1fr;
    }

}

@media (max-width:900px){

    .knowledge-article .check-grid {

        grid-template-columns:1fr;
    }

}

@media (max-width:768px){

    .knowledge-article .timeline::before {

        left:24px;
    }

    .knowledge-article .timeline-item {

        gap:18px;
    }

    .knowledge-article .timeline-item__number {

        width:50px;
        height:50px;

        font-size:1rem;
    }

    .knowledge-article .timeline-item__content {

        padding:22px;
    }

    .knowledge-article .cta-box {

        padding:50px 28px;
    }

}

@media (max-width:560px){

    .knowledge-article .example-card {

        padding:24px;
    }

    .knowledge-article .faq-list summary {

        padding:20px;
        padding-right:55px;
    }

    .knowledge-article .faq-list details p {

        padding:
            0
            20px
            22px;
    }

}

.knowledge-article .faq-answer {
    padding:0 30px 28px;
}

.knowledge-article .faq-answer p {
    margin-bottom:18px;
}

.knowledge-article .faq-check-list {

    margin:
        0 0 22px 20px;

}

.knowledge-article .faq-check-list li {

    margin-bottom:10px;

}

.knowledge-article .faq-warning {

    padding:18px 22px;

    margin:20px 0;

    border-left:4px solid var(--color-danger);

    background:rgba(255,82,82,.08);

    border-radius:12px;

    color:var(--color-dark);

}

/****************************************************
        FAQ extended answer
        Examples + code blocks
****************************************************/

.knowledge-article .faq-answer h3 {

    color:var(--color-dark);

    font-size:1.25rem;

    margin:

        32px
        0
        18px;

    line-height:1.4;
}


.knowledge-article .faq-answer strong {

    color:var(--color-dark);

}


/****************************************************
                FAQ checklist
****************************************************/

/* list-style:disc ? ??????????? ?????????? ul{list-style:none} ?? style.css */
.knowledge-article .faq-check-list {

    margin:

        18px
        0
        28px
        22px;

    padding:0;

    list-style: disc outside;

    list-style-type: disc;

}


.knowledge-article .faq-check-list li {

    position:relative;

    margin-bottom:14px;

    padding-left:8px;

    color:var(--color-text);

    line-height:1.7;

    list-style: disc outside;

}


.knowledge-article .faq-check-list li::marker {

    color: var(--color-secondary);

    font-size: 1.15em;

}


/****************************************************
                FAQ examples
****************************************************/

.knowledge-article .faq-example {

    margin:

        24px
        0;

    padding:

        24px
        28px;

    border-radius:18px;

    background:#f8fcff;

    border-left:

        4px solid
        var(--color-primary);

}


.knowledge-article .faq-example h4 {

    margin-bottom:14px;

    color:var(--color-dark);

    font-size:1.1rem;

}


.knowledge-article .faq-example p {

    margin-bottom:14px;

}


.knowledge-article .faq-example p:last-child {

    margin-bottom:0;

}


/****************************************************
                Code example
****************************************************/

.knowledge-article .code-example {

    display:inline-block;

    margin:

        8px
        0
        18px;

    padding:

        14px
        24px;

    border-radius:12px;

    background:

        linear-gradient(
            135deg,
            rgba(25,118,210,.08),
            rgba(22,196,183,.10)
        );

    color:var(--color-dark);

    font-weight:700;

    font-size:1.05rem;

    border:

        1px solid
        rgba(25,118,210,.12);

}


/****************************************************
                FAQ warning
****************************************************/

.knowledge-article .faq-warning {

    margin:

        28px
        0;

    padding:

        22px
        26px;

    border-radius:16px;

    background:

        rgba(255,82,82,.07);

    border-left:

        5px solid
        var(--color-danger);

    color:var(--color-text);

    line-height:1.75;

}


.knowledge-article .faq-warning strong {

    display:block;

    margin-bottom:8px;

    color:#d73737;

}


/****************************************************
                FAQ answer spacing
****************************************************/

.knowledge-article .faq-answer p {

    line-height:1.8;

    margin-bottom:20px;

}


.knowledge-article .faq-answer p:last-child {

    margin-bottom:0;

}


/****************************************************
                Mobile
****************************************************/

@media(max-width:640px){

    .knowledge-article .faq-answer h3 {

        font-size:1.15rem;

    }


    .knowledge-article .faq-example {

        padding:

            20px;

    }


    .knowledge-article .code-example {

        width:100%;

        text-align:center;

    }


    .knowledge-article .faq-warning {

        padding:

            18px
            20px;

    }

}

/****************************************************
        FAQ - штраф за отсутствие ЭТрН
        Additional blocks
****************************************************/


/****************************************************
                Short answer
****************************************************/

.knowledge-article .faq-short-answer {

    padding:

        22px
        26px;

    margin-bottom:26px;

    border-radius:18px;

    background:

        linear-gradient(
            135deg,
            rgba(25,118,210,.07),
            rgba(22,196,183,.08)
        );

    border-left:

        5px solid
        var(--color-primary);

    color:var(--color-dark);

    line-height:1.75;

}


.knowledge-article .faq-short-answer strong {

    display:block;

    margin-bottom:8px;

    color:var(--color-primary);

    font-size:1.05rem;

}


/****************************************************
                Important date block
****************************************************/

.knowledge-article .faq-important {

    display:flex;

    align-items:flex-start;

    gap:22px;

    margin:

        30px
        0;

    padding:

        26px
        30px;

    border-radius:20px;

    background:

        rgba(22,196,183,.08);

    border:

        1px solid
        rgba(22,196,183,.18);

}


.knowledge-article .faq-important__icon {

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#ffffff;

    font-size:1.8rem;

    box-shadow:

        0 8px 20px
        rgba(25,118,210,.08);

}


.knowledge-article .faq-important h3 {

    margin:

        0
        0
        10px;

    color:var(--color-dark);

    font-size:1.25rem;

}


.knowledge-article .faq-important p {

    margin:0;

    line-height:1.75;

}


/****************************************************
                Risk list enhancement
****************************************************/

.knowledge-article .faq-check-list li strong {

    color:var(--color-dark);

}


/****************************************************
                Example inside FAQ
****************************************************/

.knowledge-article .faq-example h4 {

    display:flex;

    align-items:center;

    gap:10px;

}


.knowledge-article .faq-example h4::before {

    content:"💼";

    font-size:1.1rem;

}


/****************************************************
                Warning improvement
****************************************************/

.knowledge-article .faq-warning {

    position:relative;

}


.knowledge-article .faq-warning::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    border-radius:10px;

}


/****************************************************
                Mobile
****************************************************/

@media(max-width:640px){


    .knowledge-article .faq-important {

        flex-direction:column;

        padding:

            22px;

        gap:16px;

    }


    .knowledge-article .faq-short-answer {

        padding:

            20px;

    }


}

/* CTA: ��� ������ � ��� (������������ + ����� � Knowledge) */
.knowledge-article .cta-box .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}

.knowledge-article .cta-box .cta-actions .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    min-width: 260px;
}

.knowledge-article .cta-box .cta-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: #ffffff;
}