/* The original image remains the fallback until the SVG is ready. */
.discuss-first .discuss-block {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.discuss-first .discuss-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/section/grid.webp") center / cover no-repeat;
    opacity: 0.04;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

.box-section.is-interactive-grid::before,
.discuss-first .discuss-block.is-interactive-grid::before {
    opacity: 0;
}

.box-section > .interactive-grid,
.discuss-first .discuss-block > .interactive-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    color: var(--green, #dbfe01);
}

.interactive-grid__lines {
    fill: none;
    stroke: #fff;
    stroke-opacity: 0.045;
    stroke-width: 1;
}

.interactive-grid__highlight {
    fill: none;
    stroke-width: 1.25;
}

/* Keep content inside the rounded grid card when legacy mobile padding is reset. */
@media (max-width: 1000px) {
    .discuss-first .discuss-block {
        padding: 24px clamp(12px, 3vw, 24px);
    }
}

/* Keep full-width mobile backgrounds inside their vertically padded sections. */
@media (max-width: 767px) {
    .profit--journey .profit-wrap,
    section.quiz--polished .quiz-wrap {
        padding-top: max(32px, calc(32 / var(--gfs) * 100vw));
        padding-bottom: max(24px, calc(24 / var(--gfs) * 100vw));
    }

    .box-section::before {
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .discuss-first .discuss-block,
    .quiz--polished .quiz-wrap,
    .profit--journey .profit-wrap { overflow: visible; }

    .discuss-first .discuss-block::before,
    .discuss-first .discuss-block > .interactive-grid,
    .quiz--polished .quiz-wrap::before,
    .quiz--polished .quiz-wrap > .interactive-grid,
    .profit--journey .profit-wrap::before,
    .profit--journey .profit-wrap > .interactive-grid {
        left: calc(50% - 50vw);
        right: auto;
        width: 100vw;
        border-radius: 0;
    }
    /* Both the SVG and the static fallback start at the block's own top edge. */
    .quiz--polished .quiz-wrap::before,
    .quiz--polished .quiz-wrap > .interactive-grid,
    .profit--journey .profit-wrap::before,
    .profit--journey .profit-wrap > .interactive-grid {
        top: 0;
        bottom: 0;
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .box-section.is-interactive-grid::before,
    .discuss-first .discuss-block.is-interactive-grid::before {
        opacity: 0.04;
    }

    .box-section > .interactive-grid,
    .discuss-first .discuss-block > .interactive-grid {
        display: none;
    }
}