.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.popup-box {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}
.popup-box h3 {
    color: #d14343;
    margin-bottom: 10px;
}
.popup-box p {
    color: #52606d;
    margin-bottom: 20px;
    font-size: 14px;
}
.popup-box button {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #00ffd5, #00aaff);
    color: #002222;
    font-weight: bold;
}
/* ========================= */
/* PLAN HERO */
/* ========================= */
.about-plan {
    width: var(--shell-width);
    margin: 0 auto;
    padding: 132px var(--shell-gutter) 58px;
    text-align: center;
}
.about-plan::after {
    content: "";
    display: block;
    width: min(100%, 760px);
    height: 1px;
    margin: 30px auto 0;
    background: linear-gradient(90deg, transparent, rgba(47, 214, 211, 0.32), transparent);
}
.about-plan-box {
    max-width: 780px;
    margin: 0 auto;
}
.about-plan h1 {
    margin-bottom: 14px;
    color: var(--text-main);
    font-size: clamp(36px, 4.8vw, 56px);
    line-height: 1.08;
}
.about-plan h1 span {
    background: none;
    color: #169da2;
    -webkit-text-fill-color: currentColor;
}
.about-plan p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.7;
}
.plan-page .insentif-table,
.plan-page .income-box,
.plan-page .bse-table {
    overflow: hidden;
}
.plan-page .insentif-table,
.plan-page .income-box,
.plan-page .bse-table,
.plan-page .retention-box,
.plan-page .recurring-box,
.plan-page .group-box,
.plan-page .scenario-grid,
.plan-page .recurring-grid,
.plan-page .group-grid,
.plan-page .recurring-formula {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.plan-page .insentif-row,
.plan-page .retention-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}
.plan-page .income-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
}
.plan-page .bse-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
    align-items: center;
}
.plan-page .insentif-row,
.plan-page .income-row,
.plan-page .bse-row,
.plan-page .retention-row {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.plan-page .insentif-row:last-child,
.plan-page .income-row:last-child,
.plan-page .bse-row:last-child,
.plan-page .retention-row:last-child {
    border-bottom: none;
}
.plan-page .insentif-row div,
.plan-page .income-row div,
.plan-page .bse-row div,
.plan-page .retention-row div {
    text-align: center;
    font-size: 14px;
}
.plan-page .highlight-red {
    color: #d14343;
}
.plan-page .retention-box {
    margin: 22px auto 0;
    padding: 24px;
}
.plan-page .retention-table {
    width: 100%;
}
.plan-page .retention-box h3 {
    margin-bottom: 16px;
    text-align: center;
    font-size: 22px;
}
.plan-page .income-box {
    margin: 0 auto;
}
.plan-page .bse-table {
    margin: 0 auto;
}
.plan-page .bse-row.group div:first-child {
    color: #169da2;
    font-weight: 600;
}
.plan-page .scenario-grid,
.plan-page .recurring-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 24px auto 0;
}
.plan-page .group-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin: 24px auto 0;
}
.plan-page .scenario-card,
.plan-page .recurring-card,
.plan-page .group-card {
    padding: 20px 18px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.plan-page .scenario-top,
.plan-page .recurring-card .top {
    font-size: 28px;
    font-weight: 700;
}
.plan-page .scenario-label,
.plan-page .recurring-card .label {
    margin: 8px 0 10px;
    font-size: 14px;
}
.plan-page .scenario-value,
.plan-page .recurring-card .value {
    font-size: 22px;
    font-weight: 700;
}
.plan-page .recurring-box,
.plan-page .group-box {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}
.plan-page .recurring-image,
.plan-page .group-image {
    text-align: center;
}
.plan-page .recurring-image img,
.plan-page .group-image img {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    display: block;
}
.plan-page .recurring-image span,
.plan-page .group-image span {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
}
.plan-page .recurring-text,
.plan-page .group-text {
    text-align: left;
}
.plan-page .recurring-text p,
.plan-page .group-text p {
    margin-bottom: 10px;
    line-height: 1.7;
}
.plan-page .recurring-text p:last-child,
.plan-page .group-text p:last-child {
    margin-bottom: 0;
}
.plan-page .recurring-formula {
    margin: 24px auto 0;
    padding: 14px 18px;
    border-radius: 999px;
    background: #edf8f7;
    border: 1px solid rgba(47, 214, 211, 0.16);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}
.plan-page .group-card .tier {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
}
.plan-page .group-card .tier span {
    font-size: 12px;
}
.plan-page .group-card .bse {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
}
.plan-page .group-card .income {
    font-size: 18px;
    font-weight: 700;
}
.plan-page .insentif-section,
.plan-page .income-section,
.plan-page .scenario-section {
    width: var(--shell-width);
    margin: 0 auto 28px;
    padding: 34px;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}
.plan-page .insentif-title,
.plan-page .income-title,
.plan-page .bse-title,
.plan-page .recurring-title,
.plan-page .group-title {
    margin-bottom: 22px;
    color: var(--text-main);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    text-align: center;
}
.plan-page .insentif-title span,
.plan-page .income-title span,
.plan-page .bse-title span,
.plan-page .recurring-title span,
.plan-page .group-title span {
    background: none;
    color: #169da2;
    -webkit-text-fill-color: currentColor;
}
.plan-page .section-break-title {
    margin-top: 34px;
}
.plan-page .insentif-table,
.plan-page .income-box,
.plan-page .bse-table,
.plan-page .retention-box,
.plan-page .recurring-box,
.plan-page .group-box,
.plan-page .scenario-card,
.plan-page .recurring-card,
.plan-page .group-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.plan-page .insentif-table,
.plan-page .income-box,
.plan-page .bse-table,
.plan-page .retention-box,
.plan-page .recurring-box,
.plan-page .group-box {
    border-radius: 26px;
}
.plan-page .insentif-row.header,
.plan-page .income-row.header,
.plan-page .bse-row.header,
.plan-page .retention-row.header {
    background: #edf8f7;
}
.plan-page .insentif-row.header div,
.plan-page .income-row.header div,
.plan-page .bse-row.header div,
.plan-page .retention-row.header div {
    color: #169da2;
}
.plan-page .insentif-row div,
.plan-page .income-row div,
.plan-page .bse-row div,
.plan-page .retention-row div,
.plan-page .recurring-text p,
.plan-page .group-text p,
.plan-page .bse-note,
.plan-page .note,
.plan-page .recurring-image span,
.plan-page .group-image span,
.plan-page .recurring-formula {
    color: var(--text-body);
}
.plan-page .retention-box h3,
.plan-page .scenario-label,
.plan-page .recurring-card .label,
.plan-page .group-card .bse,
.plan-page .group-card .tier span,
.plan-page .recurring-formula,
.plan-page .note,
.plan-page .bse-note,
.plan-page .recurring-image span,
.plan-page .group-image span {
    color: var(--text-body);
}
.plan-page .scenario-value,
.plan-page .recurring-card .value,
.plan-page .group-card .income,
.plan-page .insentif-row.total div,
.plan-page .scenario-card.highlight .scenario-value,
.plan-page .recurring-card.highlight .value,
.plan-page .group-card.highlight .income {
    color: var(--text-main);
}
.plan-page .scenario-top,
.plan-page .recurring-card .top,
.plan-page .group-card .tier,
.plan-page .retention-box h3,
.plan-page .insentif-title span,
.plan-page .income-title span,
.plan-page .bse-title span,
.plan-page .recurring-title span,
.plan-page .group-title span {
    color: #169da2;
}
.plan-page .retention-box,
.plan-page .retention-table,
.plan-page .retention-row,
.plan-page .retention-row div,
.plan-page .scenario-card,
.plan-page .scenario-card div,
.plan-page .recurring-card,
.plan-page .recurring-card div,
.plan-page .group-card,
.plan-page .group-card div {
    color: var(--text-main);
}
.plan-page .insentif-row.total,
.plan-page .bse-row.highlight,
.plan-page .scenario-card.highlight,
.plan-page .recurring-card.highlight,
.plan-page .group-card.highlight {
    background: linear-gradient(135deg, #edf8f7, #dff3f2);
}
.plan-page .scenario-card,
.plan-page .recurring-card,
.plan-page .group-card {
    border-radius: 24px;
}
.plan-page .scenario-card:hover,
.plan-page .recurring-card:hover,
.plan-page .group-card:hover {
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}
.plan-page .recurring-box,
.plan-page .group-box {
    padding: 24px;
}
.plan-page .recurring-image img,
.plan-page .group-image img {
    border-radius: 22px;
    background: #edf8f7;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}
.plan-page .recurring-formula span,
.plan-page .scenario-top,
.plan-page .recurring-card .top,
.plan-page .group-card .tier {
    color: #169da2;
}
.plan-page .footer-simple {
    font-size: 0;
}
.plan-page .footer-simple::after {
    content: "\00A9 2026 BeONE Mobile. All Rights Reserved.";
    font-size: 13px;
}
/* ========================= */
/* MOBILE */
/* ========================= */
@media (max-width: 768px) {
    .about-plan {
        width: 100%;
        padding: 118px 20px 40px;
    }
    .about-plan::after {
        margin-top: 24px;
    }
    .about-plan-box {
        padding: 0;
    }
    .about-plan h1 {
        font-size: 30px;
    }
    .about-plan p {
        font-size: 14px;
        line-height: 1.65;
    }
    .plan-page .insentif-section,
    .plan-page .income-section,
    .plan-page .scenario-section {
        width: 100%;
        margin-bottom: 18px;
        padding: 22px 16px;
        border-radius: 24px;
    }
    .plan-page .insentif-title,
    .plan-page .income-title,
    .plan-page .bse-title,
    .plan-page .recurring-title,
    .plan-page .group-title {
        font-size: 28px;
    }
    .plan-page .insentif-row,
    .plan-page .income-row,
    .plan-page .bse-row,
    .plan-page .retention-row {
        padding: 14px 10px;
    }
    .plan-page .insentif-row div,
    .plan-page .income-row div,
    .plan-page .bse-row div,
    .plan-page .retention-row div {
        font-size: 12px;
    }
    .plan-page .retention-box,
    .plan-page .recurring-box,
    .plan-page .group-box {
        padding: 22px 16px;
        border-radius: 22px;
    }
    .plan-page .recurring-box,
    .plan-page .group-box {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .plan-page .recurring-text,
    .plan-page .group-text {
        text-align: center;
    }
    .plan-page .scenario-grid,
    .plan-page .recurring-grid,
    .plan-page .group-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .plan-page .scenario-card,
    .plan-page .recurring-card,
    .plan-page .group-card {
        padding: 16px 14px;
        border-radius: 20px;
    }
    .plan-page .scenario-top,
    .plan-page .recurring-card .top {
        font-size: 24px;
    }
    .plan-page .scenario-value,
    .plan-page .recurring-card .value,
    .plan-page .group-card .income {
        font-size: 18px;
    }
}
/* Shared navy, teal and white visual language. */
body.plan-page { background: #f0f6f9; }
body.plan-page > section.about-plan {
    width: var(--shell-width); margin: 18px auto 48px;
    padding: 142px 32px 68px; border-radius: 32px;
    background: linear-gradient(115deg, #071d36, #103f61 65%, #007d83);
    border: 1px solid #215c70;
    box-shadow: 0 18px 42px rgba(7,29,54,.12);
}
body.plan-page .about-plan::after { display: none; }
body.plan-page .about-plan h1 { color: #fff; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
body.plan-page .about-plan h1 span { color: #55f3cf; }
body.plan-page .about-plan .section-kicker { color: #a9f5e6; }
body.plan-page .about-plan p { color: #deedf5; line-height: 1.8; }
body.plan-page > section:is(.insentif-section,.income-section,.scenario-section) {
    width: min(calc(100% - 48px),1160px); padding: 40px;
    margin: 0 auto 32px; background: #fff; border: 1px solid #dce8ed;
    border-radius: 24px; box-shadow: 0 8px 24px rgba(16,45,70,.04);
}
body.plan-page :is(.insentif-title,.income-title,.bse-title,.recurring-title,.group-title) {
    font-size: clamp(28px,3.3vw,42px); line-height: 1.2; letter-spacing: -.035em; text-wrap: balance;
}
body.plan-page :is(.insentif-title,.income-title,.bse-title,.recurring-title,.group-title) span { color: #007e78; }
body.plan-page .section-break-title { margin-top: 56px; }
body.plan-page :is(.insentif-table,.income-box,.bse-table,.retention-table) {
    border: 1px solid #d5e6ed; border-radius: 16px; box-shadow: none; overflow: auto;
}
body.plan-page :is(.insentif-row,.income-row,.bse-row,.retention-row) { gap: 10px; line-height: 1.5; }
body.plan-page :is(.insentif-row,.income-row,.bse-row,.retention-row):nth-child(odd):not(.header):not(.total):not(.highlight) { background: #f3f7fa; }
body.plan-page :is(.insentif-row,.income-row,.bse-row,.retention-row).header { background: #102d46; }
body.plan-page :is(.insentif-row,.income-row,.bse-row,.retention-row).header div { color: #fff; font-weight: 600; }
body.plan-page .insentif-row.total, body.plan-page .bse-row.highlight { background: #dff5ec; font-weight: 700; }
body.plan-page .highlight-red div { color: #a33232; }
body.plan-page :is(.retention-box,.recurring-box,.group-box) { background: #f3f8fb; border-color: #dce8ed; border-radius: 20px; box-shadow: none; }
body.plan-page :is(.note,.bse-note) { margin: 18px auto 0; max-width: 980px; line-height: 1.7; font-size: 13px; }
body.plan-page .recurring-formula { border-radius: 14px; background: #e2f6ee; border-color: #b9dfd2; line-height: 1.7; }
body.plan-page :is(.scenario-card,.recurring-card,.group-card) { border-radius: 18px; border-color: #d5e6ed; box-shadow: none; }
body.plan-page :is(.scenario-card,.recurring-card,.group-card).highlight { background: #dff5ec; border: 2px solid #008879; }
body.plan-page :is(.scenario-value,.recurring-card .value,.group-card .income) { font-variant-numeric: tabular-nums; }
body.plan-page :is(.scenario-top,.recurring-card .top,.group-card .tier) { color: #007e78; }
body.plan-page .nav-links a[aria-current="page"] { color: #006c67; background: #e6f6f0; }
body.plan-page .footer-simple { font-size: 13px; }
body.plan-page .footer-simple::after { display: none; }
body.plan-page .popup-box button { color: #fff; background: #007e78; border-radius: 12px; }
@media (max-width: 768px) {
    body.plan-page > section.about-plan { padding: 112px 22px 42px; border-radius: 24px; margin-bottom: 28px; }
    body.plan-page > section:is(.insentif-section,.income-section,.scenario-section) { width: calc(100% - 28px); padding: 28px 14px; border-radius: 20px; margin-bottom: 20px; }
    body.plan-page :is(.insentif-row,.bse-row,.retention-row) { min-width: 460px; }
    body.plan-page .income-row { min-width: 280px; }
    body.plan-page :is(.insentif-table,.income-box,.bse-table,.retention-table) { scrollbar-width: thin; scrollbar-color: #008879 #e5eef3; }
    body.plan-page :is(.scenario-grid,.recurring-grid,.group-grid) { gap: 12px; }
    body.plan-page .group-card:last-child { grid-column: 1 / -1; }
    body.plan-page .recurring-formula { padding: 14px; font-size: 14px; }
    body.plan-page .section-break-title { margin-top: 40px; }
}