.nohrd-training-profile {
    --nohrd-color-1: #2f3437;
    --nohrd-color-2: #806547;
    --nohrd-color-3: #aa8c68;
    --nohrd-color-4: #c3aa8d;
    --nohrd-color-5: #d8c7b4;
    --nohrd-color-6: #e9dfd4;
    --nohrd-track-color: #f0ede8;
    --nohrd-text-color: #252525;
    --nohrd-muted-color: #6f6f6f;
    --nohrd-border-color: #e3ddd5;
    --nohrd-background-color: #faf9f7;
    --nohrd-legend-background: #fff;
    --nohrd-legend-active-background: #f7f3ee;
    --nohrd-benefits-background: #f4f0eb;
    --nohrd-heading-font-family: forma-djr-deck, sans-serif;
    --nohrd-subheading-font-family: din-2014, sans-serif;
    --nohrd-title-letter-spacing: 1px;
    --nohrd-title-text-transform: uppercase;
    --nohrd-center-small-font-family: forma-djr-deck, sans-serif;
    --nohrd-legend-label-font-family: din-2014, sans-serif;
    --nohrd-legend-description-font-family: din-2014, sans-serif;
    --nohrd-center-main-font-family: forma-djr-deck, sans-serif;
    --nohrd-chart-value-font-family: din-2014, sans-serif;
    --nohrd-benefits-font-family: din-2014, sans-serif;
    --nohrd-note-font-family: din-2014, sans-serif;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
    color: var(--nohrd-text-color);
    background: var(--nohrd-background-color);
    border-radius: 8px;
}

.nohrd-training-profile *,
.nohrd-training-profile *::before,
.nohrd-training-profile *::after {
    box-sizing: border-box;
}

.nohrd-training-profile__header {
    margin-bottom: 30px;
    text-align: center;
}

.nohrd-training-profile__title {
    margin: 0 0 8px;
    font-family: var(--nohrd-heading-font-family);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: var(--nohrd-title-letter-spacing);
    text-transform: var(--nohrd-title-text-transform);
}

.nohrd-training-profile__subtitle {
    margin: 0;
    color: var(--nohrd-muted-color);
    font-family: var(--nohrd-subheading-font-family);
    font-size: 16px;
    line-height: 1.6;
}

.nohrd-training-profile__content {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
    max-width: 100%;
}

.nohrd-training-profile__chart-column {
    flex: 0 1 380px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.nohrd-training-profile__chart {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.nohrd-training-profile__svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.nohrd-training-profile__track,
.nohrd-training-profile__segment {
    fill: none;
    stroke-width: 34;
}

.nohrd-training-profile__track {
    stroke: var(--nohrd-track-color);
}

.nohrd-training-profile__segment {
    stroke-linecap: butt;
    cursor: pointer;
    opacity: 1;
    transition:
        opacity 0.25s ease,
        stroke-width 0.25s ease;
}

.nohrd-training-profile__segment:hover,
.nohrd-training-profile__segment:focus {
    stroke-width: 39;
    outline: none;
}

.nohrd-training-profile__center-circle {
    fill: var(--nohrd-background-color);
}

.nohrd-training-profile__center-small {
    fill: var(--nohrd-muted-color);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.nohrd-training-profile__center-main {
    fill: var(--nohrd-text-color);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--nohrd-center-main-font-family);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nohrd-training-profile__chart-value {
    min-height: 50px;
    margin-top: 18px;
    color: var(--nohrd-color-2);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-family: var(--nohrd-chart-value-font-family);
}

.nohrd-training-profile__legend-column {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.nohrd-training-profile__legend {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nohrd-training-profile__legend-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 10px;
    padding: 13px 15px;
    background: var(--nohrd-legend-background);
    border: 1px solid var(--nohrd-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.nohrd-training-profile__legend-item:hover,
.nohrd-training-profile__legend-item.is-active {
    border-color: var(--nohrd-color-3);
    background: var(--nohrd-legend-active-background);
}

.nohrd-training-profile__legend-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.nohrd-training-profile__legend-text {
    flex: 1 1 auto;
    min-width: 0;
}

.nohrd-training-profile__legend-label {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    font-family: var(--nohrd-legend-label-font-family);
}

.nohrd-training-profile__legend-description {
    display: block;
    color: var(--nohrd-muted-color);
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--nohrd-legend-description-font-family);
}

.nohrd-training-profile__legend-value {
    flex: 0 0 auto;
    min-width: 54px;
    padding: 5px 8px;
    background: var(--nohrd-track-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.nohrd-training-profile__benefits {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--nohrd-benefits-background);
    border-left: 3px solid var(--nohrd-color-2);
    font-size: 14px;
    line-height: 1.6;
    font-family: var(--nohrd-benefits-font-family);
}

.nohrd-training-profile__note {
    margin: 16px 0 0;
    color: var(--nohrd-muted-color);
    font-size: 12px;
    line-height: 1.6;
    font-family: var(--nohrd-note-font-family);
}

@media (max-width: 767px) {
    .nohrd-training-profile {
        padding: 22px 15px;
    }

    .nohrd-training-profile__title {
        font-size: 23px;
    }

    .nohrd-training-profile__content {
        display: block;
    }

    .nohrd-training-profile__chart-column {
        width: 100%;
        max-width: 320px;
        margin-bottom: 30px;
    }

    .nohrd-training-profile__legend-item {
        gap: 10px;
        padding: 12px;
    }

    .nohrd-training-profile__legend-label {
        font-size: 15px;
    }

    .nohrd-training-profile__legend-description {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nohrd-training-profile__segment {
        transition: none !important;
    }
}