.role-view-section {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--section-padding-top) 20px 110px;
    overflow-x: clip;
    background-color: #FFFFFF;
    background-image: url("assets/section-images/role-view-background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.role-view-section::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.08) 52%,
        rgba(255, 255, 255, 0.16) 100%
    );
    content: "";
    pointer-events: none;
}

.role-view-section > .h1-body,
.role-view-section > .h2-body {
    color: #000000;
}

.role-view-section > .h2-body {
    margin: var(--body-copy-spacing) 0 0;
    line-height: 1.35;
}

.role-view-demo-viewport {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 42px;
    overflow: visible;
}

.role-view-demo {
    position: relative;
    align-self: flex-start;
    flex: 0 0 1160px;
    width: 1160px;
    height: 500px;
    zoom: var(--role-view-scale, 1);
}

.role-view-label {
    margin: 0;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

.role-view-tabs {
    position: absolute;
    top: 48px;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 420px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #BEBEBE;
    border-radius: 9px;
    background-color: #FFFFFF;
    transform: translateX(-50%);
}

.role-view-tab {
    border: 0;
    background-color: transparent;
    color: #111111;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
}

.role-view-tab + .role-view-tab {
    border-left: 1px solid rgba(190, 190, 190, 0.45);
}

.role-view-tab.is-active {
    background-color: #EAF4FB;
    color: #000000;
}

.role-view-tab:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid #133078;
    outline-offset: -3px;
}

.role-view-card-stage {
    position: absolute;
    top: 118px;
    left: 0;
    width: 1160px;
    height: 382px;
}

.role-view-card {
    position: absolute;
    top: 52px;
    left: 50%;
    width: 540px;
    height: 300px;
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid #D5D8DE;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: var(--drop-shadow);
    color: #606775;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transform-origin: center;
    transition:
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 360ms ease,
        filter 360ms ease;
}

.role-view-card[data-position="current"] {
    z-index: 3;
    opacity: 1;
    filter: none;
    transform: translateX(-50%) translateY(-28px) scale(1.08);
}

.role-view-card[data-position="previous"] {
    z-index: 1;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(0.72);
    backdrop-filter: blur(16px) saturate(0.72);
    filter: none;
    transform: translateX(calc(-50% - 385px)) translateY(-22px) scale(0.92);
}

.role-view-card[data-position="next"] {
    z-index: 1;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(0.72);
    backdrop-filter: blur(16px) saturate(0.72);
    filter: none;
    transform: translateX(calc(-50% + 385px)) translateY(-22px) scale(0.92);
}

.role-view-card[data-position="previous"] .role-report,
.role-view-card[data-position="next"] .role-report {
    opacity: 0.52;
    filter: saturate(0.55);
}

.role-view-card-placeholder {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    background-color: #F5F1E9;
    color: #5B473E;
    font-size: 12px;
    font-weight: 500;
}

.role-report {
    width: 100%;
    color: #1F2733;
    text-align: left;
    transition: opacity 360ms ease, filter 360ms ease;
}

.role-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.role-report-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-report-header strong {
    color: #101620;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
}

.role-report-header time {
    color: #778093;
    font-size: 11px;
    font-weight: 400;
}

.role-report-view {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 13px;
    background-color: #FBF1DF;
    color: #5B473E;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.role-report-view-analyst {
    background-color: #E6F3FF;
    color: #3788DE;
}

.role-report-view-cfo {
    background-color: #F1EAFE;
    color: #7654B5;
}

.role-report-rows {
    margin: 14px 0 0;
}

.role-report-row {
    display: grid;
    grid-template-columns: 1fr 190px;
    align-items: center;
    min-height: 32px;
    margin: 0;
    border-top: 1px solid #E2E5E9;
    color: #697386;
    font-size: 12px;
    font-weight: 400;
}

.role-report-row dt,
.role-report-row dd {
    margin: 0;
}

.role-report-row dd {
    color: #1F2733;
}

.role-report-negative {
    color: #D86A38 !important;
}

.role-report-restricted-row dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.role-report-blurred {
    display: inline-block;
    width: 92px;
    overflow: hidden;
    color: #78818E;
    filter: blur(5px);
    opacity: 0.52;
    white-space: nowrap;
    user-select: none;
}

.role-report-restricted,
.role-report-approved,
.role-report-pending,
.role-report-hidden {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1;
}

.role-report-restricted {
    background-color: #F1F3F6;
    color: #7B8493;
}

.role-report-approved {
    background-color: #E1F3EF;
    color: #28796F;
}

.role-report-pending {
    background-color: #FBF0D9;
    color: #94672B;
}

.role-report-hidden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.role-report-hidden {
    background-color: #F1F3F6;
    color: #737D8D;
}

.role-report-hidden svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.role-view-card:focus-visible {
    outline: 2px solid #133078;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .role-view-tab,
    .role-view-card,
    .role-report {
        transition: none;
    }
}