.roles-hero {
    display: flex;
    align-items: flex-end;
    min-height: 350px;
    padding-top: 168px;
    padding-bottom: 62px;
}

.roles-hero__copy h1 {
    position: relative;
    z-index: 2;
}

.role-system {
    padding-top: 24px;
}

.role-system__head {
    position: relative;
    margin-bottom: 38px;
    padding-left: 22px;
}

.role-system__head::before {
    position: absolute;
    top: 0;
    bottom: 2px;
    left: 0;
    width: 2px;
    content: "";
    background: var(--red-hot);
    box-shadow: 0 0 16px rgba(241, 42, 77, .62);
}

.role-system__head h2 {
    max-width: 840px;
}

.role-ladder {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    border: 0;
}

.role-ladder::before {
    display: none;
}

.role-tier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 300px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tier-color) 24%, rgba(255, 255, 255, .07));
    background: linear-gradient(145deg, color-mix(in srgb, var(--tier-color) 16%, #10080d), #070609 68%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 22px 55px rgba(0, 0, 0, .22);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.role-tier--reaper {
    grid-column: 1 / 8;
    min-height: 370px;
}

.role-tier--shade {
    grid-column: 8 / 13;
    min-height: 370px;
}

.role-tier--dusk {
    grid-column: 1 / 6;
}

.role-tier--void {
    grid-column: 6 / 13;
}

.role-tier--reaper {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 61, 94, .25), transparent 35%),
        linear-gradient(135deg, #350916 0%, #16070d 46%, #070609 100%);
}

.role-tier--shade {
    background:
        radial-gradient(circle at 86% 18%, rgba(202, 42, 74, .2), transparent 36%),
        linear-gradient(145deg, #260a14 0%, #12080d 52%, #070609 100%);
}

.role-tier--dusk {
    background:
        radial-gradient(circle at 82% 16%, rgba(158, 69, 88, .2), transparent 38%),
        linear-gradient(145deg, #211016 0%, #10090d 54%, #070609 100%);
}

.role-tier--void {
    background:
        radial-gradient(circle at 86% 18%, rgba(110, 103, 107, .16), transparent 38%),
        linear-gradient(135deg, #171316 0%, #0c090c 56%, #050406 100%);
}

.role-tier:hover {
    z-index: 2;
    padding: 34px;
    border-color: color-mix(in srgb, var(--tier-color) 62%, rgba(255, 255, 255, .08));
    background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 26%, #180a10), #070609 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .34), 0 0 36px color-mix(in srgb, var(--tier-color) 10%, transparent);
    transform: translateY(-5px);
}

.role-tier::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
    opacity: .82;
    background: linear-gradient(90deg, transparent, var(--tier-color), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tier-color) 56%, transparent);
}

.role-tier:hover::after {
    opacity: 1;
}

.role-tier::before {
    display: none;
}

.role-tier > * {
    position: relative;
    z-index: 2;
}

.role-tier__index {
    position: absolute;
    top: 28px;
    right: 30px;
    color: color-mix(in srgb, var(--tier-color) 72%, #fff);
    font-size: 12px;
    letter-spacing: .15em;
}

.role-tier__identity {
    width: 100%;
}

.role-tier::selection {
    background: var(--tier-color);
}

.role-tier::marker {
    display: none;
}

.role-tier__identity h3 {
    margin-top: 16px;
    font-size: clamp(48px, 6vw, 86px);
}

.role-tier__identity h3 {
    color: transparent;
    background: linear-gradient(105deg, #fff 0%, color-mix(in srgb, var(--tier-color) 78%, #fff) 42%, var(--tier-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.role-tier--shade .role-tier__identity h3,
.role-tier--dusk .role-tier__identity h3,
.role-tier--void .role-tier__identity h3 {
    font-size: clamp(42px, 5vw, 68px);
}

.role-tier::after,
.role-tier::before {
    pointer-events: none;
}

.role-tier__signal {
    width: min(330px, 68%);
    margin-top: auto;
    padding-top: 52px;
}

.role-tier__signal i {
    height: 4px;
    border-radius: 3px;
}

.role-tier__range {
    align-items: flex-start;
    margin-top: 22px;
    text-align: left;
}

.role-tier__range strong {
    font-size: clamp(24px, 2.5vw, 34px);
}

.role-tier[data-mark] {
    isolation: isolate;
}

.role-tier[data-mark] .role-tier__identity::before {
    position: absolute;
    top: -64px;
    right: -6px;
    z-index: -1;
    content: "";
    color: color-mix(in srgb, var(--tier-color) 7%, transparent);
    font: 700 clamp(170px, 19vw, 270px)/1 var(--display);
    letter-spacing: -.1em;
    pointer-events: none;
    text-shadow: 0 0 52px color-mix(in srgb, var(--tier-color) 7%, transparent);
}

.role-tier--reaper .role-tier__identity::before { content: "R"; }
.role-tier--shade .role-tier__identity::before { content: "S"; }
.role-tier--dusk .role-tier__identity::before { content: "D"; }
.role-tier--void .role-tier__identity::before { content: "V"; }

.role-tier--reaper[data-mark] .role-tier__identity::before {
    top: -78px;
    font-size: clamp(210px, 23vw, 320px);
}

@media (max-width: 900px) {
    .role-tier--reaper,
    .role-tier--shade,
    .role-tier--dusk,
    .role-tier--void {
        grid-column: span 6;
        min-height: 320px;
    }
}

@media (max-width: 700px) {
    .roles-hero {
        min-height: 300px;
        padding-top: 132px;
        padding-bottom: 48px;
    }

    .role-system {
        padding-top: 34px;
    }

    .role-system__head {
        margin-bottom: 30px;
    }

    .role-ladder {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-tier--reaper,
    .role-tier--shade,
    .role-tier--dusk,
    .role-tier--void {
        grid-column: 1;
        min-height: 250px;
    }

    .role-tier,
    .role-tier:hover {
        padding: 26px;
    }

    .role-tier__index {
        top: 22px;
        right: 22px;
    }

    .role-tier__identity h3,
    .role-tier--shade .role-tier__identity h3,
    .role-tier--dusk .role-tier__identity h3,
    .role-tier--void .role-tier__identity h3 {
        font-size: clamp(42px, 14vw, 62px);
    }

    .role-tier__signal {
        padding-top: 34px;
    }

    .role-tier[data-mark] .role-tier__identity::before,
    .role-tier--reaper[data-mark] .role-tier__identity::before {
        top: -34px;
        font-size: 180px;
    }
}