.candidate-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 448px;
}

.candidate-feature-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    overflow: hidden;
    border-radius: 24px;
    background: #ededed;
}

.candidate-feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.candidate-feature-media img.candidate-feature-media-dark {
    display: none;
}

html.dark-theme .candidate-feature-media {
    background: var(--surface-primary);
}

html.dark-theme .candidate-feature-media img.candidate-feature-media-light {
    display: none;
}

html.dark-theme .candidate-feature-media img.candidate-feature-media-dark {
    display: block;
}

html.dark-theme .comparison-table-cell--header,
html.dark-theme .comparison-table-column--criteria .comparison-table-cell:not(.comparison-table-cell--header) {
    background: #2e3035;
}

.candidate-feature-copy {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 450px;
}

.candidate-feature-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 30px;
    background: #49a182;
    color: #fff;
    font-family: 'Inter Tight', var(--font-primary);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: var(--lh-14);
    letter-spacing: var(--ls-14);
    white-space: nowrap;
}

.candidate-feature-text {
    margin-top: 8px;
}

.candidate-feature-text h2 {
    max-width: 430px;
    color: var(--text-color);
    font-size: var(--fs-32);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-32);
    letter-spacing: var(--ls-32);
}

.candidate-feature-text p {
    max-width: 430px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}

.candidates-page .candidate-feature-callout {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 430px;
    margin-top: 42px;
    color: var(--text-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}

.candidate-feature-callout img {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

@media (min-width: 1280px) {
    .candidate-feature-media {
        grid-column: 2;
        grid-row: 1;
    }
}

.candidates-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
}

.candidates-comparison > h2,
.candidates-testimonials > h2 {
    color: var(--text-color);
    font-size: var(--fs-40);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-40);
    text-align: center;
}

.comparison-table-wrap {
    position: relative;
    width: 958px;
    height: auto;
    margin-top: 32px;
    padding-top: 37px;
}

.comparison-table-note {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 241px;
    width: 245px;
    height: 77px;
    overflow: visible;
    padding: 12px 16px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(134deg, #49a182, #208a65);
    color: #fff;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
}

.comparison-card-stack {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 245px;
    height: 77px;
    overflow: visible;
    pointer-events: none;
}

.comparison-card-stack-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-card-stack-item--one {
    left: 89.5px;
    bottom: -5.41px;
    width: 97.99px;
    height: 83.411px;
}

.comparison-card-stack-item--two {
    left: 106px;
    bottom: 5.66px;
    width: 97.056px;
    height: 74.337px;
}

.comparison-card-stack-item--three {
    left: 125px;
    bottom: 18.34px;
    width: 95.234px;
    height: 67.657px;
}

.comparison-card-stack-item--one .comparison-card-stack-frame,
.comparison-card-stack-item--two .comparison-card-stack-frame {
    opacity: .5;
}

.comparison-card-stack-item--one .comparison-card-stack-frame {
    transform: rotate(-29.67deg);
}

.comparison-card-stack-item--two .comparison-card-stack-frame {
    transform: rotate(-20.68deg);
}

.comparison-card-stack-item--three .comparison-card-stack-frame {
    overflow: visible;
    transform: rotate(-15deg);
}

.comparison-card-stack-frame {
    position: relative;
    display: block;
    flex: 0 0 86px;
    width: 86px;
    height: 47px;
    overflow: hidden;
}

.comparison-card-stack-frame img {
    position: absolute;
    display: block;
    width: 69.9201px;
    height: 69.9201px;
    max-width: none;
    object-fit: contain;
    left: 16.512px;
    top: -1.913px;
}

.comparison-card-stack-item--three .comparison-card-stack-frame img {
    width: 82.17px;
    height: 82.17px;
    left: 9.331px;
    top: -4.86px;
    transform: rotate(11.2deg);
}

.comparison-brand {
    position: absolute;
    z-index: 2;
    top: 37px;
    right: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border-radius: 20px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}

.comparison-brand img {
    width: 18px;
    height: 18px;
}

.comparison-table-grid {
    position: relative;
    display: grid;
    grid-template-columns: 241px 244.667px 244.667px 228px;
    /* Заголовок + 7 строк: количество должно совпадать с comparison_rows кандидатов (grid-auto-flow: column). */
    grid-template-rows: 40px repeat(7, minmax(80px, auto));
    grid-auto-flow: column;
    align-items: stretch;
    width: 958px;
    color: var(--text-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}

.comparison-table-grid--recruiter {
    grid-template-rows: 40px repeat(7, minmax(80px, auto));
}

.comparison-table-column {
    display: contents;
}

.comparison-table-column--criteria {
    width: 241px;
}

.comparison-table-column--hirehi,
.comparison-table-column--hh {
    width: 244.667px;
}

.comparison-table-column--manual {
    width: 228px;
}

.comparison-table-column--hirehi .comparison-table-cell--hirehi-head {
    border: 0;
    background: transparent;
    padding: 0;
}

.comparison-table-cell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px;
    border-right: 1px solid color-mix(in srgb, var(--text-color) 4%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 4%, transparent);
    background: var(--surface-primary);
    color: var(--text-color);
    font-weight: var(--fw-regular);
    line-height: 1.3;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
}

.comparison-table-column--hirehi .comparison-table-cell:not(.comparison-table-cell--header) {
    padding: 16px 4px 16px 16px;
}

.comparison-table-cell-content {
    display: block;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.comparison-table-cell--header {
    height: auto;
    padding: 10px 16px;
    background: #ededed;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.comparison-table-column--criteria .comparison-table-cell:not(.comparison-table-cell--header) {
    background: #ededed;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.comparison-table-column--criteria .comparison-table-cell {
    padding-right: 24px;
    padding-left: 24px;
}

.comparison-table-column--criteria .comparison-table-cell--header {
    padding-right: 32px;
}

.comparison-table-column--hh .comparison-table-cell--header {
    justify-content: center;
    gap: 6px;
}

.comparison-table-column--hh .comparison-table-cell--header img {
    display: block;
    width: 18px;
    height: 18px;
}

.comparison-table-column--criteria .comparison-table-cell--header {
    border-top-left-radius: 24px;
}

.comparison-table-column--manual .comparison-table-cell--header {
    border-top-right-radius: 24px;
}

.comparison-table-column--criteria .comparison-table-cell:last-child {
    border-bottom-left-radius: 24px;
}

.comparison-table-column--manual .comparison-table-cell:last-child {
    border-bottom-right-radius: 24px;
}