/* =========================================================
   PRICING PAGE
   PHASE 01 — HERO
   CLEAN / FINAL VERSION
   ========================================================= */


/* =========================================================
   HERO SECTION
   ========================================================= */

.pricing-hero {
    position: relative;

    width: 100%;

    min-height: 590px;

    padding: 76px 0 58px;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbf9 0%,
            #ffffff 55%,
            #f4f9f6 100%
        );

    color: #18251f;
}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
   ========================================================= */

.pricing-hero::before,
.pricing-hero::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(
        44,
        141,
        74,
        .06
    );

    border-radius: 50%;

    pointer-events: none;
}


.pricing-hero::before {
    top: -180px;

    right: -160px;

    width: 420px;

    height: 420px;
}


.pricing-hero::after {
    bottom: -220px;

    left: -180px;

    width: 440px;

    height: 440px;

    border-color: rgba(
        44,
        141,
        74,
        .05
    );
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.pricing-hero-container {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .92fr);

    align-items: center;

    gap: 64px;

    width:
        min(
            1100px,
            calc(100% - 48px)
        );

    min-height: 450px;

    margin-left: auto;

    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.pricing-hero-content {
    width: 100%;

    max-width: 620px;

    min-width: 0;

    align-self: center;

    justify-self: start;

    box-sizing: border-box;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.pricing-hero-eyebrow {
    margin: 0 0 12px;

    color: #2c8d4a;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: .17em;
}


/* =========================================================
   TITLE
   ========================================================= */

.pricing-hero-title {
    max-width: 610px;

    margin: 0;

    color: #18251f;

    font-size:
        clamp(
            38px,
            4.3vw,
            58px
        );

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.045em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.pricing-hero-description {
    max-width: 535px;

    margin: 19px 0 0;

    color: #68766e;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.pricing-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;

    margin-top: 27px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.pricing-hero-primary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 21px;

    box-sizing: border-box;

    border-radius: 7px;

    background: #247c43;

    color: #ffffff;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .045em;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(
            36,
            124,
            67,
            .15
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.pricing-hero-primary-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(
            36,
            124,
            67,
            .20
        );
}


.pricing-hero-primary-button:focus-visible {
    outline:
        2px solid #247c43;

    outline-offset: 4px;

    border-radius: 8px;
}


/* =========================================================
   PRIMARY ICON
   ========================================================= */

.pricing-hero-button-icon {
    display: block;

    width: 17px;

    height: 17px;

    flex: 0 0 auto;

    transition:
        transform .2s ease;
}


.pricing-hero-primary-button:hover
.pricing-hero-button-icon {
    transform: translateX(3px);
}

/* =========================================================
   REASSURANCE
   ========================================================= */

.pricing-hero-reassurance {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;

    color: #4D4D4D;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 600;
}


.pricing-hero-reassurance i {
    display: block;

    width: 3px;

    height: 3px;

    flex: 0 0 3px;

    border-radius: 50%;

    background: #a5b0a9;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.pricing-hero-visual {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 450px;

    min-width: 0;

    margin-left: auto;

    margin-right: auto;

    align-self: center;

    justify-self: center;

    box-sizing: border-box;
}


/* =========================================================
   PRICING DECISION MAP
   ========================================================= */

.pricing-decision-map {
    position: relative;

    width:
        min(
            100%,
            450px
        );

    padding: 12px 10px 8px;

    box-sizing: border-box;

    color: #203027;
}


/* =========================================================
   MAP HEADING
   ========================================================= */

.pricing-decision-heading {
    text-align: center;
}


.pricing-decision-eyebrow {
    display: block;

    margin: 0 0 7px;

    color: #7f9186;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .16em;
}


.pricing-decision-title {
    margin: 0;

    color: #1e3026;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.025em;
}


/* =========================================================
   START CONNECTOR
   ========================================================= */

.pricing-decision-start {
    display: flex;

    flex-direction: column;

    align-items: center;

    height: 54px;
}


.pricing-decision-node {
    display: block;

    width: 10px;

    height: 10px;

    flex: 0 0 10px;

    border:
        2px solid #4a9660;

    border-radius: 50%;

    box-sizing: border-box;

    background: #ffffff;

    box-shadow:
        0 0 0 5px rgba(
            74,
            150,
            96,
            .07
        );
}


.pricing-decision-line {
    display: block;

    width: 1px;

    flex: 1;

    min-height: 30px;

    background:
        linear-gradient(
            to bottom,
            #d5e2da,
            #8bb89a
        );
}


/* =========================================================
   PLAN CHOICES
   ========================================================= */

.pricing-decision-choices {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 30px;
}


/* Horizontal connector */

.pricing-decision-choices::before {
    content: "";

    position: absolute;

    top: 0;

    left: 25%;

    right: 25%;

    height: 1px;

    background: #d5e2da;
}


/* =========================================================
   INDIVIDUAL CHOICE
   ========================================================= */

.pricing-decision-choice {
    position: relative;

    min-width: 0;

    padding-top: 22px;

    text-align: center;
}


/* Vertical connector */

.pricing-decision-choice::before {
    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 1px;

    height: 22px;

    background: #d5e2da;

    transform:
        translateX(-50%);
}


/* Choice node */

.pricing-decision-choice-node {
    position: absolute;

    top: 17px;

    left: 50%;

    width: 9px;

    height: 9px;

    border:
        2px solid #4a9660;

    border-radius: 50%;

    box-sizing: border-box;

    background: #ffffff;

    transform:
        translate(
            -50%,
            -50%
        );

    box-shadow:
        0 0 0 4px rgba(
            74,
            150,
            96,
            .06
        );
}


/* =========================================================
   CHOICE CONTENT
   ========================================================= */

.pricing-decision-choice-content {
    position: relative;

    min-height: 125px;

    margin-top: 13px;

    padding: 22px 17px 19px;

    box-sizing: border-box;

    border-bottom:
        1px solid #dce8df;

    background:
        linear-gradient(
            to bottom,
            rgba(
                247,
                251,
                248,
                .9
            ),
            rgba(
                255,
                255,
                255,
                0
            )
        );
}


/* =========================================================
   CHOICE NUMBER
   ========================================================= */

.pricing-decision-choice-number {
    display: block;

    margin-bottom: 9px;

    color: #9aa9a0;

    font-size: 7px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .08em;
}


/* =========================================================
   CHOICE TITLE
   ========================================================= */

.pricing-decision-choice-content h3 {
    margin: 0;

    color: #274132;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 800;

    letter-spacing: .035em;
}


/* =========================================================
   CHOICE DESCRIPTION
   ========================================================= */

.pricing-decision-choice-content p {
    max-width: 145px;

    margin: 7px auto 0;

    color: #7b8981;

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================================
   UNLIMITED BADGE
   ========================================================= */

.pricing-decision-unlimited {
    display: inline-block;

    margin-top: 10px;

    padding: 5px 8px;

    border-radius: 4px;

    background: #e8f4eb;

    color: #287b44;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .08em;
}


/* =========================================================
   BOTTOM CONNECTOR
   ========================================================= */

.pricing-decision-end {
    display: flex;

    flex-direction: column;

    align-items: center;

    height: 49px;
}


.pricing-decision-end-line {
    display: block;

    width: 1px;

    height: 36px;

    background:
        linear-gradient(
            to bottom,
            #d5e2da,
            #8bb89a
        );
}


/* =========================================================
   CONCLUSION
   ========================================================= */

.pricing-decision-conclusion {
    text-align: center;
}


.pricing-decision-conclusion-label {
    display: block;

    margin-bottom: 5px;

    color: #2d8149;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .14em;
}


.pricing-decision-conclusion p {
    margin: 0;

    color: #53645a;

    font-size: 10px;

    line-height: 1.45;

    font-weight: 600;
}


/* =========================================================
   TABLET
   601px — 1000px
   ========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    /*
       IMPORTANT:
       Tablet intentionally uses the same vertical
       architecture as mobile.

       This removes the conflicting tablet grid rules
       that existed in the previous stylesheet.
    */

    .pricing-hero {
        min-height: auto;

        padding: 70px 0 58px;
    }


    .pricing-hero-container {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 45px;

        width:
            calc(
                100% - 64px
            );

        max-width: 760px;

        min-height: 0;

        margin-left: auto;

        margin-right: auto;
    }


    .pricing-hero-content {
        width: 100%;

        max-width: 620px;

        min-width: 0;

        margin: 0 auto;

        padding: 0;

        align-self: center;

        text-align: center;

        box-sizing: border-box;
    }


    .pricing-hero-eyebrow {
        margin-bottom: 10px;

        font-size: 9px;
    }


    .pricing-hero-title {
        width: 100%;

        max-width: 620px;

        margin-left: auto;

        margin-right: auto;

        font-size:
            clamp(
                38px,
                5vw,
                48px
            );
    }


    .pricing-hero-description {
        max-width: 560px;

        margin-left: auto;

        margin-right: auto;

        font-size: 12px;

        line-height: 1.65;
    }


    .pricing-hero-actions {
        justify-content: center;

        width: 100%;

        margin-top: 24px;

        gap: 14px;
    }


    .pricing-hero-reassurance {
        justify-content: center;

        max-width: 560px;

        margin-left: auto;

        margin-right: auto;
    }



    .pricing-hero-visual {
        display: flex;

        width: 100%;

        max-width: 450px;

        min-width: 0;

        margin-left: auto;

        margin-right: auto;

        align-self: center;

        justify-self: center;
    }


    .pricing-decision-map {
        width: 100%;

        max-width: 420px;

        margin-left: auto;

        margin-right: auto;
    }


    .pricing-decision-title {
        font-size: 22px;
    }


    .pricing-decision-choices {
        gap: 28px;
    }


    .pricing-decision-choice-content {
        padding-left: 14px;

        padding-right: 14px;
    }


    .pricing-decision-choice-content p {
        max-width: 140px;
    }

}


/* =========================================================
   MOBILE
   0px — 600px
   ========================================================= */

@media (max-width: 600px) {

    .pricing-hero {
        min-height: auto;

        padding: 57px 0 61px;
    }


    .pricing-hero-container {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 34px;

        width:
            calc(
                100% - 32px
            );

        min-height: 0;

        margin-left: auto;

        margin-right: auto;
    }


    .pricing-hero-content {
        width: 100%;

        max-width: 560px;

        margin: 0 auto;

        text-align: center;

        box-sizing: border-box;
    }


    .pricing-hero-eyebrow {
        margin-bottom: 10px;

        font-size: 8.5px;

        letter-spacing: .14em;
    }


    .pricing-hero-title {
        width: 100%;

        max-width: 480px;

        margin-left: auto;

        margin-right: auto;

        font-size:
            clamp(
                29px,
                8vw,
                38px
            );

        line-height: 1.13;

        letter-spacing: -.035em;
    }


    .pricing-hero-description {
        max-width: 450px;

        margin: 13px auto 0;

        font-size: 10px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       ACTIONS
       ----------------------------------------------------- */

    .pricing-hero-actions {
        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 9px;

        margin-top: 22px;
    }


    .pricing-hero-primary-button {
        width:
            min(
                100%,
                280px
            );

        min-height: 45px;

        padding: 0 17px;

        font-size: 8.5px;
    }


    /* -----------------------------------------------------
       REASSURANCE
       ----------------------------------------------------- */

    .pricing-hero-reassurance {
        justify-content: center;

        gap: 6px;

        margin-top: 19px;

        font-size: 9px;

        line-height: 1.5;
    }


    .pricing-hero-reassurance i {
        width: 3.5px;

        height: 3.5px;

        flex-basis: 3.5px;
    }


    /* -----------------------------------------------------
       VISUAL
       ----------------------------------------------------- */

    .pricing-hero-visual {
        display: flex;

        width: 100%;

        max-width: 430px;

        min-width: 0;

        margin-left: auto;

        margin-right: auto;

        align-self: center;

        justify-self: center;
    }

    /* -----------------------------------------------------
       DECISION MAP
       ----------------------------------------------------- */

    .pricing-decision-map {
        width: 100%;

        max-width: 410px;

        padding: 4px 5px 3px;

        margin-left: auto;

        margin-right: auto;
    }


    .pricing-decision-eyebrow {
        font-size: 9.5px;

        letter-spacing: .14em;
    }


    .pricing-decision-title {
        font-size: 20px;
    }


    .pricing-decision-start {
        height: 43px;
    }


    .pricing-decision-line {
        min-height: 25px;
    }


    .pricing-decision-choices {
        gap: 17px;
    }


    .pricing-decision-choices::before {
        left: 25%;

        right: 25%;
    }


    .pricing-decision-choice {
        padding-top: 20px;
    }


    .pricing-decision-choice::before {
        height: 20px;
    }


    .pricing-decision-choice-node {
        top: 15px;

        width: 9px;

        height: 9px;
    }


    .pricing-decision-choice-content {
        min-height: 112px;

        margin-top: 11px;

        padding: 18px 9px 15px;
    }


    .pricing-decision-choice-number {
        margin-bottom: 7px;

        font-size: 6.5px;
    }


    .pricing-decision-choice-content h3 {
        font-size: 12px;
    }


    .pricing-decision-choice-content p {
        max-width: 130px;

        margin-top: 6px;

        font-size: 9.2px;
    }


    .pricing-decision-unlimited {
        margin-top: 8px;

        padding: 4px 6px;

        font-size: 7.5px;
    }


    .pricing-decision-end {
        height: 42px;
    }


    .pricing-decision-end-line {
        height: 29px;
    }


    .pricing-decision-conclusion-label {
        font-size: 12px;
    }


    .pricing-decision-conclusion p {
        font-size: 9.5px;
    }

}


/* =========================================================
   SMALL MOBILE
   381px AND BELOW
   ========================================================= */

@media (max-width: 380px) {

    .pricing-hero {
        padding-top: 50px;

        padding-bottom: 54px;
    }


    .pricing-hero-container {
        width:
            calc(
                100% - 28px
            );

        gap: 29px;
    }


    .pricing-hero-title {
        font-size: 27px;
    }


    .pricing-hero-description {
        font-size: 9px;
    }


    .pricing-hero-primary-button {
        width:
            min(
                100%,
                270px
            );
    }


    .pricing-hero-reassurance {
        font-size: 8.7px;
    }

    .pricing-decision-map {
        max-width: 360px;
    }


    .pricing-decision-title {
        font-size: 19px;
    }


    .pricing-decision-choices {
        gap: 11px;
    }


    .pricing-decision-choice-content {
        min-height: 108px;

        padding-left: 7px;

        padding-right: 7px;
    }


    .pricing-decision-choice-content h3 {
        font-size: 10px;
    }


    .pricing-decision-choice-content p {
        font-size: 8.8px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   320px AND BELOW
   ========================================================= */

@media (max-width: 320px) {

    .pricing-hero-container {
        width:
            calc(
                100% - 24px
            );
    }


    .pricing-hero-title {
        font-size: 25px;
    }


    .pricing-hero-description {
        font-size: 8.5px;
    }


    .pricing-hero-reassurance {
        font-size: 8.2px;
    }


    .pricing-decision-map {
        max-width: 310px;
    }


    .pricing-decision-choices {
        gap: 7px;
    }


    .pricing-decision-choice-content {
        padding-left: 5px;

        padding-right: 5px;
    }


    .pricing-decision-choice-content h3 {
        font-size: 9.5px;
    }


    .pricing-decision-choice-content p {
        font-size: 8.4px;
    }


    .pricing-decision-unlimited {
        display: inline;
    }

}

/* =========================================================
   PHASE 02 — BROKERAGE PLANS DETAILS
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.pricing-plans-section {
    width: 100%;
    padding: 92px 0 96px;
    box-sizing: border-box;
    overflow: hidden;
}


.pricing-plans-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.pricing-plans-intro {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}


.pricing-plans-eyebrow {
    display: inline-block;
    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.3;

    color: #6f7782;
}


.pricing-plans-title {
    margin: 0;

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;

    color: #171b21;
}


.pricing-plans-description {
    max-width: 680px;
    margin: 18px auto 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;

    color: #68717d;
}


/* =========================================================
   PLANS GRID
   ========================================================= */

.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;

    width: 100%;
}


/* =========================================================
   COMMON PLAN CARD
   ========================================================= */

.pricing-plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    box-sizing: border-box;

    padding: 38px 38px 34px;

    border: 1px solid #dfe3e8;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 12px 32px rgba(20, 28, 38, 0.055);
}


/* =========================================================
   STANDARD PLAN
   ========================================================= */

.pricing-plan-standard {
    border-top: 3px solid #315f9d;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 48%
        );

    box-shadow:
        0 16px 38px rgba(32, 63, 102, 0.09);
}


/* =========================================================
   ADVANCED PLAN
   ========================================================= */

.pricing-plan-advanced {
    border-top: 3px solid #263746;

    background:
        linear-gradient(
            180deg,
            #f7f9fa 0%,
            #ffffff 48%
        );
}


/* =========================================================
   MOST POPULAR BADGE
   ========================================================= */

.pricing-plan-badge {
    position: absolute;
    top: -1px;
    right: 28px;

    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 0 13px;

    border-radius: 0 0 7px 7px;

    background: #315f9d;
    color: #ffffff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
}


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

.pricing-plan-header {
    padding-right: 90px;
}


.pricing-plan-label {
    display: block;
    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.35;

    color: #315f9d;
}


.pricing-plan-advanced .pricing-plan-label {
    color: #344454;
}


.pricing-plan-type {
    display: block;
    margin-bottom: 11px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;

    color: #8a929c;
}


.pricing-plan-title {
    margin: 0;

    font-size: clamp(25px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;

    color: #171b21;
}


.pricing-plan-tagline {
    max-width: 500px;
    margin: 12px 0 0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;

    color: #69727d;
}


/* =========================================================
   STANDARD RATES
   ========================================================= */

.pricing-standard-rates {
    display: flex;
    flex-direction: column;

    margin-top: 32px;

    border-top: 1px solid #e1e6eb;
}


.pricing-standard-rate {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 22px;
    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid #e5e9ed;
}


.pricing-rate-number {
    font-size: clamp(25px, 2.7vw, 34px);
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.025em;

    color: #28588f;
}


.pricing-rate-number-rupee {
    white-space: nowrap;
}


.pricing-rate-number-rupee span {
    display: inline-block;

    margin-right: 2px;

    font-size: 0.55em;
    font-weight: 600;

    vertical-align: baseline;
}


.pricing-rate-content {
    min-width: 0;
}


.pricing-rate-content h4 {
    margin: 0;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;

    color: #222a32;
}


.pricing-rate-content p {
    margin: 4px 0 0;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;

    color: #69737e;
}


.pricing-rate-content span {
    display: block;
    margin-top: 5px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;

    color: #87909b;
}


/* =========================================================
   STANDARD / ADVANCED AUDIENCE
   ========================================================= */

.pricing-plan-audience {
    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #e5e9ed;
}


.pricing-plan-audience strong {
    display: inline-block;

    margin-right: 4px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;

    color: #3c4651;
}


.pricing-plan-audience p {
    display: inline;

    margin: 0;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;

    color: #747d87;
}


/* =========================================================
   PLAN ACTION
   ========================================================= */

.pricing-plan-action {
    margin-top: auto;
    padding-top: 30px;
}


.pricing-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 46px;
    padding: 0 22px;

    box-sizing: border-box;

    border-radius: 7px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.pricing-plan-button span {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}


.pricing-plan-button-standard {
    border: 1px solid #315f9d;

    background: #315f9d;
    color: #ffffff;
}


.pricing-plan-button-standard:hover {
    background: #274f85;
    border-color: #274f85;
    transform: translateY(-1px);
}


.pricing-plan-button-advanced {
    border: 1px solid #263746;

    background: #263746;
    color: #ffffff;
}


.pricing-plan-button-advanced:hover {
    background: #1d2b37;
    border-color: #1d2b37;
    transform: translateY(-1px);
}


/* =========================================================
   ADVANCED PRICE
   ========================================================= */

.pricing-advanced-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 34px;
}


.pricing-advanced-price-main {
    display: inline-flex;
    align-items: baseline;
}


.pricing-advanced-currency {
    margin-right: 3px;

    font-size: 23px;
    font-weight: 600;
    line-height: 1;

    color: #344b5e;
}


.pricing-advanced-number {
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;

    color: #253d4f;
}


.pricing-advanced-period {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;

    color: #687581;
}


.pricing-advanced-gst {
    display: block;
    margin-top: 9px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;

    color: #858e97;
}


/* =========================================================
   UNLIMITED BENEFIT
   ========================================================= */

.pricing-unlimited-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 30px;
    padding: 17px 18px;

    border: 1px solid #dfe5e9;
    border-radius: 9px;

    background: #f9fafb;
}


.pricing-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #344b5e;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}


.pricing-unlimited-benefit strong {
    display: block;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    color: #27333e;
}


.pricing-unlimited-benefit p {
    margin: 4px 0 0;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;

    color: #77818b;
}


/* =========================================================
   ADVANCED COVERAGE
   ========================================================= */

.pricing-advanced-coverage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    margin-top: 26px;
}


.pricing-coverage-group {
    min-width: 0;
}


.pricing-coverage-label {
    display: block;
    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;

    color: #687582;
}


.pricing-coverage-group p {
    margin: 0;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.75;

    color: #394550;
}


.pricing-coverage-group p span {
    margin: 0 3px;

    color: #a0a8af;
}


/* =========================================================
   PRICING DISCLOSURE
   ========================================================= */

.pricing-plans-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    width: min(920px, 100%);
    margin: 34px auto 0;
    padding: 17px 20px;

    box-sizing: border-box;

    border: 1px solid #e3e6e9;
    border-radius: 9px;

    background: #fafbfc;
}


.pricing-disclosure-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    border: 1px solid #9aa2aa;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    color: #68727c;
}


.pricing-disclosure-content {
    min-width: 0;
}


.pricing-disclosure-content strong {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    color: #414a54;
}


.pricing-disclosure-content p {
    margin: 0;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.65;

    color: #7a838d;
}


/* =========================================================
   BROKERAGE CALCULATOR
   ========================================================= */

.pricing-calculator-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    row-gap: 5px;

    margin-top: 34px;

    text-align: center;
}


.pricing-calculator-prompt p {
    margin: 0;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    color: #68727c;
}


.pricing-calculator-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;

    color: #315f9d;

    transition: color 180ms ease;
}


.pricing-calculator-link span {
    font-size: 16px;
    font-weight: 400;
}


.pricing-calculator-link:hover {
    color: #244d7e;
}


.pricing-calculator-support {
    flex-basis: 100%;

    margin-top: 1px;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;

    color: #9299a1;
}


/* =========================================================
   TABLET
   601px — 1000px
   ========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .pricing-plans-section {
        padding: 76px 0 82px;
    }


    .pricing-plans-container {
        width: calc(100% - 48px);
        max-width: 820px;
    }


    .pricing-plans-intro {
        max-width: 680px;
        margin-bottom: 42px;
    }


    .pricing-plans-title {
        font-size: clamp(30px, 4.5vw, 42px);
    }


    .pricing-plans-description {
        font-size: 14px;
    }


    .pricing-plans-grid {
        gap: 18px;
    }


    .pricing-plan-card {
        padding: 32px 28px 30px;
    }


    .pricing-plan-header {
        padding-right: 60px;
    }


    .pricing-plan-title {
        font-size: 26px;
    }


    .pricing-plan-tagline {
        font-size: 13px;
    }


    .pricing-standard-rate {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 15px;
        padding: 20px 0;
    }


    .pricing-rate-number {
        font-size: 27px;
    }


    .pricing-rate-content h4 {
        font-size: 13px;
    }


    .pricing-rate-content p {
        font-size: 11px;
    }


    .pricing-rate-content span {
        font-size: 10px;
    }


    .pricing-advanced-number {
        font-size: 42px;
    }


    .pricing-advanced-currency {
        font-size: 20px;
    }


    .pricing-advanced-coverage {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .pricing-plan-audience p {
        font-size: 11px;
    }

}


/* =========================================================
   MOBILE
   600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

    .pricing-plans-section {
        padding: 64px 0 70px;
    }


    .pricing-plans-container {
        width: calc(100% - 30px);
    }


    .pricing-plans-intro {
        margin-bottom: 34px;
    }


    .pricing-plans-eyebrow {
        margin-bottom: 10px;
        font-size: 10px;
    }


    .pricing-plans-title {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.13;
    }


    .pricing-plans-description {
        margin-top: 14px;

        font-size: 13px;
        line-height: 1.65;
    }


    .pricing-plans-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    .pricing-plan-card {
        padding: 30px 22px 27px;
        border-radius: 15px;
    }


    .pricing-plan-badge {
        right: 20px;
        min-height: 26px;
        padding: 0 10px;

        font-size: 8px;
    }


    .pricing-plan-header {
        padding-right: 70px;
    }


    .pricing-plan-label {
        font-size: 10px;
    }


    .pricing-plan-type {
        font-size: 9px;
    }


    .pricing-plan-title {
        font-size: 24px;
    }


    .pricing-plan-tagline {
        font-size: 13px;
        line-height: 1.6;
    }


    /* ---------------------------------------------
       STANDARD RATES
       --------------------------------------------- */

    .pricing-standard-rates {
        margin-top: 27px;
    }


    .pricing-standard-rate {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 14px;

        padding: 21px 0;
    }


    .pricing-rate-number {
        font-size: 27px;
    }


    .pricing-rate-content h4 {
        font-size: 13px;
    }


    .pricing-rate-content p {
        margin-top: 4px;

        font-size: 11px;
        line-height: 1.5;
    }


    .pricing-rate-content span {
        margin-top: 5px;

        font-size: 10px;
    }


    /* ---------------------------------------------
       ADVANCED PRICE
       --------------------------------------------- */

    .pricing-advanced-price {
        margin-top: 29px;
    }


    .pricing-advanced-number {
        font-size: clamp(38px, 12vw, 48px);
    }


    .pricing-advanced-currency {
        font-size: 20px;
    }


    .pricing-advanced-period {
        font-size: 10px;
    }


    .pricing-unlimited-benefit {
        margin-top: 26px;
        padding: 15px;
    }


    .pricing-unlimited-benefit strong {
        font-size: 12px;
    }


    .pricing-unlimited-benefit p {
        font-size: 10px;
    }


    /* ---------------------------------------------
       COVERAGE
       --------------------------------------------- */

    .pricing-advanced-coverage {
        grid-template-columns: 1fr;
        gap: 16px;

        margin-top: 23px;
    }


    .pricing-coverage-label {
        margin-bottom: 5px;
        font-size: 8px;
    }


    .pricing-coverage-group p {
        font-size: 11px;
        line-height: 1.7;
    }


    /* ---------------------------------------------
       AUDIENCE
       --------------------------------------------- */

    .pricing-plan-audience {
        margin-top: 22px;
        padding-top: 18px;
    }


    .pricing-plan-audience strong {
        font-size: 10px;
    }


    .pricing-plan-audience p {
        font-size: 11px;
        line-height: 1.65;
    }


    /* ---------------------------------------------
       CTA
       --------------------------------------------- */

    .pricing-plan-action {
        padding-top: 25px;
    }


    .pricing-plan-button {
        width: 100%;
        min-height: 46px;

        font-size: 9px;
    }


    /* ---------------------------------------------
       DISCLOSURE
       --------------------------------------------- */

    .pricing-plans-disclosure {
        margin-top: 24px;
        padding: 15px;

        gap: 10px;
    }


    .pricing-disclosure-content strong {
        font-size: 10px;
    }


    .pricing-disclosure-content p {
        font-size: 10px;
        line-height: 1.65;
    }


    /* ---------------------------------------------
       CALCULATOR
       --------------------------------------------- */

    .pricing-calculator-prompt {
        flex-direction: column;
        gap: 7px;

        margin-top: 27px;
    }


    .pricing-calculator-prompt p {
        font-size: 11px;
    }


    .pricing-calculator-link {
        font-size: 9px;
    }


    .pricing-calculator-support {
        font-size: 9px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   380px AND BELOW
   ========================================================= */

@media (max-width: 380px) {

    .pricing-plans-container {
        width: calc(100% - 24px);
    }


    .pricing-plan-card {
        padding-left: 18px;
        padding-right: 18px;
    }


    .pricing-plan-header {
        padding-right: 58px;
    }


    .pricing-standard-rate {
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 11px;
    }


    .pricing-rate-number {
        font-size: 24px;
    }


    .pricing-rate-content h4 {
        font-size: 12px;
    }


    .pricing-rate-content p {
        font-size: 10px;
    }


    .pricing-rate-content span {
        font-size: 9px;
    }


    .pricing-advanced-number {
        font-size: 36px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pricing-plan-button,
    .pricing-calculator-link {
        transition: none;
    }

}

/* =========================================================
   PHASE 02
   QUICK COMPARISON FEATURE MATRIX
   CLEAN MERGED VERSION
   Mobile First
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.pricing-comparison {
    width: 100%;

    padding:
        64px 0 70px;

    box-sizing: border-box;

    -webkit-text-size-adjust: 100%;
}


.pricing-comparison-container {
    width:
        calc(100% - 30px);

    max-width:
        1120px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   02. SECTION INTRO
   ========================================================= */

.pricing-comparison-intro {
    width: 100%;

    max-width:
        720px;

    margin:
        0 auto 30px;

    text-align: center;
}


.pricing-comparison-eyebrow {
    display: block;

    margin:
        0 0 9px;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    opacity: 0.72;
}


.pricing-comparison-title {
    margin: 0;

    font-size:
        clamp(
            28px,
            5vw,
            44px
        );

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -0.025em;
}


.pricing-comparison-description {
    max-width:
        620px;

    margin:
        12px auto 0;

    font-size: 14px;

    line-height: 1.6;

    opacity: 0.70;
}


/* =========================================================
   03. COMPARISON SURFACE
   ========================================================= */

.pricing-comparison-surface {
    width: 100%;

    overflow: hidden;

    border:
        1px solid rgba(
            15,
            23,
            42,
            0.10
        );

    border-radius: 15px;

    background:
        #ffffff;

    box-sizing: border-box;

    box-shadow:
        0 12px 34px rgba(
            15,
            23,
            42,
            0.045
        );
}


/* =========================================================
   04. TABLE HEADER
   MOBILE
   ========================================================= */

.pricing-comparison-table-header {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    width: 100%;

    min-height:
        66px;

    box-sizing: border-box;

    background:
        #f7f9fb;

    border-bottom:
        1px solid rgba(
            15,
            23,
            42,
            0.09
        );
}


/* Feature heading is intentionally
   hidden on mobile. */

.pricing-comparison-feature-heading {
    display: none;
}


/* =========================================================
   05. PLAN HEADING
   ========================================================= */

.pricing-comparison-plan-heading {
    min-width: 0;

    height: 100%;

    padding:
        13px 10px;

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

    box-sizing: border-box;
}


.pricing-comparison-plan-heading strong {
    display: block;

    margin: 0;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing:
        0.015em;
}


.pricing-comparison-plan-heading span {
    display: block;

    margin:
        4px 0 0;

    font-size: 8px;

    line-height: 1.3;

    font-weight: 650;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    opacity: 0.58;
}


/* Standard / Advanced separation */

.pricing-comparison-standard-heading {
    border-right:
        1px solid rgba(
            15,
            23,
            42,
            0.08
        );
}


/*
 * Very light Advanced heading tint.
 * Kept intentionally subtle.
 */

.pricing-comparison-advanced-heading {
    background:
        rgba(
            15,
            118,
            110,
            0.035
        );
}


/* =========================================================
   06. COMPARISON ROW
   MOBILE
   ========================================================= */

.pricing-comparison-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    width: 100%;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(
            15,
            23,
            42,
            0.075
        );

    transition:
        background-color 160ms ease;
}


.pricing-comparison-row:last-child {
    border-bottom: 0;
}


/* =========================================================
   07. FEATURE
   ========================================================= */

.pricing-comparison-feature {
    grid-column:
        1 / -1;

    width: 100%;

    padding:
        15px 15px 10px;

    box-sizing: border-box;
}


.pricing-comparison-feature strong {
    display: block;

    margin: 0;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing:
        -0.005em;
}


.pricing-comparison-feature > span {
    display: block;

    margin:
        3px 0 0;

    font-size: 10px;

    line-height: 1.35;

    opacity: 0.58;
}


/* =========================================================
   08. VALUE CELLS
   ========================================================= */

.pricing-comparison-value {
    min-width: 0;

    padding:
        12px 14px 15px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;
}


/* Standard / Advanced divider */

.pricing-comparison-standard-value {
    border-right:
        1px solid rgba(
            15,
            23,
            42,
            0.075
        );
}


/*
 * Mobile:
 * no boxed Advanced column.
 */

.pricing-comparison-advanced-value {
    background:
        transparent;
}


/* =========================================================
   10. VALUE TYPOGRAPHY
   ========================================================= */

.pricing-comparison-value > strong {
    display: block;

    margin: 0;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing:
        -0.008em;
}


.pricing-comparison-secondary {
    display: block;

    margin:
        4px 0 0;

    font-size: 10.5px;

    line-height: 1.4;

    font-weight: 400;

    opacity: 0.62;
}


/* =========================================================
   11. FREE BADGE
   ========================================================= */

.pricing-comparison-free-badge {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    width:
        fit-content;

    max-width: 100%;

    min-height:
        27px;

    padding:
        4px 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(
            22,
            101,
            52,
            0.14
        );

    border-radius:
        5px;

    background:
        rgba(
            22,
            163,
            74,
            0.065
        );

    color:
        #166534;

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        700;

    letter-spacing:
        0.015em;

    white-space:
        nowrap;
}


.pricing-comparison-free-badge > span {
    font-size:
        10px;

    line-height:
        1;
}


/* =========================================================
   12. MINIMUM BROKERAGE
   IMPORTANT
   ========================================================= */

/*
 * Keep the entire minimum-brokerage value
 * inside normal document flow.
 *
 * This prevents the explanatory text from
 * covering/hiding the main brokerage value.
 */

.pricing-comparison-minimum-brokerage {
    position: relative;

    min-width: 0;
}


/*
 * Main value + information icon.
 */

.pricing-comparison-minimum-main {
    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    min-width: 0;
}


/*
 * Main minimum brokerage value.
 */

.pricing-comparison-minimum-value {
    display: inline-block;

    min-width: 0;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;
}

/* =========================================================
   13. IMPORTANT ROW
   ========================================================= */

.pricing-comparison-row-important {
    background:
        rgba(
            248,
            250,
            252,
            0.55
        );
}


/* =========================================================
   14. SECTION NOTE
   ========================================================= */

.pricing-comparison-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    margin:
        14px auto 0;

    padding:
        13px 14px;

    border:
        1px solid rgba(
            15,
            23,
            42,
            0.09
        );

    border-radius:
        9px;

    background:
        #f8fafc;

    box-sizing:
        border-box;
}


.pricing-comparison-note-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    flex:
        0 0 18px;

    margin-top:
        1px;

    border:
        1px solid rgba(
            15,
            23,
            42,
            0.20
        );

    border-radius:
        50%;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        700;
}


.pricing-comparison-note-content {
    min-width:
        0;
}


.pricing-comparison-note-content strong {
    display:
        block;

    margin:
        0 0 3px;

    font-size:
        9px;

    line-height:
        1.3;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.pricing-comparison-note-content p {
    margin:
        0;

    font-size:
        11px;

    line-height:
        1.5;

    opacity:
        0.68;
}


/* =========================================================
   15. TABLET
   601px — 1000px
   ========================================================= */

@media (min-width: 601px) {

    .pricing-comparison {
        padding:
            76px 0 84px;
    }


    .pricing-comparison-container {
        width:
            calc(100% - 56px);

        max-width:
            1040px;
    }


    .pricing-comparison-intro {
        margin-bottom:
            34px;
    }


    .pricing-comparison-description {
        font-size:
            14px;
    }


    /* ---------------------------------------------
       HEADER
       --------------------------------------------- */

    .pricing-comparison-table-header {
        grid-template-columns:
            minmax(205px, 1.20fr)
            minmax(205px, 1fr)
            minmax(205px, 1fr);

        min-height:
            72px;
    }


    .pricing-comparison-feature-heading {
        display:
            flex;

        align-items:
            center;

        padding:
            16px 18px;

        font-size:
            9px;

        line-height:
            1.3;

        font-weight:
            700;

        letter-spacing:
            0.11em;

        text-transform:
            uppercase;

        opacity:
            0.56;
    }


    .pricing-comparison-plan-heading {
        padding:
            15px 14px;
    }


    .pricing-comparison-plan-heading strong {
        font-size:
            13px;
    }


    .pricing-comparison-plan-heading span {
        font-size:
            9px;
    }


    /* ---------------------------------------------
       ROW
       --------------------------------------------- */

    .pricing-comparison-row {
        grid-template-columns:
            minmax(205px, 1.20fr)
            minmax(205px, 1fr)
            minmax(205px, 1fr);

        min-height:
            68px;
    }


    .pricing-comparison-feature {
        grid-column:
            auto;

        padding:
            14px 18px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;
    }


    .pricing-comparison-feature strong {
        font-size:
            13px;
    }


    .pricing-comparison-feature > span {
        font-size:
            10px;
    }


    .pricing-comparison-value {
        padding:
            14px 17px;

        justify-content:
            center;
    }


    .pricing-comparison-value > strong {
        font-size:
            14px;
    }


    .pricing-comparison-secondary {
        font-size:
            10px;
    }

    .pricing-comparison-free-badge {
        font-size:
            11px;
    }


    /* ---------------------------------------------
       MINIMUM BROKERAGE
       --------------------------------------------- */

    .pricing-comparison-minimum-value {
        font-size:
            14px;
    }


    /* ---------------------------------------------
       NOTE
       --------------------------------------------- */

    .pricing-comparison-note {
        margin-top:
            16px;

        padding:
            14px 16px;
    }


    .pricing-comparison-note-content p {
        font-size:
            11px;
    }
}


/* =========================================================
   16. DESKTOP
   1001px+
   ========================================================= */

@media (min-width: 1001px) {

    .pricing-comparison {
        padding:
            88px 0 96px;
    }


    .pricing-comparison-container {
        max-width:
            1120px;
    }


    .pricing-comparison-intro {
        margin-bottom:
            38px;
    }


    .pricing-comparison-title {
        font-size:
            42px;
    }


    .pricing-comparison-description {
        font-size:
            14px;
    }


    /* ---------------------------------------------
       SURFACE
       --------------------------------------------- */

    .pricing-comparison-surface {
        border-radius:
            17px;
    }


    /* ---------------------------------------------
       HEADER
       --------------------------------------------- */

    .pricing-comparison-table-header {
        grid-template-columns:
            minmax(270px, 1.20fr)
            minmax(250px, 1fr)
            minmax(250px, 1fr);

        min-height:
            74px;
    }


    .pricing-comparison-feature-heading {
        padding-left:
            22px;

        padding-right:
            22px;
    }


    .pricing-comparison-plan-heading {
        padding:
            16px 18px;
    }


    .pricing-comparison-plan-heading strong {
        font-size:
            14px;
    }


    .pricing-comparison-plan-heading span {
        font-size:
            9px;
    }


    /* ---------------------------------------------
       ROWS
       --------------------------------------------- */

    .pricing-comparison-row {
        grid-template-columns:
            minmax(270px, 1.20fr)
            minmax(250px, 1fr)
            minmax(250px, 1fr);

        min-height:
            70px;
    }


    .pricing-comparison-feature {
        padding-left:
            22px;

        padding-right:
            22px;
    }


    .pricing-comparison-feature strong {
        font-size:
            14px;
    }


    .pricing-comparison-feature > span {
        font-size:
            10px;
    }


    .pricing-comparison-value {
        padding-left:
            20px;

        padding-right:
            20px;
    }


    .pricing-comparison-value > strong {
        font-size:
            15px;
    }


    .pricing-comparison-secondary {
        font-size:
            10.5px;
    }


    /* ---------------------------------------------
       ADVANCED COLUMN
       --------------------------------------------- */

    .pricing-comparison-advanced-value {
        background:
            rgba(
                15,
                118,
                110,
                0.025
            );
    }


    .pricing-comparison-advanced-heading {
        background:
            rgba(
                15,
                118,
                110,
                0.045
            );
    }


    /* ---------------------------------------------
       HOVER
       --------------------------------------------- */

    .pricing-comparison-row:hover {
        background:
            #f8fafc;
    }


    /*
     * Preserve Advanced differentiation while
     * hovering the row.
     */

    .pricing-comparison-row:hover
    .pricing-comparison-advanced-value {
        background:
            rgba(
                15,
                118,
                110,
                0.045
            );
    }


    /* ---------------------------------------------
       FREE BADGE
       --------------------------------------------- */

    .pricing-comparison-free-badge {
        font-size:
            11px;
    }


    /* ---------------------------------------------
       MINIMUM BROKERAGE
       --------------------------------------------- */

    .pricing-comparison-minimum-value {
        font-size:
            15px;
    }


    /* ---------------------------------------------
       NOTE
       --------------------------------------------- */

    .pricing-comparison-note {
        margin-top:
            16px;
    }


    .pricing-comparison-note-content p {
        font-size:
            11px;
    }
}


/* =========================================================
   17. SMALL MOBILE
   381px — 600px
   ========================================================= */

@media (min-width: 381px) and (max-width: 600px) {

    .pricing-comparison {
        padding:
            58px 0 64px;
    }


    .pricing-comparison-container {
        width:
            calc(100% - 30px);
    }


    .pricing-comparison-intro {
        margin-bottom:
            28px;
    }


    .pricing-comparison-plan-heading {
        padding:
            14px 10px;
    }


    .pricing-comparison-plan-heading strong {
        font-size:
            13px;
    }


    .pricing-comparison-plan-heading span {
        font-size:
            8px;
    }


    .pricing-comparison-feature {
        padding:
            15px 15px 10px;
    }


    .pricing-comparison-feature strong {
        font-size:
            14px;
    }


    .pricing-comparison-value {
        padding:
            12px 14px 14px;
    }


    .pricing-comparison-value > strong {
        font-size:
            15px;
    }


    .pricing-comparison-secondary {
        font-size:
            10.5px;
    }
}


/* =========================================================
   18. VERY SMALL MOBILE
   320px — 380px
   ========================================================= */

@media (max-width: 380px) {

    .pricing-comparison {
        padding:
            52px 0 58px;
    }


    .pricing-comparison-container {
        width:
            calc(100% - 24px);
    }


    .pricing-comparison-surface {
        border-radius:
            13px;
    }


    /* ---------------------------------------------
       HEADER
       --------------------------------------------- */

    .pricing-comparison-table-header {
        min-height:
            64px;
    }


    .pricing-comparison-plan-heading {
        padding:
            12px 7px;
    }


    .pricing-comparison-plan-heading strong {
        font-size:
            12px;
    }


    .pricing-comparison-plan-heading span {
        margin-top:
            3px;

        font-size:
            7.5px;

        letter-spacing:
            0.075em;
    }


    /* ---------------------------------------------
       FEATURE
       --------------------------------------------- */

    .pricing-comparison-feature {
        padding:
            14px 13px 9px;
    }


    .pricing-comparison-feature strong {
        font-size:
            13px;
    }


    .pricing-comparison-feature > span {
        font-size:
            9.5px;
    }


    /* ---------------------------------------------
       VALUES
       --------------------------------------------- */

    .pricing-comparison-value {
        padding:
            11px 12px 13px;
    }

    .pricing-comparison-value > strong {
        font-size:
            14px;
    }


    .pricing-comparison-secondary {
        font-size:
            10px;
    }


    /* ---------------------------------------------
       FREE BADGE
       --------------------------------------------- */

    .pricing-comparison-free-badge {
        min-height:
            26px;

        padding:
            4px 7px;

        font-size:
            10.5px;
    }


    /* ---------------------------------------------
       MINIMUM BROKERAGE
       --------------------------------------------- */

    .pricing-comparison-minimum-main {
        gap:
            5px;
    }


    .pricing-comparison-minimum-value {
        font-size:
            14px;
    }


    /* ---------------------------------------------
       NOTE
       --------------------------------------------- */

    .pricing-comparison-note {
        margin-top:
            12px;

        padding:
            12px 13px;
    }


    .pricing-comparison-note-icon {
        width:
            17px;

        height:
            17px;

        flex-basis:
            17px;

        font-size:
            8px;
    }


    .pricing-comparison-note-content strong {
        font-size:
            8px;
    }


    .pricing-comparison-note-content p {
        font-size:
            10px;
    }
}


/* =========================================================
   19. SAFARI / IOS STABILITY
   ========================================================= */

.pricing-comparison *,
.pricing-comparison *::before,
.pricing-comparison *::after {
    box-sizing:
        border-box;
}


.pricing-comparison img,
.pricing-comparison svg {
    max-width:
        100%;
}


.pricing-comparison table {
    border-collapse:
        collapse;
}


/*
 * Prevent long financial values from forcing
 * unexpected horizontal overflow.
 */

.pricing-comparison-value,
.pricing-comparison-feature,
.pricing-comparison-secondary,
.pricing-comparison-note-content {
    overflow-wrap:
        break-word;

    word-break:
        normal;

    min-width:
        0;
}


/*
 * Prevent iOS Safari from automatically enlarging
 * text inside the comparison component.
 */

.pricing-comparison,
.pricing-comparison input,
.pricing-comparison button {
    -webkit-text-size-adjust:
        100%;
}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pricing-comparison-row {
        transition:
            none;
    }
}


/* =========================================================
   PHASE 03 — OTHER ACCOUNT & SERVICE CHARGES
   Scoped styles: no dependency on global table or button rules.
   ========================================================= */

.other-charges {
    --charges-ink: #18251f;
    --charges-muted: #68766e;
    --charges-line: #dce8df;
    --charges-accent: #247c43;
    padding: 76px 0;
    background: #f8fbf9;
    color: var(--charges-ink);
}

.other-charges__container {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
}

.other-charges__intro { max-width: 620px; }
.other-charges__eyebrow { margin: 0 0 10px; color: var(--charges-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.other-charges__intro h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -.035em; }
.other-charges__intro p:not(.other-charges__eyebrow) { margin: 14px 0 0; color: var(--charges-muted); font-size: 14px; line-height: 1.65; }

.other-charges__tabs { display: flex; gap: 8px; margin-top: 31px; border-bottom: 1px solid var(--charges-line); }
.other-charges__tab { position: relative; min-height: 44px; padding: 0 17px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: #66756c; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.other-charges__tab::after { position: absolute; right: 17px; bottom: -1px; left: 17px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.other-charges__tab:hover { background: #eef5ef; color: #1f5030; }
.other-charges__tab.is-active { background: #e8f4eb; color: #247c43; }
.other-charges__tab.is-active::after { background: currentColor; }
.other-charges__tab:focus-visible { z-index: 1; outline: 2px solid #247c43; outline-offset: 2px; }

.other-charges__panel { margin-top: 18px; padding: 18px; border: 1px solid var(--charges-line); border-radius: 10px; }
.other-charges__panel--equity { --market-bg: #f3f8ff; --market-head: #e4effe; --market-ink: #1e5c9e; background: var(--market-bg); }
.other-charges__panel--currency { --market-bg: #f1faf4; --market-head: #dff2e5; --market-ink: #237242; background: var(--market-bg); }
.other-charges__panel--commodity { --market-bg: #fff9ed; --market-head: #ffefc9; --market-ink: #956408; background: var(--market-bg); }
.other-charges__swipe-hint { display: none; margin: 0 0 10px; color: var(--market-ink); font-size: 11px; font-weight: 700; }
.other-charges__swipe-hint span { margin-right: 4px; font-size: 16px; vertical-align: -1px; }

.other-charges__table-wrap { width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid rgba(24, 37, 31, .10); border-radius: 7px; background: #fff; scrollbar-color: var(--market-ink) #edf1ed; scrollbar-width: thin; }
.other-charges__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 12px; line-height: 1.55; }
.other-charges__table th, .other-charges__table td { padding: 14px 16px; border-right: 1px solid #e6ece7; border-bottom: 1px solid #e6ece7; text-align: left; vertical-align: top; }
.other-charges__table thead th { position: sticky; z-index: 2; top: 0; background: var(--market-head); color: var(--market-ink); font-size: 11px; font-weight: 800; line-height: 1.35; }
.other-charges__table thead th:first-child { left: 0; z-index: 4; }
.other-charges__table tbody th { position: sticky; z-index: 1; left: 0; min-width: 170px; background: #fff; color: #25362c; font-size: 12px; font-weight: 800; }
.other-charges__table td { min-width: 172px; color: #506057; }
.other-charges__table tbody tr:hover td, .other-charges__table tbody tr:hover th { background: #f8faf8; }
.other-charges__table tr:last-child th, .other-charges__table tr:last-child td { border-bottom: 0; }
.other-charges__table th:last-child, .other-charges__table td:last-child { border-right: 0; }

.other-charges__note { margin-top: 18px; padding: 18px 20px; border: 1px solid #dce8df; border-left: 4px solid #4a9660; border-radius: 7px; background: #fff; color: #52645a; font-size: 12px; line-height: 1.6; }
.other-charges__note strong { display: block; margin-bottom: 6px; color: #247c43; font-size: 11px; letter-spacing: .08em; }
.other-charges__note ul { margin: 0; padding-left: 18px; }
.other-charges__note li + li { margin-top: 5px; }

@media (max-width: 700px) {
    .other-charges { padding: 56px 0; }
    .other-charges__container { width: min(100% - 24px, 600px); }
    .other-charges__intro { text-align: center; }
    .other-charges__intro p:not(.other-charges__eyebrow) { font-size: 12px; }
    .other-charges__tabs { gap: 4px; margin-top: 25px; overflow-x: auto; }
    .other-charges__tab { flex: 1 0 auto; min-height: 42px; padding: 0 13px; font-size: 12px; }
    .other-charges__tab::after { right: 13px; left: 13px; }
    .other-charges__panel { margin-top: 14px; padding: 12px; border-radius: 8px; }
    .other-charges__swipe-hint { display: block; }
    .other-charges__table { min-width: 680px; font-size: 11px; }
    .other-charges__table th, .other-charges__table td { padding: 12px; }
    .other-charges__table thead th { font-size: 10px; }
    .other-charges__table tbody th { min-width: 142px; font-size: 11px; }
    .other-charges__table td { min-width: 158px; }
    .other-charges__note { padding: 15px 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) { .other-charges * { scroll-behavior: auto; } }

/* =========================================================
   PHASE 04 — WHY OUR PRICING
   Deliberately card-free: no bordered/filled item containers,
   no icon badges, no shadows, and no decorative panel chrome.
   ========================================================= */

.why-pricing {
    padding: 88px 0;
    background: #f8fbf9;
    color: #18251f;
}

.why-pricing__inner {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
}

.why-pricing__header {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.why-pricing__eyebrow {
    margin: 0 0 12px;
    color: #247c43;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .16em;
}

.why-pricing__header h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 42px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.035em;
}

.why-pricing__intro {
    max-width: 560px;
    margin: 15px auto 0;
    color: #68766e;
    font-size: 14px;
    line-height: 1.65;
}

.why-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 58px;
    margin-top: 52px;
}

.why-pricing__item {
    min-width: 0;
    text-align: center;
}

.why-pricing__icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 17px;
    color: #247c43;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.why-pricing__label {
    margin: 0;
    color: #247c43;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .13em;
}

.why-pricing__item h3 {
    max-width: 245px;
    margin: 8px auto 0;
    color: #1e3026;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.015em;
}

@media (min-width: 601px) and (max-width: 1000px) {
    .why-pricing {
        padding: 72px 0;
    }

    .why-pricing__inner {
        width: min(760px, calc(100% - 64px));
    }

    .why-pricing__grid {
        column-gap: 36px;
        row-gap: 46px;
        margin-top: 42px;
    }
}

@media (max-width: 600px) {
    .why-pricing {
        padding: 56px 0;
    }

    .why-pricing__inner {
        width: calc(100% - 32px);
    }

    .why-pricing__eyebrow {
        margin-bottom: 10px;
        font-size: 8.5px;
        letter-spacing: .14em;
    }

    .why-pricing__header h2 {
        font-size: 28px;
        line-height: 1.15;
    }

    .why-pricing__intro {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.6;
    }

    .why-pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 34px;
        margin-top: 34px;
    }

    .why-pricing__icon {
        width: 36px;
        height: 36px;
        margin-bottom: 13px;
    }

    .why-pricing__label {
        font-size: 8px;
        letter-spacing: .1em;
    }

    .why-pricing__item h3 {
        margin-top: 7px;
        font-size: 15px;
        line-height: 1.35;
    }
}

@media (max-width: 360px) {
    .why-pricing__inner {
        width: calc(100% - 24px);
    }

    .why-pricing__grid {
        column-gap: 14px;
        row-gap: 30px;
    }

    .why-pricing__item h3 {
        font-size: 14px;
    }
}

/* =========================================================
   PHASE 05 — FINAL CONVERSION
   Single CTA card placed before the page footer.
   ========================================================= */

.final-conversion {
    padding: 8px 0 76px;
    background: #f8fbf9;
}

.final-conversion__card {
    position: relative;
    isolation: isolate;
    width: min(860px, calc(100% - 48px));
    margin: 0 auto;
    padding: 52px 48px 42px;
    overflow: hidden;
    border: 1px solid rgba(224, 246, 229, .30);
    border-radius: 16px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 82% 3%, rgba(117, 207, 143, .34), transparent 31%),
        linear-gradient(135deg, #1c6338 0%, #247c43 55%, #1f7040 100%);
    box-shadow:
        0 18px 42px rgba(25, 91, 52, .18),
        0 4px 12px rgba(25, 91, 52, .10);
    color: #ffffff;
    text-align: center;
}

.final-conversion__card::before {
    position: absolute;
    top: -86px;
    left: -92px;
    z-index: -1;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(226, 249, 231, .16);
    border-radius: 50%;
    content: "";
}

.final-conversion__eyebrow {
    margin: 0 0 12px;
    color: #d8f3df;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .16em;
}

.final-conversion__card h2 {
    max-width: 650px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 40px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.035em;
}

.final-conversion__intro {
    max-width: 560px;
    margin: 15px auto 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.65;
}

.final-conversion__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 27px;
    padding: 0 23px;
    border-radius: 7px;
    box-sizing: border-box;
    background: #ffffff;
    color: #1f7040;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .035em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(8, 52, 26, .18);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.final-conversion__cta:hover {
    transform: translateY(-2px);
    background: #f4fff6;
    box-shadow: 0 9px 20px rgba(8, 52, 26, .24);
}

.final-conversion__cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.final-conversion__cta span {
    font-size: 16px;
    line-height: 1;
    transition: transform .2s ease;
}

.final-conversion__cta:hover span {
    transform: translateX(3px);
}

.final-conversion__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 0;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .73);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 600;
}

.final-conversion__trust span {
    display: inline-flex;
    align-items: center;
}

.final-conversion__trust span + span::before {
    width: 3px;
    height: 3px;
    margin: 0 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    content: "";
}

@media (min-width: 601px) and (max-width: 1000px) {
    .final-conversion {
        padding-bottom: 64px;
    }

    .final-conversion__card {
        width: min(760px, calc(100% - 64px));
        padding: 46px 40px 38px;
    }
}

@media (max-width: 600px) {
    .final-conversion {
        padding: 4px 0 56px;
    }

    .final-conversion__card {
        width: calc(100% - 32px);
        padding: 36px 22px 30px;
        border-radius: 13px;
    }

    .final-conversion__eyebrow {
        margin-bottom: 10px;
        font-size: 8.5px;
        letter-spacing: .14em;
    }

    .final-conversion__card h2 {
        font-size: 28px;
        line-height: 1.15;
    }

    .final-conversion__intro {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.6;
    }

    .final-conversion__cta {
        width: 100%;
        min-height: 48px;
        margin-top: 24px;
    }

    .final-conversion__trust {
        margin-top: 18px;
        font-size: 10px;
    }

    .final-conversion__trust span + span::before {
        margin: 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-conversion__cta,
    .final-conversion__cta span {
        transition: none;
    }
}