/* ── PAGE ── */
.dri-explainer-page {
    background-color: #050a22;
}

/* ── HERO ── */
.dri-hero__inner {
    align-items: center;
}

@media (min-width: 768px) {
    .dri-hero__copy {
        flex: 0 1 42%;
        max-width: 496px;
    }

    .dri-hero__media {
        flex: 1 1 58%;
        max-width: 704px;
    }
}

.dri-hero__title {
    line-height: 1.03;
}

.dri-scale__level-number {
    font-size: 40px;
}

.dri-hero__description {
    line-height: 1.4;
}

.dri-hero__description,
.dri-section__lead,
.dri-section__body {
    color: #9b9da7;
}

/* ── SECTION TITLES ── */
.dri-section__title {
    line-height: 1.12;
}

/* ── PROBLEM ── */
.dri-problem__grid {
    border-color: #373B4E;
}

.dri-problem__card {
    border-color: #373b4e;
    background-color: rgba(255, 41, 51, 0.06);
}

.dri-problem__corner-dot {
    background-color: #ff2933;
}

.dri-problem__eyebrow {
    color: #FF7F85;
    border-color: #ff7f852b;
    background-color: #ff7f851a;
}

/* ── DRI QUESTION BOX ── */
.dri-dri__frame {
    background: linear-gradient(90deg, #a145d3 0%, #66c0f9 100%);
    padding: 4px;
    border-radius: 16px;
}

.dri-dri__card {
    background-color: #0a0f26;
    border-radius: 12px;
    padding: 40px;
}

.dri-dri__eyebrow {
    background: linear-gradient(90deg, #d78cff 0%, #a3dbff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(2, 6, 25, 0.49);
}

/* ── CALCULATE DRI ── */

/* Dashed border box with corner accents (same technique as cyber-range-legacy-box) */
.dri-calc-box {
    position: relative;
    background-color: transparent;
}

.dri-calc-box::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, #373b4e, #373b4e);
    -webkit-mask:
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) right / 1px 100% no-repeat;
    mask:
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to right, #000 0 3px, transparent 3px 8px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px) right / 1px 100% no-repeat;
}

.dri-calc__grid {
    border: 1px solid #373b4e;
    border-radius: 16px;
    overflow: hidden;
}

.dri-calc__col {
    border-color: #373b4e;
    background-color: #080d20;
}

.dri-calc__media {
    border-color: #1b2035;
}

@media (min-width: 768px) {
    .dri-calc__grid {
        border: 1px solid #373b4e;
    }

    .dri-calc__media {
        display: none;
    }
}

@media (max-width: 767px) {
    .dri-calc__grid {
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .dri-calc__col {
        background-color: transparent;
    }
}

/* ── SCALE / TABLE frames ── */
.dri-scale__frame,
.dri-table__frame {
    background: linear-gradient(90deg, #a145d3 0%, #66c0f9 100%);
    padding: 2px;
}

@media (min-width: 768px) {

    .dri-scale__frame,
    .dri-table__frame {
        min-width: 640px;
    }
}

.dri-scale__card,
.dri-table__card {
    background-color: #0a0f26;
}

.dri-scale__card {
    border: 1px solid #1a1f34;
}

.dri-scale__label {
    line-height: 1.43;
    margin: 0;
}

.dri-scale__value {
    line-height: 1.5;
    color: #fff;
    margin: 0;
    font-size: 16px;
    color: #cdced3;
}

.dri-scale__row-card {
    background: #21253a52;
    border: solid 1px #ffffff1f;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.dri-scale__row-card>div {
    min-width: 0;
}

.dri-scale__row-card .text--base {
    overflow-wrap: anywhere;
}

.dri-dot--inactive {
    background-color: #373b4e;
}

.dri-scale__effort-tag {
    background-color: #1a1e34;
    border: solid 1px #272e4c;
}

.dri-scale__row--head {
    background-color: #0e132a;
    border-bottom: 1px solid #1b2035;
}

.dri-scale__row {
    border-color: #1b2035;
    display: grid;
    grid-template-columns: 80px 1fr;
}

@media (min-width: 768px) {
    .dri-scale__row {
        grid-template-columns: 120px 1fr 1fr;
    }
}

.dri-scale__row>div:nth-child(1) {
    border-right: 1px solid #1a1f34;
}

@media (min-width: 768px) {
    .dri-scale__row>div:nth-child(2) {
        border-right: 1px solid #1a1f34;
    }
}

.dri-table__scroll {
    -webkit-overflow-scrolling: touch;
}

.dri-table__scroll .dri-scale__frame {
    width: 100%;
}

/* ── PLANNING ── */
.dri-planning-box {
    background-color: #0a0f26;
    border: 1px solid #1b2035;
    border-radius: 16px;
    padding: 40px;
    height: 258px;
}

@media (min-width: 768px) {
    .dri-planning-box {
        width: 365px;
        height: auto
    }
}

.dri-planning-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.dri-planning-table__inner {
    min-width: 1296px;
    width: max-content;
}

@media (max-width: 767px) {
    .dri-planning-table {
        width: 100%;
    }
}

.dri-planning-grid {
    display: grid;
    grid-template-columns: 340px 280px 150px auto;
    gap: 16px;
}

.dri-planning__row {
    background-color: #21253a52;
    border: solid 1px rgba(255, 255, 255, 0.12);
}

.dri-planning__gap-meaning {
    white-space: nowrap;
}

.dri-connector-line {
    background-color: #373b4e;
}

.dri-tag--current {
    color: #66c0f9;
}

.dri-tag--gap {
    color: #ff7f85;
}

.dri-tag--required {
    color: #c78fe5;
}

.dri-text--body-lg {
    line-height: 26px;
}

.dri-text--title-lg {
    line-height: 1.23;
    font-size: 26px;
    color: #fff;
}

.dri-text--muted {
    color: #9b9da7;
}

/* ── LEVEL COLORS ── */
.dri-text-lvl-1 {
    color: #22c55e;
}

.dri-bg-lvl-1 {
    background-color: #22c55e;
}

.dri-text-lvl-2 {
    color: #0096f5;
}

.dri-bg-lvl-2 {
    background-color: #0096f5;
}

.dri-text-lvl-3 {
    color: #c78fe5;
}

.dri-bg-lvl-3 {
    background-color: #c78fe5;
}

.dri-text-lvl-4 {
    color: #ff8a00;
}

.dri-bg-lvl-4 {
    background-color: #ff8a00;
}

.dri-text-lvl-5 {
    color: #ff7f85;
}

.dri-bg-lvl-5 {
    background-color: #ff7f85;
}

/* ── CLARITY ── */
.dri-clarity-box {
    background-color: #0a0f26;
    border: 1px solid #1b2035;
    border-radius: 16px;
    padding: 40px;
}

.dri-pill-tag {
    display: inline-block;
    line-height: 18px;
    font-weight: 400;
    padding: 6px 12px;
    border-radius: 9999px;
    margin-bottom: 16px;
}

.dri-pill-tag--is {
    color: #22c55e;
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
}

.dri-pill-tag--not {
    color: #ff7f85;
    background-color: rgba(255, 127, 133, 0.1);
    border: 1px solid #ff7f85;
}

.dri-dri__title-custom {
    line-height: normal;
    color: #fff;
}

.dri-max-w-content {
    max-width: 1144px;
}

/* ── DRI DEFINITION ── */
.dri-definition__intro {
    max-width: 810px;
}

.dri-definition__title {
    line-height: 1.03;
}

.dri-definition__card {
    background-color: #0a0f26;
    border: 1px solid #1b2035;
    max-width: 810px;
}

.dri-definition__statement {
    line-height: normal;
    color: #9b9da7;
}

.dri-definition__statement span {
    color: #fff;
}

.dri-section__lead span {
    color: #fff;
}

.dri-calc__step-num {
    color: #a145d3;
}

.dri-btn-demo {
    min-width: 187px;
}

.dri-definition__watermark {
    font-weight: 700;
    background: linear-gradient(180deg, rgba(102, 192, 249, 0.06) 0%, rgba(102, 192, 249, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    user-select: none;
}

/* ── CTA ── */
.dri-cta__card {
    background-color: #080d20;
}

.dri-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dri-explainer-page .logo-slider--overlay-left {
    background-image: linear-gradient(to right, #050a22 0%, rgba(2, 6, 25, 0) 100%);
}

.dri-explainer-page .logo-slider--overlay-right {
    background-image: linear-gradient(to left, #050a22 0%, rgba(2, 6, 25, 0) 100%)
}

/* ── STEP CARDS & ANIMATION (Copied from Cyber Range) ── */
.cyber-range-steps .cyber-range-step {
    position: relative;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    border-radius: 12px;
    outline: none;
    transition: background-color .25s ease, border-color .25s ease, transform .08s ease;
}

.cyber-range-steps .cyber-range-step:active {
    transform: translateY(1px);
}

.cyber-range-steps .cyber-range-step.is-active {
    background-color: #42236669;
    border: 1px solid #ffffff1f;
}

.cyber-range-steps .cyber-range-step:not(.is-active) {
    background-color: transparent;
    border: 1px solid transparent;
}

.cyber-range-steps .cyber-range-step-badge {
    color: #9B9DA7;
    background-color: #373b4e;
}

.cyber-range-steps .cyber-range-step.is-active .cyber-range-step-badge {
    color: #ffffff;
    background-color: #a145d3;
}

.cyber-range-steps .cyber-range-step-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    overflow: hidden;
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 12px 12px;
    transition: opacity .2s ease;
}

.cyber-range-steps .cyber-range-step.is-active .cyber-range-step-progress {
    opacity: 1;
}

.cyber-range-steps .cyber-range-step-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #a145d3;
    will-change: width;
}

.cyber-range-process-step__subtitle {
    color: #9B9DA7;
}

.cyber-range-process-preview {
    background-color: #050A22;
    min-height: 464px;
}

.cyber-range-process-preview__glow {
    width: 291px;
    height: 232px;
    filter: blur(100px);
}

.cyber-range-process-mobile__badge {
    background-color: #373b4e;
    color: #9b9da7;
}

.cyber-range-process-mobile__subtitle {
    color: #ffffff99;
}

.cyber-range-process-mobile__media {
    background-color: #050A22;
    border-color: transparent;
    min-height: 248px;
}

.cyber-range-process-mobile__glow {
    width: 200px;
    height: 160px;
    filter: blur(80px);
}

.dri-explainer-page .readiness-cta__card {
    display: flex;
    align-items: center
}

.dri-tracking-custom {
    letter-spacing: 0.03em;
}