/* =====================================================================
   PROCTOLINE Матеріали — styles scoped to .mat-* only.
   Reuses the site's existing .container grid; does not redeclare it.
   Brand color taken from the site's own theme-color (#087F5B).
   ===================================================================== */

.mat-section {
    --mat-accent: #087F5B;
    --mat-accent-dark: #06664a;
    --mat-text: #1f2a26;
    --mat-muted: #5c6b66;
    --mat-border: #e3e9e6;
    --mat-bg-soft: #f4f8f6;
    padding: 48px 0 64px;
    color: var(--mat-text);
}

.mat-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 14px;
    color: var(--mat-muted);
}
.mat-breadcrumbs li:not(:last-child)::after { content: "→"; margin-left: 6px; color: var(--mat-border); }
.mat-breadcrumbs a { color: var(--mat-muted); text-decoration: none; }
.mat-breadcrumbs a:hover { color: var(--mat-accent); text-decoration: underline; }
.mat-breadcrumbs li[aria-current="page"] { color: var(--mat-text); font-weight: 500; }

.mat-h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
.mat-h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 20px; font-weight: 700; }
.mat-lead { color: var(--mat-muted); max-width: 720px; margin: 0 0 32px; font-size: 17px; }
.mat-empty { color: var(--mat-muted); }

.mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.mat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mat-border);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.mat-card:hover { box-shadow: 0 12px 28px rgba(8, 127, 91, .12); transform: translateY(-2px); }
.mat-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--mat-bg-soft); }
.mat-card-media picture, .mat-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mat-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mat-card-date { font-size: 13px; color: var(--mat-muted); }
.mat-card-title { font-size: 18px; line-height: 1.35; margin: 0; font-weight: 700; }
.mat-card-title a { color: var(--mat-text); text-decoration: none; }
.mat-card-title a:hover { color: var(--mat-accent); }
.mat-card-excerpt { color: var(--mat-muted); font-size: 14.5px; line-height: 1.5; margin: 0; flex: 1; }
.mat-card-link { color: var(--mat-accent); font-weight: 600; text-decoration: none; font-size: 14.5px; margin-top: auto; }
.mat-card-link:hover { text-decoration: underline; }

.mat-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.mat-pagination a { color: var(--mat-accent); font-weight: 600; text-decoration: none; }
.mat-pagination a:hover { text-decoration: underline; }
.mat-pagination-status { color: var(--mat-muted); font-size: 14px; }

/* ---- Article page ---- */
.mat-article-container { max-width: 840px; }
.mat-article-header { margin-bottom: 20px; }
.mat-article-meta { color: var(--mat-muted); font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; }

.mat-article-cover { margin: 0 0 28px; border-radius: 16px; overflow: hidden; }
.mat-article-cover picture, .mat-article-cover img { display: block; width: 100%; height: auto; }

.mat-author-block {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mat-bg-soft);
    border: 1px solid var(--mat-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 32px;
}
.mat-author-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mat-author-info { display: flex; flex-direction: column; line-height: 1.35; }
.mat-author-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mat-muted); }
.mat-author-name { font-weight: 700; color: var(--mat-text); text-decoration: none; }
.mat-author-name:hover { color: var(--mat-accent); }
.mat-author-role { font-size: 13.5px; color: var(--mat-muted); }
.mat-author-cta { font-size: 13.5px; color: var(--mat-accent); font-weight: 600; text-decoration: none; margin-top: 2px; }
.mat-author-cta:hover { text-decoration: underline; }

.mat-content { font-size: 17px; line-height: 1.75; }
.mat-content h2 { font-size: 26px; margin: 40px 0 16px; font-weight: 700; }
.mat-content h3 { font-size: 21px; margin: 32px 0 14px; font-weight: 700; }
.mat-content h4 { font-size: 18px; margin: 26px 0 12px; font-weight: 700; }
.mat-content p { margin: 0 0 18px; }
.mat-content ul, .mat-content ol { margin: 0 0 18px; padding-left: 24px; }
.mat-content li { margin-bottom: 6px; }
.mat-content a { color: var(--mat-accent); text-decoration: underline; text-underline-offset: 2px; }
.mat-content blockquote {
    margin: 24px 0;
    padding: 4px 20px;
    border-left: 4px solid var(--mat-accent);
    color: var(--mat-muted);
    font-style: italic;
}
.mat-content figure { margin: 28px 0; }
.mat-content figure picture, .mat-content figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.mat-content figcaption { font-size: 13.5px; color: var(--mat-muted); margin-top: 8px; text-align: center; }
.mat-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.mat-content th, .mat-content td { border: 1px solid var(--mat-border); padding: 10px 12px; text-align: left; }
.mat-content th { background: var(--mat-bg-soft); font-weight: 700; }
.mat-content hr { border: none; border-top: 1px solid var(--mat-border); margin: 32px 0; }

.mat-related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--mat-border); }

.mat-btn {
    display: inline-block;
    background: var(--mat-accent);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}
.mat-btn:hover { background: var(--mat-accent-dark); }
.mat-notfound { text-align: center; padding: 60px 0; }
.mat-notfound h1 { margin-bottom: 12px; }
.mat-notfound p { color: var(--mat-muted); margin-bottom: 24px; }

@media (max-width: 640px) {
    .mat-section { padding: 32px 0 48px; }
    .mat-author-block { flex-direction: row; align-items: flex-start; }
}








/* ==========================================================
   GLOBAL VARIABLES
   Центр колопроктологии
   Optimized for:
   - Core Web Vitals
   - Accessibility
   - Medical SEO pages
========================================================== */


:root {


    /* Brand colors */

    --color-primary: #0b6b5f;

    --color-primary-dark: #084c44;

    --color-secondary: #1f8a70;


    /* Background */

    --color-bg: #ffffff;

    --color-bg-soft: #f6f9f8;

    --color-card: #ffffff;



    /* Text */

    --color-text: #1b2930;

    --color-text-light: #5b6870;


    /* Borders */

    --color-border: #e3e9e7;



    /* Status */

    --color-success: #198754;



    /* Shadows */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.06);


    --shadow-md:
        0 10px 30px rgba(0,0,0,.08);



    /* Radius */

    --radius-sm: 8px;

    --radius-md: 16px;

    --radius-lg: 24px;



    /* Container */

    --container-width: 1200px;



    /* Transitions */

    --transition:
        .25s ease;



    /* Font */

    --font-main:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;


}






/* ==========================================================
   RESET
========================================================== */


*,
*::before,
*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    margin: 0;

    background:
        var(--color-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-main);

    line-height:
        1.6;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

}





img {

    max-width: 100%;

    height: auto;

    display: block;

}





a {

    color:
        inherit;

    text-decoration:
        none;

}



button,
input,
textarea {

    font:
        inherit;

}



button {

    cursor:
        pointer;

}





ul {

    margin:0;

    padding:0;

    list-style:none;

}








/* ==========================================================
   CONTAINER
========================================================== */


.container {


    width:
        min(
            100% - 40px,
            var(--container-width)
        );


    margin-inline:
        auto;


}







/* ==========================================================
   TYPOGRAPHY
   Используем clamp для адаптивности
========================================================== */


h1,
h2,
h3 {


    margin-top:
        0;


    line-height:
        1.2;


    color:
        var(--color-text);


}



h1 {


    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );


}



h2 {


    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );


}



h3 {


    font-size:
        clamp(
            1.2rem,
            2vw,
            1.5rem
        );


}




p {


    margin-top:
        0;


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


}








/* ==========================================================
   SECTION COMMON
========================================================== */


section {


    padding-block:
        clamp(
            60px,
            8vw,
            50px
        );


}




.section-header {


    max-width:
        760px;


    margin-bottom:
        50px;


}



.section-label {


    display:
        inline-block;


    margin-bottom:
        12px;


    color:
        var(--color-primary);


    font-size:
        .9rem;


    font-weight:
        700;


    text-transform:
        uppercase;


    letter-spacing:
        .08em;


}







/* ==========================================================
   BUTTONS
========================================================== */


.btn {


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    min-height:
        46px;


    padding:
        12px 26px;


    border:
        none;


    border-radius:
        var(--radius-sm);


    font-weight:
        700;


    transition:
        var(--transition);



}




.btn-primary {


    background:
        var(--color-primary);


    color:
        #fff;


}



.btn-primary:hover {


    background:
        var(--color-primary-dark);


    transform:
        translateY(-2px);


}




.btn-block {


    width:
        100%;


}

/* ==========================================================
   HEADER
========================================================== */

 /* ======================================
   HEADER
====================================== */


.site-header {

background:#fff;

position:relative;

z-index:100;


}




/* TOPBAR */

.topbar {

background:#f5f8f7;

border-bottom:1px solid #e4e9e7;

font-size:14px;

}



.topbar-inner {


height:42px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;


}



.topbar-item {

color:#526777;

}



.topbar-phone {

font-weight:700;

color:#087f5b;

}




.language-switcher {


display:flex;

gap:8px;


}



.language-switcher a {


padding:4px 8px;

border-radius:6px;

font-weight:600;

}



.language-switcher .active {


background:#087f5b;

color:white;


}





/* MAIN HEADER */


.main-header {


background:white;

}



.header-layout {


height:90px;


display:grid;


grid-template-columns:
220px 1fr auto;


align-items:center;


gap:35px;


}




.logo img {
    display: block;
    max-width: 156px;
    height: auto;
}




/* NAVIGATION */


.desktop-nav {


display:flex;

justify-content:center;

gap:28px;


}



.desktop-nav a {


font-size:15px;

font-weight:600;

color:#243b53;

transition:.2s;


}



.desktop-nav a:hover {


color:#087f5b;


}





/* BUTTONS */


.header-buttons {


display:flex;

gap:12px;


}



.header-call {


height:44px;

padding:0 22px;

display:flex;

align-items:center;

border:

1px solid #087f5b;


border-radius:10px;


color:#087f5b;

font-weight:700;


}



.header-book {


height:44px;

padding:0 25px;

display:flex;

align-items:center;

background:#087f5b;

color:white;

border-radius:10px;

font-weight:700;


}




/* MOBILE BUTTON */


.mobile-toggle {


display:none;

background:none;

border:0;

width:42px;

height:42px;


}



.mobile-toggle span {


display:block;

height:2px;

background:#102a43;

margin:7px 0;


}





/* MOBILE MENU */


.mobile-nav {


display:none;

background:white;

padding:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);


}



.mobile-nav a {


display:block;

padding:14px 0;

border-bottom:
1px solid #edf2f7;


font-weight:600;


}





.mobile-toggle.open span:nth-child(1){

transform:
translateY(9px)
rotate(45deg);

}


.mobile-toggle.open span:nth-child(2){

opacity:0;

}


.mobile-toggle.open span:nth-child(3){

transform:
translateY(-9px)
rotate(-45deg);

}


.mobile-toggle span {

transition:.25s;

}


/* TABLET */

@media(max-width:1100px){


.desktop-nav {


display:none;


}



.header-layout {


grid-template-columns:
1fr auto auto;


}



.mobile-toggle {


display:block;


}


}







/* MOBILE */


@media(max-width:700px){



.topbar-inner {


height:auto;

padding:10px 0;

flex-wrap:wrap;


}



.topbar-item:nth-child(1){

display:none;

}



.header-layout {


height:75px;


grid-template-columns:
1fr auto;


gap:15px;


}



.logo img {


width:170px;


}



.header-buttons {


display:none;


}



.mobile-nav.active {


display:block;


}



}


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

 
/* ==========================================================
   PREMIUM MEDICAL HERO
   Proctology Center
========================================================== */


.hero {

    padding:
        clamp(50px, 7vw, 90px) 0;

    background:
        #f8faf9;

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(320px, 520px);

    align-items:
        center;

    gap:
        clamp(40px, 6vw, 90px);

}



/* ==========================================================
   LEFT CONTENT
========================================================== */


.hero-content {


    max-width:
        650px;


}



.hero-content h1 {


    font-size:
        clamp(36px, 4vw, 58px);


    line-height:
        1.12;


    letter-spacing:
        -0.02em;


    color:
        #102a43;


    margin-bottom:
        25px;


}



.hero-description {


    font-size:
        clamp(17px, 1.5vw, 20px);


    line-height:
        1.7;


    color:
        #486581;


    max-width:
        580px;


    margin-bottom:
        35px;


}





/* ==========================================================
   ADVANTAGES
========================================================== */


.hero-benefits {


    display:
        grid;


    gap:
        14px;


    margin-bottom:
        40px;


}



.hero-benefits div {


    display:
        flex;


    align-items:
        center;


    gap:
        12px;


    color:
        #243b53;


    font-weight:
        600;


}



.hero-benefits span {


    width:
        28px;


    height:
        28px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        #e3f5ef;


    color:
        #087f5b;


    font-size:
        14px;


}





/* ==========================================================
   BUTTONS
========================================================== */


.hero-buttons {


    display:
        flex;


    gap:
        15px;


    flex-wrap:
        wrap;


}



.hero-buttons a {


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    min-height:
        52px;


    padding:
        0 32px;


    border-radius:
        10px;


    font-weight:
        700;


    transition:
        .25s ease;


}



.hero-primary {


    background:
        #087f5b;


    color:
        #fff;


}



.hero-primary:hover {


    background:
        #066b4d;


}



.hero-secondary {


    background:
        transparent;


    color:
        #087f5b;


    border:
        1px solid #087f5b;


}





/* ==========================================================
   DOCTOR IMAGE
========================================================== */


.hero-doctor {


    position:
        relative;


}



.hero-doctor img {


    width:
        100%;


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


    border-radius:
        24px;


    display:
        block;


}







/* ==========================================================
   DOCTOR INFO UNDER PHOTO
========================================================== */


.hero-doctor-info {


    background:
        #ffffff;


    padding:
        22px 25px;


    margin:
        -40px 25px 0;


    position:
        relative;


    border-radius:
        16px;


    box-shadow:
        0 15px 40px rgba(16,42,67,.12);


}



.hero-doctor-info strong {


    display:
        block;


    font-size:
        20px;


    color:
        #102a43;


    margin-bottom:
        5px;


}



.hero-doctor-info span {


    color:
        #627d98;


    font-size:
        15px;


}





/* ==========================================================
   TRUST LINE BELOW HERO
========================================================== */


.hero-trust {


    margin-top:
        70px;


    display:
        grid;


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


    border-top:
        1px solid #d9e2ec;


    padding-top:
        35px;


}



.hero-trust-item {


    text-align:
        center;


}



.hero-trust-item strong {


    display:
        block;


    font-size:
        28px;


    color:
        #087f5b;


}



.hero-trust-item span {


    color:
        #627d98;


    font-size:
        14px;


}





/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:900px){


.hero-grid {


    grid-template-columns:
        1fr;


}



.hero-content {


    text-align:
        center;


}



.hero-description {


    margin-left:
        auto;


    margin-right:
        auto;


}



.hero-benefits {


    justify-items:
        center;


}



.hero-buttons {


    justify-content:
        center;


}



.hero-doctor {


    max-width:
        420px;


    margin:
        0 auto;


}



.hero-trust {


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


    gap:
        30px;


}



}





@media(max-width:480px){


.hero {


    padding:
        40px 0;


}



.hero-content h1 {


    font-size:
        34px;


}



.hero-buttons {


    flex-direction:
        column;


}



.hero-buttons a {


    width:
        100%;


}



.hero-trust {


    grid-template-columns:
        1fr;


}



.hero-doctor-info {


    margin:
        -25px 10px 0;


}



}




/* ==========================================================
   APPOINTMENT FORM
========================================================== */


.appointment-card {


    background:
        var(--color-card);


    padding:
        30px;


    border-radius:
        var(--radius-md);


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


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


}





.appointment-card h2 {


    font-size:
        1.5rem;


}





.form-group {


    margin-bottom:
        16px;


}



.form-group label {


    display:
        block;


    margin-bottom:
        6px;


    font-weight:
        600;


    font-size:
        .9rem;


}



.form-group input,
.form-group textarea {


    width:
        100%;


    padding:
        12px 14px;


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


    border-radius:
        var(--radius-sm);


    background:
        #fff;


}



.form-group input:focus,
.form-group textarea:focus {


    outline:
        2px solid rgba(11,107,95,.2);


    border-color:
        var(--color-primary);


}



.privacy-note {


    margin-top:
        15px;


    font-size:
        .8rem;


}







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


.hero-image {


    position:
        relative;


}



.hero-image img {


    border-radius:
        var(--radius-lg);


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


}




.doctor-badge {


    position:
        absolute;


    left:
        20px;


    bottom:
        20px;


    background:
        white;


    padding:
        15px 20px;


    border-radius:
        var(--radius-sm);


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


}



.doctor-badge strong {


    display:
        block;


}







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


.hero-features {


    margin-top:
        50px;


    display:
        grid;


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


    gap:
        20px;


}



.feature-card {


    padding:
        25px;


    background:
        #fff;


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


    border-radius:
        var(--radius-md);


}





.feature-card h3 {


    font-size:
        1.15rem;


}/* ==========================================================
   DIRECT ANSWER SECTION
========================================================== */


.direct-answer {

    background:
        var(--color-bg-soft);

}



.answer-box {


    background:
        #ffffff;


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


    padding:
        30px;


    border-radius:
        var(--radius-md);


    margin-bottom:
        40px;


}



.answer-grid {


    display:
        grid;


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


    gap:
        25px;


}



.answer-card {


    background:
        #fff;


    padding:
        25px;


    border-radius:
        var(--radius-md);


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


}



.answer-card ul {


    display:
        grid;


    gap:
        10px;


}



.answer-card li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    font-weight:
        700;


    margin-right:
        8px;


}








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


table {


    width:
        100%;


    border-collapse:
        collapse;


}



th {


    background:
        var(--color-bg-soft);


    text-align:
        left;


    font-weight:
        700;


}



th,
td {


    padding:
        16px;


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


    vertical-align:
        top;


}






.direct-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}






/* ==========================================================
   SYMPTOMS
========================================================== */


.symptoms-grid {


    display:
        grid;


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


    gap:
        25px;


}



.symptom-card {


    background:
        #fff;


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


    border-radius:
        var(--radius-md);


    transition:
        var(--transition);


}



.symptom-card:hover {


    transform:
        translateY(-5px);


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


}



.symptom-card a {


    display:
        block;


    padding:
        30px;


}



.symptom-card span {


    color:
        var(--color-primary);


    font-weight:
        700;


}





.medical-note {


    margin-top:
        40px;


    padding:
        20px 25px;


    background:
        #fff8e8;


    border-left:
        4px solid #d9a441;


    border-radius:
        var(--radius-sm);


}








/* ==========================================================
   HEMORRHOID STAGES
========================================================== */


.stages {


    background:
        #fff;


}



.stages-grid {


    display:
        grid;


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


    gap:
        20px;


}



.stage-card {


    padding:
        25px;


    border-radius:
        var(--radius-md);


    background:
        var(--color-bg-soft);


}



.stage-number {


    width:
        45px;


    height:
        45px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        var(--color-primary);


    color:
        #fff;


    font-weight:
        800;


    margin-bottom:
        20px;


}



.stage-card ul {


    display:
        grid;


    gap:
        8px;


    margin-bottom:
        20px;


}



.stage-card li::before {


    content:
        "•";


    color:
        var(--color-primary);


    margin-right:
        8px;


}








.stages-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}








/* ==========================================================
   TREATMENT METHODS
========================================================== */


.methods {


    background:
        var(--color-bg-soft);


}



.methods-grid {


    display:
        grid;


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


    gap:
        25px;


}



.method-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


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


}



.method-card ul {


    margin:
        20px 0;


    display:
        grid;


    gap:
        10px;


}



.method-card li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    margin-right:
        8px;


}



.method-card a {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.methods-table {


    margin-top:
        60px;


    overflow-x:
        auto;


}

/* ==========================================================
   PRIMARY APPOINTMENT PROCESS
========================================================== */


.appointment-process {

    background:
        #ffffff;

}



.process-grid {


    display:
        grid;


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


    gap:
        25px;


}



.process-card {


    padding:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}



.process-number {


    font-size:
        2rem;


    font-weight:
        800;


    color:
        var(--color-primary);


    margin-bottom:
        15px;


}



.fear-block {


    margin-top:
        50px;


    padding:
        35px;


    display:
        grid;


    grid-template-columns:
        1.2fr .8fr;


    gap:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}



.fear-list {


    display:
        grid;


    gap:
        12px;


}



.fear-list li {


    font-weight:
        600;


}






.preparation {


    margin-top:
        50px;


    overflow-x:
        auto;


}







/* ==========================================================
   TRUST / E-E-A-T
========================================================== */


.trust {


    background:
        var(--color-bg-soft);


}



.trust-grid {


    display:
        grid;


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


    gap:
        25px;


}



.trust-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


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


}



.trust-icon {


    width:
        45px;


    height:
        45px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        var(--color-primary);


    color:
        #fff;


    font-size:
        1.2rem;


    margin-bottom:
        20px;


}




.standards {


    margin-top:
        60px;


    display:
        grid;


    grid-template-columns:
        2fr 1fr;


    gap:
        40px;


    align-items:
        center;


}



.standards-image img {


    border-radius:
        var(--radius-lg);


}



.standards ul {


    display:
        grid;


    gap:
        12px;


}



.standards li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    margin-right:
        10px;


}




.statistics {


    margin-top:
        60px;


    display:
        grid;


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


    gap:
        20px;


}



.stat-item {


    text-align:
        center;


    padding:
        25px;


    background:
        #fff;


    border-radius:
        var(--radius-md);


}



.stat-item strong {


    display:
        block;


    font-size:
        2rem;


    color:
        var(--color-primary);


}







/* ==========================================================
   DOCTORS
========================================================== */


.doctors-grid {


    display:
        grid;


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


    gap:
        30px;


}



.doctor-card {


    overflow:
        hidden;


    background:
        #fff;


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


    border-radius:
        var(--radius-md);


}



.doctor-card img {


    width:
        100%;


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


}



.doctor-info {


    padding:
        25px;


}



.doctor-position {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.doctor-meta {


    margin:
        20px 0;


    display:
        grid;


    gap:
        10px;


}



.doctor-note {


    margin-top:
        50px;


    padding:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}







/* ==========================================================
   PRICES
========================================================== */


.prices {


    background:
        var(--color-bg-soft);


}



.price-table-wrapper {


    overflow-x:
        auto;


}



.price-table {


    background:
        #fff;


}



.price-note {


    margin-top:
        30px;


}



.price-cta {


    margin-top:
        40px;


    padding:
        30px;


    display:
        flex;


    justify-content:
        space-between;


    align-items:
        center;


    gap:
        20px;


    background:
        #fff;


    border-radius:
        var(--radius-md);


}







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


.faq-list {


    display:
        grid;


    gap:
        15px;


}



.faq-item {


    background:
        #fff;


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


    border-radius:
        var(--radius-md);


    padding:
        20px;


}



.faq-item summary {


    cursor:
        pointer;


    font-weight:
        700;


    list-style:
        none;


}



.faq-item summary::-webkit-details-marker {


    display:
        none;


}



.faq-answer {


    padding-top:
        20px;


}



.faq-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}

/* ==========================================================
   REVIEWS
========================================================== */


.reviews-grid {


    display:
        grid;


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


    gap:
        25px;


}



.review-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


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


}



.review-rating {


    color:
        #e4a11b;


    font-size:
        1.2rem;


    margin-bottom:
        15px;


}



.review-card footer {


    margin-top:
        20px;


    display:
        flex;


    justify-content:
        space-between;


    gap:
        15px;


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


}





.video-reviews {


    margin-top:
        60px;


}



.video-grid {


    display:
        grid;


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


    gap:
        25px;


}



.video-placeholder {


    aspect-ratio:
        16 / 9;


    background:
        #222;


    display:
        flex;


    justify-content:
        center;


    align-items:
        center;


    border-radius:
        var(--radius-md);


}



.video-placeholder button {


    width:
        60px;


    height:
        60px;


    border-radius:
        50%;


    border:
        none;


    font-size:
        1.5rem;


}







/* ==========================================================
   CONTACTS
========================================================== */


.contacts {


    background:
        var(--color-bg-soft);


}



.contacts-grid {


    display:
        grid;


    grid-template-columns:
        .8fr 1.2fr;


    gap:
        40px;


}



.contact-info {


    display:
        grid;


    gap:
        20px;


}



.contact-item {


    background:
        #fff;


    padding:
        25px;


    border-radius:
        var(--radius-md);


}



.contact-item a {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.map-wrapper {


    min-height:
        400px;


}



.map-wrapper iframe {


    width:
        100%;


    height:
        100%;


    min-height:
        400px;


    border:
        0;


    border-radius:
        var(--radius-md);


}



.contact-form-box {


    margin-top:
        50px;


    background:
        #fff;


    padding:
        35px;


    border-radius:
        var(--radius-md);


}



.form-row {


    display:
        grid;


    grid-template-columns:
        1fr 1fr;


    gap:
        20px;


}



.contact-form label {


    display:
        grid;


    gap:
        8px;


    margin-bottom:
        20px;


    font-weight:
        600;


}



.contact-form input,
.contact-form textarea {


    width:
        100%;


    padding:
        14px;


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


    border-radius:
        var(--radius-sm);


}







/* ==========================================================
   FOOTER
========================================================== */


.footer {


    background:
        #102126;


    color:
        #fff;


    padding:
        70px 0 25px;


}



.footer-grid {


    display:
        grid;


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


    gap:
        40px;


}



.footer h3 {


    color:
        #fff;


    font-size:
        1.1rem;


}



.footer p,
.footer a {


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


}



.footer ul {


    display:
        grid;


    gap:
        10px;


}



.footer-logo {


    display:
        inline-block;


    color:
        #fff;


    font-size:
        1.4rem;


    font-weight:
        800;


    margin-bottom:
        20px;


}



.footer-disclaimer {


    margin-top:
        50px;


    padding-top:
        25px;


    border-top:
        1px solid rgba(255,255,255,.15);


    font-size:
        .9rem;


}



.footer-bottom {


    margin-top:
        25px;


    text-align:
        center;


}







/* ==========================================================
   CORE WEB VITALS OPTIMIZATION
========================================================== */


.symptoms,
.stages,
.methods,
.trust,
.doctors,
.prices,
.faq,
.reviews {


    content-visibility:
        auto;


    contain-intrinsic-size:
        800px;


}







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



@media (max-width: 1100px) {


    .hero-grid,
    .contacts-grid,
    .standards,
    .fear-block {


        grid-template-columns:
            1fr;


    }



    .hero-features,
    .trust-grid,
    .stages-grid,
    .methods-grid {


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


    }



    .doctors-grid {


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


    }



    .footer-grid {


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


    }



}





@media (max-width: 768px) {



    .container {


        width:
            min(
                100% - 30px,
                var(--container-width)
            );


    }



    .header-main-inner {


        flex-direction:
            column;


    }



    .main-nav ul {


        flex-direction:
            column;


        gap:
            15px;


    }



    .hero-grid,
    .hero-features,
    .answer-grid,
    .symptoms-grid,
    .stages-grid,
    .methods-grid,
    .process-grid,
    .trust-grid,
    .doctors-grid,
    .statistics,
    .reviews-grid,
    .video-grid,
    .footer-grid {


        grid-template-columns:
            1fr;


    }



    .price-cta {


        flex-direction:
            column;


        align-items:
            stretch;


    }



    .form-row {


        grid-template-columns:
            1fr;


    }



    section {


        padding-block:
            50px;


    }



}





@media (prefers-reduced-motion: reduce) {


    *,
    *::before,
    *::after {


        animation-duration:
            .01ms !important;


        transition-duration:
            .01ms !important;


        scroll-behavior:
            auto !important;


    }


}

/* ==========================================================
   скрытие полей в форме от спама
========================================================== */

.hidden-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}




/* ==========================================================
   форма
========================================================== */

.contact-consult-box {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 45px rgba(0,0,0,.08);
}


.doctor-preview {
    text-align: center;
}


.doctor-preview img {
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
    display: block;
    margin: auto;
}


.doctor-info {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #333;
}


.doctor-info strong {
    font-size: 18px;
}


.doctor-info span {
    font-size: 14px;
    color: #777;
}



.contact-form-box h3 {
    font-size: 30px;
    margin-bottom: 10px;
}


.form-subtitle {
    color: #666;
    margin-bottom: 25px;
}



.contact-form label {
    display: block;
    margin-bottom: 18px;
    font-weight: 500;
}


.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 15px 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 16px;
    transition: .3s;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #1b8f8a;
    outline: none;
}



.hidden-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}



@media(max-width:768px){

    .contact-consult-box {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 25px;
    }


    .doctor-preview img {
        max-width: 180px;
    }


    .contact-form-box h3 {
        font-size: 24px;
    }

}

 


/* ==========================================================
   CONSULTATION FORM
   Выбор врача и формат консультации
   Все классы имеют префикс consult-
========================================================== */


/* ==========================================================
   ВЫБОР ЛІКАРЯ
========================================================== */

.consult-doctor-selection {
    width: 100%;
    margin: 0 0 24px;
}

.consult-doctor-selection h4 {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
}


/* Список лікарів */

.consult-doctors-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}


/* Окрема картка */

.consult-doctor-option {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* Прихований radio */

.consult-doctor-option > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}


/* Картка */

.consult-doctor-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 165px;

    margin: 0;
    padding: 12px 8px 10px;

    box-sizing: border-box;

    border: 1px solid #dfe5e8;
    border-radius: 10px;

    background: #fff;

    cursor: pointer;
    text-align: center;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.consult-doctor-card:hover {
    border-color: #b7c6c9;
}


/* Вибраний лікар */

.consult-doctor-option
> input[type="radio"]:checked
+ .consult-doctor-card {

    border-color: #168b72;

    background: #f8fcfb;

    box-shadow:
        0 0 0 2px rgba(22, 139, 114, .10);
}


/* ==========================================================
   ФОТО ЛІКАРЯ
========================================================== */

.consult-doctor-avatar {

    display: block !important;

    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    max-width: 64px !important;

    min-height: 64px !important;
    max-height: 64px !important;

    flex: 0 0 64px !important;

    margin: 0 auto 8px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    object-fit: cover !important;
    object-position: center center;
}


/* ==========================================================
   ІНФОРМАЦІЯ ПРО ЛІКАРЯ
========================================================== */

.consult-doctor-content {

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

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

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0 4px;

    box-sizing: border-box;

    gap: 3px;
}


/* Ім'я */

.consult-doctor-content strong {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #222;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 600;
}


/* Спеціалізація */

.consult-doctor-content span {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #777;

    font-size: 11px;
    line-height: 1.35;
}


/* Посилання */

.consult-doctor-content a {

    display: inline-block;

    width: auto;

    margin: 3px 0 0;
    padding: 0;

    color: #168b72;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 500;

    text-decoration: none;
}


.consult-doctor-content a:hover {

    color: #126f5c;

    text-decoration: underline;
}


/* ==========================================================
   ГАЛОЧКА
========================================================== */

.consult-doctor-check {

    position: absolute;

    top: 7px;
    right: 7px;

    display: flex;

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

    width: 19px;
    height: 19px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border-radius: 50%;

    background: #168b72;
    color: #fff;

    font-size: 11px;
    line-height: 19px;

    opacity: 0;

    transform: scale(.8);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.consult-doctor-option
> input[type="radio"]:checked
+ .consult-doctor-card
.consult-doctor-check {

    opacity: 1;

    transform: scale(1);
}


/* ==========================================================
   ФОРМАТ КОНСУЛЬТАЦІЇ
========================================================== */

.consult-type {

    width: 100%;

    margin: 20px 0 24px;
}


.consult-type h4 {

    margin: 0 0 12px;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 600;

    color: #222;
}


.consult-type-list {

    display: grid;

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

    gap: 10px;

    width: 100%;
}


.consult-type-option {

    position: relative;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* Прихований radio */

.consult-type-option input[type="radio"] {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

    opacity: 0;
}


/* Варіант консультації */

.consult-type-option label {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 60px;

    box-sizing: border-box;

    margin: 0;

    padding: 10px 12px;

    border: 1px solid #dfe5e8;

    border-radius: 10px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.consult-type-option label:hover {

    border-color: #b7c6c9;
}


/* Вибраний формат */

.consult-type-option
input[type="radio"]:checked
+ label {

    border-color: #168b72;

    background: #f8fcfb;

    box-shadow:
        0 0 0 2px rgba(22, 139, 114, .10);
}


/* ==========================================================
   RADIO КРУГ
========================================================== */

.consult-type-radio {

    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    min-width: 18px;

    margin-right: 10px;

    box-sizing: border-box;

    border: 2px solid #b8c2c5;

    border-radius: 50%;
}


.consult-type-option
input[type="radio"]:checked
+ label
.consult-type-radio {

    border-color: #168b72;
}


.consult-type-option
input[type="radio"]:checked
+ label
.consult-type-radio::after {

    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #168b72;
}


/* ==========================================================
   ТЕКСТ ФОРМАТУ
========================================================== */

.consult-type-content {

    display: flex;

    flex-direction: column;

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

    min-width: 0;

    gap: 2px;
}


.consult-type-content strong {

    display: block;

    margin: 0;
    padding: 0;

    color: #222;

    font-size: 14px;
    line-height: 1.3;

    font-weight: 600;
}


.consult-type-content small {

    display: block;

    margin: 0;
    padding: 0;

    color: #168b72;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 500;
}


.consult-type-content .consult-free {

    color: #168b72;

    font-weight: 700;

    text-transform: uppercase;
}


/* ==========================================================
   ОПИСАНИЕ ФАЙЛОВ
========================================================== */

.consult-file-note {

    display: block;

    margin-top: 8px;

    color: #666;

    line-height: 1.5;
}


/* ==========================================================
   МОБІЛЬНІ
========================================================== */

@media (max-width: 699px) {

    .consult-doctor-selection {
        margin-bottom: 20px;
    }


    .consult-doctor-selection h4,
    .consult-type h4 {

        font-size: 16px;

        margin-bottom: 10px;
    }


    /* Три лікарі залишаються в один ряд */

    .consult-doctors-list {

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

        gap: 5px;
    }


    .consult-doctor-card {

        min-height: 132px;

        padding: 8px 3px 7px;

        border-radius: 8px;
    }


    .consult-doctor-avatar {

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        max-width: 52px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        flex: 0 0 52px !important;

        margin-bottom: 6px !important;
    }


    .consult-doctor-content {

        padding: 0 2px;

        gap: 2px;
    }


    .consult-doctor-content strong {

        font-size: 11px;

        line-height: 1.25;
    }


    .consult-doctor-content span {

        display: none;
    }


    .consult-doctor-content a {

        margin-top: 3px;

        font-size: 10px;

        line-height: 1.25;
    }


    .consult-doctor-check {

        top: 5px;
        right: 5px;

        width: 16px;
        height: 16px;

        font-size: 9px;
        line-height: 16px;
    }


    /* Формат консультації */

    .consult-type {

        margin: 18px 0 20px;
    }


    .consult-type-list {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .consult-type-option label {

        min-height: 54px;

        padding: 9px 10px;

        border-radius: 8px;
    }


    .consult-type-radio {

        width: 17px;
        height: 17px;

        min-width: 17px;

        margin-right: 9px;
    }


    .consult-type-option
    input[type="radio"]:checked
    + label
    .consult-type-radio::after {

        top: 3px;
        left: 3px;

        width: 7px;
        height: 7px;
    }


    .consult-type-content strong {

        font-size: 13px;

        line-height: 1.3;
    }


    .consult-type-content small {

        font-size: 12px;
    }


    .consult-file-note {

        font-size: 13px;
    }

}


/* ==========================================================
   ДУЖЕ МАЛІ ЕКРАНИ
========================================================== */

@media (max-width: 380px) {

    .consult-doctors-list {

        gap: 4px;
    }


    .consult-doctor-card {

        min-height: 126px;

        padding: 7px 2px 6px;
    }


    .consult-doctor-avatar {

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        max-width: 48px !important;

        min-height: 48px !important;
        max-height: 48px !important;

        flex-basis: 48px !important;
    }


    .consult-doctor-content strong {

        font-size: 10px;
    }


    .consult-doctor-content a {

        font-size: 9px;
    }


    .consult-doctor-check {

        top: 4px;
        right: 4px;
    }

}




.mat-language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px 0;
    background: #102126;
}

.mat-language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    padding: 0 9px;
    border-radius: 7px;
    color: #b8c5c8;
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
}

.mat-language-switcher a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mat-language-switcher a.is-active {
    color: #fff;
    background: #009bad;
}



 
/* =========================================
   AI ARTICLE BUTTON
   ========================================= */

.ai-article-box {
    width: 100%;
    margin: 32px 0 36px;
}

.ai-article-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 92px;
    padding: 18px 22px;
    box-sizing: border-box;

    text-decoration: none;

    background: #f3fbfc;
    border: 1px solid #cfecef;
    border-radius: 16px;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.ai-article-link:hover {
    background: #ecf9fa;
    border-color: #a9dfe5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
    transform: translateY(-1px);
}


/* Иконка */

.ai-article-symbol {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

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

    margin-right: 16px;

    border-radius: 50%;

    background: #009bad;
    color: #fff;

    font-size: 24px;
    line-height: 1;
}


/* Текст */

.ai-article-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-article-content strong {
    display: block;

    margin: 0 0 5px;

    color: #173f44;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.ai-article-content small {
    display: block;

    margin: 0;

    color: #557276;

    font-size: 14px;
    line-height: 1.45;
}

.ai-article-content em {
    display: block;

    margin-top: 4px;

    color: #7a9295;

    font-size: 12px;
    font-style: normal;
    line-height: 1.3;
}


/* Стрелка */

.ai-article-arrow {
    flex: 0 0 auto;

    margin-left: 18px;

    color: #009bad;

    font-size: 26px;
    font-weight: 400;
    line-height: 1;

    transition: transform .2s ease;
}

.ai-article-link:hover .ai-article-arrow {
    transform: translateX(4px);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .ai-article-box {
        margin: 26px 0 30px;
    }

    .ai-article-link {
        min-height: auto;
        padding: 16px;
        border-radius: 14px;
    }

    .ai-article-symbol {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        margin-right: 12px;

        font-size: 21px;
    }

    .ai-article-content strong {
        font-size: 15px;
    }

    .ai-article-content small {
        font-size: 13px;
    }

    .ai-article-content em {
        font-size: 11px;
    }

    .ai-article-arrow {
        margin-left: 10px;
        font-size: 22px;
    }
}


/* =========================================
   VERY SMALL SCREENS
   ========================================= */

@media (max-width: 380px) {

    .ai-article-link {
        padding: 14px;
    }

    .ai-article-symbol {
        flex-basis: 38px;
        width: 38px;
        height: 38px;

        margin-right: 10px;

        font-size: 19px;
    }

    .ai-article-content strong {
        font-size: 14px;
    }

    .ai-article-content small {
        font-size: 12px;
    }

    .ai-article-arrow {
        margin-left: 6px;
        font-size: 20px;
    }
}