.cg-landing {
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    line-height: 1.5;
}

.cg-landing * {
    box-sizing: border-box;
}

/* ---------- Section spacing ---------- */
.cg-section {
    /* margin-top: 60px; */
    margin-top: 80px;
}

.cg-section-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: #282828;
    margin: 0 0 40px 0;
}

/* ---------- Hero ---------- */
.cg-hero {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: var(--cg-breadcrumbs-to-title-gap);
}

.cg-hero-left {
    flex: 1;
    min-width: 0;
}

.cg-hero-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 128%;
    color: #282828;
}

.cg-hero-desc {
    /* font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 32px 0;
    max-width: 420px; */

    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
    color: #282828;
    opacity: 0.7;

    margin: 0 0 64px 0;
}

.cg-hero-right {
    flex-shrink: 0;
    width: 380px;
}

.cg-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Кнопки героя: в ряд, одинаковой ширины; переносятся в столбик, когда не влезают */
.cg-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cg-hero-buttons .cg-btn {
    flex: 1 1 240px;
    max-width: 320px;
    text-align: center;
    margin-left: 0;
}

/* ---------- Buttons ---------- */
.cg-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 20px;
    /* font-weight: 600; */
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    font-weight: 500 !important;

    /* font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: #FFFFFF; */
}

.cg-btn:hover {
    text-decoration: none;
}

.cg-btn-black {
    background: #222;
    color: #fff;
}

.cg-btn-black:hover,
.cg-btn-black:focus {
    color: #fff;
    text-decoration: none;
}

.cg-btn-accent {
    background: #fc6b6b;
    color: #fff;
}

.cg-btn-accent:hover,
.cg-btn-accent:focus {
    background: #e95a5a;
    color: #fff;
    text-decoration: none;
}

.cg-btn-outline {
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    margin-left: 12px;
}

.cg-btn-outline:hover,
.cg-btn-outline:focus {
    color: #333;
    border-color: #999;
    text-decoration: none;
}

/* ---------- 4-column grid ---------- */
.cg-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ---------- Audience cards ("Кому подходит") ---------- */
.cg-audience-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 16px;
    gap: 16px;
    background: #F0EFFE;
    border-radius: 12px;
}

.cg-audience-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
}

.cg-audience-title {
    margin-bottom: 6px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #282828;
}

.cg-audience-desc {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: rgba(40, 40, 40, 0.85);
}

/* ---------- Feature / advantage cards ---------- */
.cg-feature-card {
    display: flex;
    flex-direction: column;
}

.cg-feature-img {
    display: block;
    width: 140px;
    height: 140px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 14px auto;
}

.cg-feature-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #282828;
    margin-bottom: 6px;
}

.cg-feature-desc {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: rgba(40, 40, 40, 0.85);
}

/* ---------- Result cards ("Что вы получите") ---------- */
.cg-result-card {
    display: flex;
    flex-direction: column;
}

.cg-result-img {
    display: block;
    width: 100px;
    height: 100px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 14px auto;
}

.cg-result-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #282828;
    margin-bottom: 6px;
}

/* ---------- Test diagnostic cards ("Тест помогает определить") ---------- */
.cg-diag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cg-diag-card {
    display: flex;
    flex-direction: column;
}

.cg-diag-img {
    display: block;
    width: 140px;
    height: 140px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 14px auto;
}

.cg-diag-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #282828;
    margin-bottom: 6px;
}

.cg-diag-desc {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: rgba(40, 40, 40, 0.85);
}

/* ---------- Steps ("Как проходит тестирование") ---------- */
.cg-step-card {
    position: relative;
    background: #F0EFFE;
    border: 1px solid #6D60F6;
    border-radius: 12px;
    min-height: 91px;
    padding: 36px 18px 18px 18px;
    margin-top: 27px;
}

.cg-step-num {
    position: absolute;
    /* -28px, а не -27px: top отсчитывается от padding-box карточки, т.е. уже
       за её рамкой в 1px. Так верх номера отстоит от заголовка ровно на 40px,
       как и картинки в остальных секциях. */
    top: -28px;
    left: 18px;
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #6D60F6;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #6D60F6;
    line-height: 1;
}

.cg-step-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #282828;
}

/* ---------- CTA ---------- */
.cg-cta {
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 24px 48px 24px 24px;
    gap: 48px;
    background: #F0EFFE;
    border-radius: 20px;
}

.cg-cta-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 24px 24px;
}

.cg-cta-title {
    margin: 0 0 14px 0;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 39px;
    color: #282828;
}

.cg-cta-desc {
    /* font-size: 15px;
    color: #444;
    line-height: 1.5;
    margin: 0 0 28px 0;
    max-width: 400px; */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: rgba(40, 40, 40, 0.85);
}

.cg-cta-buttons {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cg-cta-buttons .cg-btn {
    display: inline-flex;
    flex: 1 1 240px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    padding: 16px 24px;
    gap: 10px;
    border-radius: 4px;
    margin-left: 0;
    font-size: 16px;
    line-height: 1.2;
}

.cg-cta-buttons .cg-btn-accent {
    background: #6D60F6;
    border: 1px solid #6D60F6;
}

.cg-cta-buttons .cg-btn-accent:hover,
.cg-cta-buttons .cg-btn-accent:focus {
    background: #5C50DB;
    border-color: #5C50DB;
}

.cg-cta-buttons .cg-btn-outline {
    /* background: #FFFFFF;
    color: #282828;
    border: 1px solid #282828;
    font-size: 15px; */
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    /* gap контейнера задаёт отступ; margin-left ломал выравнивание при переносе */
    margin-left: 0;
}

.cg-cta-buttons .cg-btn-outline:hover,
.cg-cta-buttons .cg-btn-outline:focus {
    /* background: #FFFFFF;
    color: #282828;
    border-color: #282828; */
    color: #333;
    border-color: #999;
    text-decoration: none;
}

.cg-cta-right {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    align-items: center;
}

.cg-cta-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {

    .cg-grid-4,
    .cg-diag-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Планшет: hero и CTA встают в столбик — текст → картинка → кнопки */
@media (max-width: 991px) {
    .cg-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    /* Разворачиваем левую колонку, чтобы вставить картинку между текстом и кнопками */
    .cg-hero-left {
        display: contents;
    }

    .cg-hero-title {
        order: 1;
        margin: 0;
    }

    .cg-hero-desc {
        order: 2;
        margin: 0;
    }

    .cg-hero-right {
        order: 3;
        width: 100%;
        max-width: 300px;
        margin: 16px auto;
    }

    .cg-hero-buttons {
        order: 4;
    }

    .cg-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 16px;
        padding: 32px 24px;
    }

    .cg-cta-left {
        display: contents;
    }

    .cg-cta-title {
        order: 1;
        margin: 0;
    }

    .cg-cta-desc {
        order: 2;
        max-width: 100%;
    }

    .cg-cta-right {
        order: 3;
        width: 100%;
        /* Отступ под картинкой до кнопок (к gap контейнера) */
        margin-bottom: 28px;
    }

    .cg-cta-img {
        max-width: 260px;
        margin: 0 auto;
    }

    /* Кнопки CTA центрируем под текстом */
    .cg-cta-buttons {
        order: 4;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .cg-section {
        margin-top: 56px;
    }

    .cg-section-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    /* ---------- Hero (моб.): меньше шрифты, кнопки во всю ширину ---------- */
    .cg-hero-title {
        font-size: 28px;
    }

    .cg-hero-desc {
        font-size: 14px;
    }

    /* Кнопки во всю ширину, в столбик */
    .cg-hero-buttons .cg-btn {
        flex-basis: 100%;
        max-width: none;
    }

    /* ---------- Сетки ---------- */
    /* Одна колонка: «Кому подходит?» — карточки горизонтальные (иконка + текст) */
    .cg-grid-4 {
        grid-template-columns: 1fr;
    }

    /* Две колонки: «Преимущества платформы», «Что вы получите»,
       «Тест помогает определить» и шаги тестирования */
    .cg-diag-grid,
    .cg-grid-4.cg-cards-grid,
    .cg-grid-4.cg-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Шаги: компактнее под 2 колонки */
    .cg-step-card {
        padding: 30px 12px 14px 12px;
    }

    .cg-step-num {
        width: 40px;
        height: 40px;
        top: -22px;
        left: 12px;
        font-size: 24px;
    }

    .cg-step-text {
        font-size: 11px;
        line-height: 16px;
    }

    .cg-diag-title {
        font-size: 14px;
    }

    .cg-diag-desc {
        font-size: 12px;
    }

    /* Преимущества платформы */
    .cg-feature-title {
        font-size: 14px;
    }

    .cg-feature-desc {
        font-size: 12px;
    }

    /* Что вы получите */
    .cg-result-title {
        font-size: 14px;
    }

    /* ---------- CTA (моб.): меньше шрифты, кнопки во всю ширину ---------- */
    .cg-cta-title {
        font-size: 24px;
        line-height: 30px;
    }

    .cg-cta-desc {
        font-size: 16px;
        line-height: 24px;
    }

    /* Кнопки во всю ширину, в столбик */
    .cg-cta-buttons .cg-btn {
        flex-basis: 100%;
        max-width: none;
    }
}

.cg-test-history {
    margin-top: var(--cg-breadcrumbs-to-title-gap);
}

.cg-test-history__title {
    margin: 0 0 24px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    color: #000;
}

.cg-test-history__table-wrap {
    overflow-x: auto;
}

.cg-test-history__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.cg-test-history__table th,
.cg-test-history__table td {
    padding: 12px 12px;
    text-align: left;
    vertical-align: middle;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #333333;
}

.cg-test-history__table thead tr {
    border-bottom: 1px solid #e5e7eb;
}

.cg-test-history__table th {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
    color: #959595;
}

/* Alternating row backgrounds */
.cg-test-history__table tbody tr:nth-child(odd) {
    background: #fff;
}

.cg-test-history__table tbody tr:nth-child(even) {
    background: #F5F8F6;
}

/* Borders between rows, except the last one */
.cg-test-history__table tbody tr:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.cg-test-history__type {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #333333;
}

.cg-test-history__meta {
    display: none;
    margin-top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #8a8a8a;
}

/* Progress badge */
.cg-test-history__progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 23px;
    background: #FC6B6B;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
}

/* Status — plain text, no badge */
.cg-test-history__status {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: #333333;
}

.cg-test-history__date {
    color: #666;
    white-space: nowrap;
}

.cg-test-history__action {
    text-align: right;
    white-space: nowrap;
}

.cg-test-history__action a,
.cg-test-history__action a:visited {
    font-weight: 600;
    text-decoration: none !important;
    transition: color .15s ease;
}

/* "Результат" link — black */
.cg-test-history__action.is-completed a,
.cg-test-history__action.is-completed a:visited {
    color: #333333;
}

.cg-test-history__action.is-completed a:hover,
.cg-test-history__action.is-completed a:focus {
    color: #000;
}

/* "Продолжить" link — blue */
.cg-test-history__action.is-active a,
.cg-test-history__action.is-active a:visited {
    color: #3b82f6;
}

.cg-test-history__action.is-active a:hover,
.cg-test-history__action.is-active a:focus {
    color: #2563eb;
}

.cg-test-history__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
}

.cg-test-history__empty p {
    margin: 0;
    color: #555;
    font-size: 15px;
}

@media (max-width: 767px) {
    .cg-test-history__title {
        font-size: 28px;
    }

    .cg-test-history__empty {
        align-items: stretch;
    }
}
.cg-btn:focus,
.cg-btn:focus-visible,
.cg-btn:active,
.cg-btn-black:focus-visible,
.cg-btn-accent:focus-visible,
.cg-btn-outline:focus-visible {
    text-decoration: none;
}

.cg-landing a,
.cg-landing button,
.cg-landing [role="button"],
.cg-landing input[type="button"],
.cg-landing input[type="submit"],
.cg-landing input[type="reset"] {
    -webkit-tap-highlight-color: transparent;
}

.cg-landing a:focus,
.cg-landing a:focus-visible,
.cg-landing a:active,
.cg-landing button:focus,
.cg-landing button:focus-visible,
.cg-landing button:active,
.cg-landing [role="button"]:focus,
.cg-landing [role="button"]:focus-visible,
.cg-landing [role="button"]:active,
.cg-landing input[type="button"]:focus,
.cg-landing input[type="button"]:focus-visible,
.cg-landing input[type="button"]:active,
.cg-landing input[type="submit"]:focus,
.cg-landing input[type="submit"]:focus-visible,
.cg-landing input[type="submit"]:active,
.cg-landing input[type="reset"]:focus,
.cg-landing input[type="reset"]:focus-visible,
.cg-landing input[type="reset"]:active {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}