/* ==========================================================
   Knowledge article — ЭТрН (из DEV/elektronnaya-transportnaya-nakladnaya).
   Все селекторы ограничены .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: #009d96;
}

/* =====================================================
   ETRN KNOWLEDGE PAGE
   PART 1
===================================================== */


/* =========================
   GLOBAL
========================= */

.knowledge-article .etrn-page {
    background: #f7f9fc;
    color: #182230;
    overflow: hidden;
}


.knowledge-article .etrn-page .container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}



.knowledge-article .knowledge-section {
    padding: 90px 0;
}



.knowledge-article .section-heading {
    max-width: 760px;
    margin-bottom: 55px;
}


.knowledge-article .section-heading h2 {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    color: #102033;
}


.knowledge-article .section-heading p {
    font-size: 19px;
    line-height: 1.65;
    color: #607084;
    margin: 0;
}



/* =========================
   HERO
========================= */


.knowledge-article .etrn-hero {
    padding: 90px 0 80px;
    position: relative;
}


.knowledge-article .etrn-hero::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -200px;
    top: -150px;

    background:
        radial-gradient(
            circle,
            rgba(0, 180, 170, 0.12),
            transparent 70%
        );

    pointer-events: none;
}



.knowledge-article .etrn-hero__content {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        440px;

    gap: 70px;

    align-items: center;

}



.knowledge-article .etrn-hero__text {
    position: relative;
    z-index: 1;
}



.knowledge-article .knowledge-label {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(0, 180, 170, 0.1);

    color: #009d96;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;

}



.knowledge-article .etrn-hero h1 {

    font-size: 56px;

    line-height: 1.08;

    letter-spacing: -0.04em;

    margin: 0 0 28px;

    color: #101d2e;

}



.knowledge-article .hero-subtitle {

    max-width: 620px;

    font-size: 21px;

    line-height: 1.55;

    color: #526174;

    margin-bottom: 38px;

}




/* =========================
   DATE CARD
========================= */


.knowledge-article .etrn-date-card {

    display: flex;

    gap: 18px;

    align-items: center;

    padding: 22px;

    max-width: 560px;

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid #e5ebf2;

    box-shadow:
        0 12px 35px rgba(20, 45, 80, 0.06);

    margin-bottom: 35px;

}



.knowledge-article .etrn-date-card__icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #00b8a9,
            #0087d8
        );

}



.knowledge-article .etrn-date-card__icon svg {

    width: 26px;

    height: 26px;

    fill: none;

    stroke: white;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}



.knowledge-article .etrn-date-card strong {

    display: block;

    font-size: 17px;

    margin-bottom: 6px;

    color: #132337;

}



.knowledge-article .etrn-date-card span {

    display: block;

    font-size: 15px;

    line-height: 1.45;

    color: #64748b;

}





/* =========================
   BUTTON
========================= */


.knowledge-article .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 32px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition: .25s ease;

}



.knowledge-article .btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            #00ae9d,
            #0085d8
        );

    box-shadow:
        0 12px 25px rgba(0,150,180,.25);

}



.knowledge-article .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow:
        0 16px 32px rgba(0,150,180,.35);

}





/* =========================
   DOCUMENT FLOW VISUAL
========================= */


.knowledge-article .etrn-hero__visual {

    position: relative;

    z-index: 1;

}



.knowledge-article .document-flow {

    padding: 34px 28px;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f2f8fc
        );

    border-radius: 32px;

    border: 1px solid #e2eaf3;

    box-shadow:

        0 25px 60px rgba(30,50,80,.10);

}



.knowledge-article .flow-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 14px 18px;

    background: white;

    border-radius: 18px;

    border: 1px solid #e7edf4;

}



.knowledge-article .flow-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #edf7fa;

    font-size: 23px;

}



/* Текст шага схемы: заголовок + подпись (small) в колонку */
.knowledge-article .flow-content {
    display: flex;
    flex-direction: column;
}

.knowledge-article .flow-content span {
    font-size: 16px;
    font-weight: 600;
    color: #203044;
}

.knowledge-article .flow-content small {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #6b7b8f;
}



.knowledge-article .flow-line {

    width: 2px;

    height: 28px;

    margin: 0 auto;

    background:

        repeating-linear-gradient(

            to bottom,

            #00aaa0 0,

            #00aaa0 5px,

            transparent 5px,

            transparent 10px

        );

}




/* =========================
   INTRO CARDS
========================= */


.knowledge-article .info-grid {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 26px;

}



.knowledge-article .info-card {

    background: white;

    border-radius: 26px;

    padding: 32px;

    border: 1px solid #e5ebf2;

    transition: .25s ease;

}



.knowledge-article .info-card:hover {

    transform: translateY(-5px);

    box-shadow:

        0 18px 40px rgba(30,60,90,.08);

}



.knowledge-article .info-card__icon {

    width: 58px;

    height: 58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#eef8f8;

    font-size:28px;

    margin-bottom:22px;

}



.knowledge-article .info-card h3 {

    font-size:22px;

    margin:0 0 14px;

    color:#122235;

}



.knowledge-article .info-card p {

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:#617084;

}

/* =====================================================
   ETRN KNOWLEDGE PAGE
   PART 2
===================================================== */



/* =========================
   COMPARISON BLOCK
========================= */


.knowledge-article .comparison-block {

    display: grid;

    grid-template-columns:
        1fr
        80px
        1fr;

    align-items: center;

    gap: 25px;

}



.knowledge-article .comparison-card {

    background: #ffffff;

    border-radius: 28px;

    padding: 38px;

    border: 1px solid #e5ebf2;

}



.knowledge-article .comparison-card__title {

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 28px;

}



.knowledge-article .comparison-card--old {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafbfc
        );

}



.knowledge-article .comparison-card--old
.comparison-card__title {

    color: #64748b;

}



.knowledge-article .comparison-card--new {

    border-color:

        rgba(0,170,160,.25);

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f2fbfa
        );

}



.knowledge-article .comparison-card--new
.comparison-card__title {

    color: #009d96;

}




.knowledge-article .comparison-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.knowledge-article .comparison-card li {

    position: relative;

    padding-left: 32px;

    margin-bottom: 18px;

    color: #526174;

    line-height: 1.5;

}



.knowledge-article .comparison-card li::before {

    position: absolute;

    left: 0;

    top: 3px;

    font-size: 17px;

}



.knowledge-article .comparison-card--old li::before {

    content: "—";

    color: #94a3b8;

}



.knowledge-article .comparison-card--new li::before {

    content: "✓";

    color: #00aa9d;

    font-weight: 700;

}



.knowledge-article .comparison-arrow {

    display: flex;

    justify-content: center;

}



.knowledge-article .comparison-arrow span {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            #00b3a5,
            #008bd4
        );

    color:white;

    font-size:28px;

    box-shadow:

        0 12px 25px rgba(0,150,180,.25);

}





/* =========================
   PROCESS TIMELINE
========================= */


.knowledge-article .process-timeline {

    position: relative;

    max-width: 850px;

    margin: 0 auto;

}



/* Прерывистая линия между шагами: от центра одного номера к центру следующего.
   На последнем шаге (::not(:last-child)) линии нет — она не выходит за квадрат 04. */
.knowledge-article .timeline-step:not(:last-child)::before {

    content:"";

    position:absolute;

    z-index:0;

    left:32px;

    /* Центр квадрата номера (66px / 2) */
    top:33px;

    /* Через margin-bottom (45px) до центра номера следующего шага */
    bottom:calc(-45px - 33px);

    width:2px;


    background:

        repeating-linear-gradient(

            to bottom,

            #00aaa0 0,

            #00aaa0 7px,

            transparent 7px,

            transparent 14px

        );

}



.knowledge-article .timeline-step {

    position:relative;

    display:flex;

    gap:32px;

    margin-bottom:45px;

}



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

    margin-bottom:0;

}



.knowledge-article .timeline-number {

    position:relative;

    z-index:1;

    flex-shrink:0;


    width:66px;

    height:66px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:white;


    border:

        2px solid #00aaa0;


    color:#008f88;


    font-size:18px;

    font-weight:700;


    box-shadow:

        0 10px 25px rgba(20,50,80,.08);

}



.knowledge-article .timeline-content {

    background:white;

    border-radius:24px;

    padding:28px 32px;


    border:

        1px solid #e5ebf2;


    flex:1;

}



.knowledge-article .timeline-content h3 {

    margin:0 0 12px;

    font-size:22px;

    color:#122235;

}



.knowledge-article .timeline-content p {

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:#617084;

}





/* =========================
   PARTICIPANTS GRID
========================= */


.knowledge-article .participants-grid {

    display:grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap:24px;

}




.knowledge-article .participant-card {

    background:white;

    border-radius:26px;

    padding:30px;


    border:

        1px solid #e5ebf2;


    transition:.25s ease;


}



.knowledge-article .participant-card:hover {

    transform:translateY(-5px);


    box-shadow:

        0 20px 45px rgba(30,60,90,.08);

}




.knowledge-article .participant-icon {

    width:60px;

    height:60px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

        linear-gradient(

            135deg,

            rgba(0,180,170,.12),

            rgba(0,135,216,.12)

        );


    font-size:30px;


    margin-bottom:22px;

}



.knowledge-article .participant-card h3 {

    margin:0 0 14px;


    font-size:21px;


    color:#142235;

}



.knowledge-article .participant-card p {

    margin:0;


    color:#617084;


    font-size:15px;


    line-height:1.6;

}

/* =====================================================
   ETRN KNOWLEDGE PAGE
   PART 3
===================================================== */



/* =========================
   CREATOR BLOCK
========================= */


.knowledge-article .answer-highlight {

    display:flex;

    align-items:flex-start;

    gap:24px;

    padding:34px;

    background:

        linear-gradient(
            135deg,
            rgba(0,180,170,.08),
            rgba(0,135,216,.06)
        );

    border-radius:28px;

    border:

        1px solid rgba(0,170,160,.18);

    margin-bottom:50px;

}



.knowledge-article .answer-highlight__icon {

    width:62px;

    height:62px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border-radius:20px;

    font-size:30px;

}



.knowledge-article .answer-highlight h3 {

    margin:0 0 12px;

    font-size:25px;

    line-height:1.3;

    color:#122235;

}



.knowledge-article .answer-highlight p {

    margin:0;

    font-size:17px;

    line-height:1.6;

    color:#607084;

}




/* =========================
   CREATOR FLOW
========================= */


.knowledge-article .creator-flow {

    display:flex;

    align-items:stretch;

    justify-content:center;

    gap:18px;

}



.knowledge-article .creator-step {

    flex:1;

    background:white;

    border-radius:24px;

    padding:28px;

    border:

        1px solid #e5ebf2;

}



.knowledge-article .creator-step__number {

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    margin-bottom:20px;

    background:

        linear-gradient(
            135deg,
            #00b3a5,
            #0088d8
        );

    color:white;

    font-weight:700;

}



.knowledge-article .creator-step h3 {

    margin:0 0 12px;

    font-size:21px;

    color:#142235;

}



.knowledge-article .creator-step p {

    margin:0;

    color:#617084;

    line-height:1.6;

    font-size:15px;

}



.knowledge-article .creator-arrow {

    display:flex;

    align-items:center;

    font-size:32px;

    color:#00a99b;

}





/* =========================
   DRIVER GUIDE
========================= */


.knowledge-article .driver-steps {

    display:flex;

    flex-direction:column;

    gap:20px;

    max-width:900px;

    margin:0 auto;

}



.knowledge-article .driver-step {

    display:flex;

    gap:24px;

    align-items:flex-start;

    padding:28px;

    background:white;

    border-radius:24px;

    border:

        1px solid #e5ebf2;

}



.knowledge-article .driver-step__icon {

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#eef8f8;

    font-size:28px;

}



.knowledge-article .driver-step h3 {

    margin:0 0 10px;

    font-size:21px;

    color:#132337;

}



.knowledge-article .driver-step p {

    margin:0;

    color:#607084;

    font-size:16px;

    line-height:1.6;

}





/* =========================
   TEMPLATE BLOCK
========================= */


.knowledge-article .etrn-template {

    padding-top:70px;

}



.knowledge-article .template-card {

    display:flex;

    gap:35px;

    align-items:flex-start;

    padding:45px;

    border-radius:32px;


    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f4f9fc
        );


    border:

        1px solid #e1eaf2;

}



.knowledge-article .template-card__icon {

    width:78px;

    height:78px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:

        linear-gradient(
            135deg,
            #00b3a5,
            #0088d8
        );

    font-size:38px;

}



.knowledge-article .template-card__content h2 {

    margin:0 0 20px;

    font-size:34px;

    color:#122235;

}



.knowledge-article .template-card__content p {

    margin:0 0 16px;

    font-size:17px;

    line-height:1.65;

    color:#607084;

}




.knowledge-article .template-warning {

    margin-top:28px;

    padding:24px;

    border-radius:20px;

    background:#fff7ed;

    border:

        1px solid #fed7aa;

}



.knowledge-article .template-warning strong {

    display:block;

    margin-bottom:12px;

    color:#9a3412;

}



.knowledge-article .template-warning ul {

    margin:0;

    padding-left:20px;

}



.knowledge-article .template-warning li {

    margin-bottom:8px;

    color:#7c2d12;

}





/* =========================
   FAQ
========================= */


.knowledge-article .etrn-faq {

    padding-bottom:100px;

}



.knowledge-article .faq-list {

    max-width:900px;

}



.knowledge-article .faq-item {

    background:white;

    border-radius:24px;

    padding:28px 32px;

    margin-bottom:18px;

    border:

        1px solid #e5ebf2;

}



.knowledge-article .faq-item h3 {

    margin:0 0 14px;

    font-size:20px;

    color:#132337;

}



.knowledge-article .faq-item p {

    margin:0;

    color:#607084;

    line-height:1.65;

    font-size:16px;

}

/* =====================================================
   ETRN KNOWLEDGE PAGE
   PART 4
===================================================== */



/* =========================
   PREPARATION BLOCK
========================= */


.knowledge-article .etrn-preparation {

    padding-top:80px;

}



.knowledge-article .prepare-grid {

    display:grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap:24px;

}




.knowledge-article .prepare-card {

    position:relative;

    background:white;

    border-radius:26px;

    padding:30px;

    border:

        1px solid #e5ebf2;

    transition:.25s ease;

}



.knowledge-article .prepare-card:hover {

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(30,60,90,.08);

}



.knowledge-article .prepare-card__number {

    font-size:42px;

    line-height:1;

    font-weight:700;

    letter-spacing:-0.04em;

    margin-bottom:25px;

    color:

        rgba(0,170,160,.18);

}



.knowledge-article .prepare-card h3 {

    margin:0 0 14px;

    font-size:21px;

    color:#142235;

}



.knowledge-article .prepare-card p {

    margin:0;

    color:#617084;

    font-size:15px;

    line-height:1.6;

}





/* =========================
   SOLUTION CARD
========================= */


.knowledge-article .etrn-solution {

    padding-top:60px;

}




.knowledge-article .solution-card {

    display:grid;

    grid-template-columns:

        1fr 380px;

    gap:60px;

    align-items:center;


    padding:55px;


    border-radius:36px;


    background:

        linear-gradient(

            135deg,

            #ffffff,

            #f3fafb

        );


    border:

        1px solid #e1eaf2;

}



.knowledge-article .solution-card__content h2 {

    font-size:40px;

    line-height:1.2;

    letter-spacing:-0.03em;

    margin:20px 0;

    color:#112234;

}



.knowledge-article .solution-card__content p {

    font-size:17px;

    line-height:1.65;

    color:#607084;

    margin-bottom:18px;

}





.knowledge-article .solution-list {

    list-style:none;

    padding:0;

    margin:30px 0;

}



.knowledge-article .solution-list li {

    position:relative;

    padding-left:34px;

    margin-bottom:15px;

    font-size:16px;

    color:#35465a;

}



.knowledge-article .solution-list li::before {

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#00a99b;

    font-weight:700;

}





/* =========================
   DIGITAL ROUTE
========================= */


.knowledge-article .solution-card__visual {

    display:flex;

    justify-content:center;

}



.knowledge-article .digital-route {

    width:270px;

    padding:30px;

    background:white;

    border-radius:30px;

    border:

        1px solid #e4edf4;


    box-shadow:

        0 20px 45px rgba(20,50,80,.08);

}



.knowledge-article .route-point {

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

        linear-gradient(

            135deg,

            rgba(0,180,170,.10),

            rgba(0,135,216,.10)

        );


    color:#173047;

    font-weight:600;

}



.knowledge-article .route-line {

    height:36px;

    width:2px;

    margin:0 auto;


    background:

        repeating-linear-gradient(

            to bottom,

            #00aaa0 0,

            #00aaa0 6px,

            transparent 6px,

            transparent 12px

        );

}





/* =========================
   FINAL CTA
========================= */


.knowledge-article .etrn-final-cta {

    padding:90px 0 110px;

}



.knowledge-article .cta-card {

    position:relative;

    overflow:hidden;


    text-align:center;


    padding:65px 40px;


    border-radius:40px;


    background:

        linear-gradient(

            135deg,

            #062c45,

            #064d62

        );


    color:white;

}




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

    content:"";


    position:absolute;


    width:500px;

    height:500px;


    right:-180px;

    top:-220px;


    background:

        radial-gradient(

            circle,

            rgba(0,200,180,.25),

            transparent 70%

        );

}



.knowledge-article .cta-card h2 {

    position:relative;

    max-width:850px;

    margin:0 auto 20px;


    font-size:42px;

    line-height:1.2;


    letter-spacing:-0.03em;

}



.knowledge-article .cta-card p {

    position:relative;

    max-width:720px;

    margin:0 auto 35px;


    color:rgba(255,255,255,.75);


    font-size:18px;

    line-height:1.6;

}



.knowledge-article .cta-actions {

    position:relative;

    display:flex;

    justify-content:center;

    gap:16px;

}



.knowledge-article .btn-secondary {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:15px 32px;


    border-radius:14px;


    border:

        1px solid rgba(255,255,255,.25);


    color:white;


    text-decoration:none;


    font-weight:600;


    transition:.25s ease;

}



.knowledge-article .btn-secondary:hover {

    background:

        rgba(255,255,255,.1);

}





/* =========================
   RESPONSIVE
========================= */


@media (max-width:1100px) {


    .knowledge-article .etrn-hero__content {

        grid-template-columns:1fr;

    }



    .knowledge-article .etrn-hero__visual {

        max-width:500px;

    }



    .knowledge-article .info-grid {

        grid-template-columns:

            repeat(2,1fr);

    }



    .knowledge-article .participants-grid {

        grid-template-columns:

            repeat(2,1fr);

    }



    .knowledge-article .prepare-grid {

        grid-template-columns:

            repeat(2,1fr);

    }



    .knowledge-article .solution-card {

        grid-template-columns:1fr;

    }


}




@media (max-width:768px) {


    .knowledge-article .etrn-page .container {

        width:

            calc(100% - 32px);

    }



    .knowledge-article .etrn-hero {

        padding-top:50px;

    }



    .knowledge-article .etrn-hero h1 {

        font-size:38px;

    }



    .knowledge-article .hero-subtitle {

        font-size:18px;

    }



    .knowledge-article .section-heading h2 {

        font-size:32px;

    }



    .knowledge-article .info-grid, .knowledge-article .participants-grid, .knowledge-article .prepare-grid {

        grid-template-columns:1fr;

    }



    .knowledge-article .comparison-block {

        grid-template-columns:1fr;

    }



    .knowledge-article .comparison-arrow {

        transform:rotate(90deg);

    }



    .knowledge-article .creator-flow {

        flex-direction:column;

    }



    .knowledge-article .creator-arrow {

        justify-content:center;

        transform:rotate(90deg);

    }



    .knowledge-article .template-card {

        flex-direction:column;

        padding:30px;

    }



    .knowledge-article .solution-card {

        padding:30px;

    }



    .knowledge-article .solution-card__content h2 {

        font-size:32px;

    }



    .knowledge-article .cta-card {

        padding:45px 25px;

    }



    .knowledge-article .cta-card h2 {

        font-size:30px;

    }



    .knowledge-article .cta-actions {

        flex-direction:column;

    }


}