/* Keep wide content inside its component on narrow screens. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.container,
.simulasi-grid,
.simulasi-table-col,
.simulasi-tree-col,
.sim-table-wrap,
.komisi-box,
.komisi-table-wrap,
.membership-grid,
.membership-plans-col,
.membership-access-col,
.access-tiles-container,
.pilar-container,
.pilar-header,
.pilar-grid,
.kenapa-grid-wrap,
.kenapa-cards-col,
.final-cta-content {
    min-width: 0;
    max-width: 100%;
}

.sim-table-wrap,
.komisi-table-wrap {
    width: 100%;
}

@media (max-width: 992px) {
    .simulasi-grid,
    .komisi-box,
    .membership-grid,
    .pilar-container,
    .kenapa-grid-wrap {
        width: 100%;
    }

    .simulasi-table-col,
    .simulasi-tree-col,
    .sim-table-wrap,
    .komisi-table-wrap,
    .tree-container-box {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .section-h2,
    .section-p,
    .section-heading-left {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Preserve readable table columns while keeping the page itself in bounds. */
    .table-simulasi {
        width: max-content;
        min-width: 700px;
    }

    .table-komisi {
        width: max-content;
        min-width: 480px;
    }
}