/* =========================================================
   PASSIVE PLAN PAGE
========================================================= */

:root {
    --passive-green: #08764c;
    --passive-green-dark: #043e2b;
    --passive-gold: #d7a42d;
    --passive-gold-light: #f2d36a;
    --passive-text: #15362a;
    --passive-muted: #748078;
}


.passive-plan-page {
    position: relative;
    overflow: hidden;
    padding: 48px 22px 55px;
    background: radial-gradient(circle at 8% 10%, rgba(190, 232, 200, .55), transparent 25%), radial-gradient(circle at 90% 12%, rgba(255, 220, 110, .28), transparent 28%), linear-gradient( 135deg, #f8fff9, #ffffff 45%, #fff9e8 );
}


.passive-plan-container {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: auto;
}


/* =========================================================
   HEADER
========================================================= */

.passive-plan-header {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 220px;
    gap: 25px;
    align-items: center;
    padding: 22px 25px;
    margin-bottom: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(8,118,76,.09);
    box-shadow: 0 14px 38px rgba(24,75,54,.08);
    backdrop-filter: blur(14px);
}


/* BRAND */

.passive-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}


.passive-brand-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #edf8f1;
    color: var(--passive-green);
    font-size: 25px;
}


.passive-brand h3 {
    margin: 0;
    color: var(--passive-green);
    font-size: 27px;
    font-weight: 850;
    line-height: 1;
}


.passive-brand span {
    display: block;
    margin-top: 5px;
    color: #5d7066;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}


/* TITLE */

.passive-title-area {
    text-align: center;
}


.passive-main-title {
    display: block;
    margin-bottom: 0;
    color: var(--passive-green);
    font-size: 39px;
    font-weight: 900;
    line-height: 1;
}


    .passive-main-title b {
        color: var(--passive-gold);
    }


.passive-title-area h1 {
    margin: 5px 0 12px;
    color: #123729;
    font-size: 27px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.passive-tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 41px;
    padding: 0 25px;
    border-radius: 30px;
    background: linear-gradient( 135deg, #08784e, #045a39 );
    border: 1px solid var(--passive-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    box-shadow: 0 8px 22px rgba(8,118,76,.18);
}


    .passive-tagline span {
        color: var(--passive-gold-light);
    }


/* TRAVEL MARK */

.passive-travel-mark {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}


    .passive-travel-mark > i {
        color: var(--passive-green);
        font-size: 34px;
        transform: rotate(-20deg);
    }


    .passive-travel-mark span,
    .passive-travel-mark strong {
        display: block;
    }


    .passive-travel-mark span {
        color: var(--passive-green);
        font-size: 15px;
        font-weight: 700;
    }


    .passive-travel-mark strong {
        margin-top: 2px;
        color: var(--passive-gold);
        font-size: 13px;
    }


/* =========================================================
   MAIN GRID
========================================================= */

.passive-main {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr) 215px;
    gap: 18px;
    align-items: stretch;
}


/* =========================================================
   LEFT BENEFITS
========================================================= */

.passive-benefits {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 15px;
    border-radius: 23px;
    background: linear-gradient( 180deg, #0a724a, #043e2a );
    box-shadow: 0 17px 40px rgba(6,78,50,.18);
}


.passive-benefit {
    text-align: center;
    padding: 13px 6px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}


    .passive-benefit:last-child {
        border-bottom: 0;
    }


.passive-benefit-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(240,203,95,.85);
    color: #efc957;
    background: rgba(255,255,255,.045);
    font-size: 20px;
}


.passive-benefit h3 {
    margin: 0 0 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}


.passive-benefit p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 9px;
}


/* =========================================================
   TABLE
========================================================= */

.passive-table-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 23px;
    border: 1px solid rgba(215,164,45,.68);
    background: rgba(255,255,255,.90);
    box-shadow: 0 17px 45px rgba(25,75,54,.11);
}


    .passive-table-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 5;
        background: linear-gradient( 90deg, var(--passive-green), var(--passive-gold), var(--passive-green) );
    }


.passive-table-scroll {
    overflow-x: auto;
}


.passive-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}


    /* HEADER */

    .passive-table thead th {
        padding: 14px 11px;
        text-align: center;
        color: #fff;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .4px;
        background: linear-gradient( 135deg, #08744b, #045b3a );
        border-right: 1px solid rgba(255,255,255,.12);
    }


        .passive-table thead th:nth-child(3),
        .passive-table thead th:nth-child(4) {
            color: #27352b;
            background: linear-gradient( 135deg, #e4b63a, #f4d468 );
        }


    /* ROWS */

    .passive-table tbody tr:nth-child(odd) {
        background: rgba(255,255,255,.95);
    }


    .passive-table tbody tr:nth-child(even) {
        background: #f3f7e9;
    }


    .passive-table tbody tr {
        transition: background-color .2s ease;
    }


        .passive-table tbody tr:hover td {
            background-color: rgba(8,118,76,.045);
        }


    /* CELLS */

    .passive-table td {
        padding: 9px 12px;
        color: var(--passive-text);
        font-size: 11px;
        line-height: 1.4;
        vertical-align: middle;
        border-bottom: 1px solid rgba(12,70,45,.06);
        transition: background-color .2s ease, color .2s ease;
    }


        .passive-table td:first-child {
            width: 65px;
            text-align: center;
            color: #fff;
            font-weight: 800;
            background: linear-gradient( 135deg, #0b7950, #05613e );
        }


        .passive-table td:nth-child(2) {
            min-width: 230px;
            font-weight: 800;
            font-size: 11px;
        }


        .passive-table td:nth-child(3) {
            min-width: 140px;
            text-align: center;
            font-size: 12px;
            font-weight: 850;
        }


        .passive-table td:nth-child(4) {
            min-width: 390px;
        }


    /* MILESTONE ROWS */

    .passive-table tbody tr:nth-child(8),
    .passive-table tbody tr:nth-child(11),
    .passive-table tbody tr:nth-child(12),
    .passive-table tbody tr:nth-child(16) {
        background: linear-gradient( 90deg, rgba(255,244,201,.96), rgba(255,255,255,.96) );
    }


        .passive-table tbody tr:nth-child(16) td {
            font-weight: 850;
        }


/* =========================================================
   RIGHT VISUALS
========================================================= */

.passive-visual {
    display: grid;
    gap: 11px;
}


.passive-visual-card {
    position: relative;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px;
    overflow: hidden;
    text-align: center;
    border-radius: 18px;
    border: 1px solid rgba(217,167,45,.30);
    background: radial-gradient( circle at top, #fff9dd, #eff8f2 );
    box-shadow: 0 9px 24px rgba(25,75,54,.07);
    transition: .25s ease;
}


    .passive-visual-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(25,75,54,.12);
    }


    .passive-visual-card i {
        margin-bottom: 7px;
        color: var(--passive-green);
        font-size: 28px;
    }


    .passive-visual-card span {
        display: block;
        color: #a27d25;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
    }


    .passive-visual-card strong {
        margin-top: 3px;
        color: #16372b;
        font-size: 11px;
    }


/* =========================================================
   FOOTER STRIP
========================================================= */

.passive-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 20px;
    background: linear-gradient( 135deg, #086442, #03422c );
    box-shadow: 0 13px 32px rgba(6,79,50,.15);
}


    .passive-footer > div {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 12px 18px;
        color: #fff;
        border-right: 1px solid rgba(255,255,255,.10);
    }


        .passive-footer > div:last-child {
            border-right: 0;
        }


    .passive-footer i {
        color: #e7bf4f;
        font-size: 25px;
    }


    .passive-footer span {
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }


    .passive-footer small {
        display: block;
        margin-top: 3px;
        color: rgba(255,255,255,.66);
        font-size: 9px;
        font-weight: 400;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px) {

    .passive-plan-header {
        grid-template-columns: 210px 1fr;
    }

    .passive-travel-mark {
        display: none;
    }

    .passive-main {
        grid-template-columns: 155px minmax(0,1fr);
    }

    .passive-visual {
        grid-column: 1 / -1;
        grid-template-columns: repeat(5,1fr);
    }
}


@media(max-width:850px) {

    .passive-plan-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .passive-brand {
        justify-content: center;
    }

    .passive-main-title {
        font-size: 31px;
    }

    .passive-main {
        grid-template-columns: 1fr;
    }

    .passive-benefits {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }

    .passive-benefit {
        border-bottom: 0;
    }

    .passive-visual {
        grid-column: auto;
        grid-template-columns: repeat(3,1fr);
    }
}


@media(max-width:650px) {

    .passive-plan-page {
        padding: 35px 12px 45px;
    }

    .passive-plan-header {
        padding: 20px 15px;
    }

    .passive-main-title {
        font-size: 26px;
    }

    .passive-title-area h1 {
        font-size: 20px;
    }

    .passive-tagline {
        min-height: auto;
        padding: 10px 13px;
        flex-wrap: wrap;
        font-size: 8px;
    }

    .passive-benefits {
        grid-template-columns: repeat(2,1fr);
    }

    .passive-visual {
        grid-template-columns: repeat(2,1fr);
    }

    .passive-footer {
        grid-template-columns: 1fr;
    }

        .passive-footer > div {
            justify-content: flex-start;
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,.10);
        }

            .passive-footer > div:last-child {
                border-bottom: 0;
            }
}