.referral-page-content .coming-soon {
                        margin-top: 0px;
                    }
                    .referral-public-wrap {
                        margin: 150px auto;
                        display: flex;
                        flex-direction: column;
                    }

                    .referral-public-wrap .ref-top {
                        display: flex;
                        position: relative;
                        justify-content: space-between;
                        gap: 20px;
                        max-width: 935px;
                        margin: auto;
                        width: 100%;
                    }

                    .ref-icons {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        width: calc(28 * var(--icon-base));
                        --icon-base: 10px;
                        margin-bottom: calc(15 * var(--icon-base));
                        margin-top: calc(5 * var(--icon-base));
                    }

                    .ref-icons .center-icon {
                        width: calc(11 * var(--icon-base));
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .ref-icons .center-icon img {
                        width: calc(10 * var(--icon-base));
                        aspect-ratio: 1;
                        -webkit-user-drag: none;
                        user-select: none;
                        pointer-events: none;
                    }
                    
                    .ref-icons .center-icon i {
    /* legacy Toolkit green icon accent -> existing Business Arise blue */
    color: var(--primary-color, #0073FC);
    font-size: calc(5.2 * var(--icon-base));
    line-height: 1;
    text-shadow: 0 0 18px rgba(34, 223, 13, .38);
}

.ref-icons .small-icon i {
    color: #dfffe0;
    font-size: calc(2.4 * var(--icon-base));
    line-height: 1;
    transform: rotate(calc(-1 * var(--icon-rotation)));
    text-shadow: 0 0 14px rgba(34, 223, 13, .32);
}

                    .ref-icons .small-icon img {
                        width: calc(3 * var(--icon-base));
                        aspect-ratio: 1;
                        -webkit-user-drag: none;
                        user-select: none;
                        pointer-events: none;
                    }

                    .ref-icons .small-icon {
                        --icon-step: 1;
                        --icon-rotation: calc(76deg - 30.8deg * var(--icon-step));
                        position: absolute;
                        width: calc(9 * var(--icon-base));
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transform: rotate(var(--icon-rotation)) translateY(calc(15.5 * var(--icon-base)));
                    }

                    .ref-icons .small-icon img {
                        transform: rotate(calc(-1 * var(--icon-rotation)));
                    }


                    .ref-icons .small-icon:nth-child(3) {
                        --icon-step: 2;
                    }

                    .ref-icons .small-icon:nth-child(4) {
                        --icon-step: 3;
                    }

                    .ref-icons .small-icon:nth-child(5) {
                        --icon-step: 4;
                    }

                    .iconbg {
                        --iconbg-scaled: calc(13.5 * var(--icon-base));
                        width: calc(var(--iconbg-scaled) * 1.68);
                        aspect-ratio: 1;
                        position: absolute;
                        /* icon ring: legacy green tint -> Business Arise blue tint */
                        background: rgba(0, 115, 252, .12);
                        border-radius: 50%;
                        z-index: -1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .small-icon .iconbg {
                        --iconbg-scaled: calc(3.7 * var(--icon-base));
                        transform: rotate(calc(-1 * var(--icon-rotation)));
                    }

                    .iconbg:before {
                        content: '';
                        position: absolute;
                        /* icon core: the lower stop was a dark GREEN (#0e290a); now a
                           dark blue so the ring reads as Business Arise. Light mode
                           replaces this fill in tbtk-footer-pages-light.css. */
                        background: linear-gradient(0, #0a1f2b, #000000);
                        display: block;
                        aspect-ratio: 1;
                        width: var(--iconbg-scaled);
                        z-index: -1;
                        border-radius: 50%;
                        box-shadow: 0 max(calc(var(--iconbg-scaled) * 0.05), 1px) max(calc(var(--iconbg-scaled) * 0.08), 3px) #000000;
                    }

                    .iconbg:after {
                        content: '';
                        position: absolute;
                        /* icon ring glow: legacy green tint -> Business Arise blue tint */
                        background: rgba(0, 115, 252, .22);
                        display: block;
                        aspect-ratio: 1;
                        width: calc(var(--iconbg-scaled) * 1.25);
                        z-index: -3;
                        border-radius: 50%;
                        outline: 1px solid #06e89b14;
                        outline-offset: calc(var(--iconbg-scaled) * 0.1);
                    }

                    .center-icon .iconbg {
                        border-bottom: 1px solid #ffffff29;
                    }

                    .ref-promo-text {
                        /* promo callout text + its dashed border (border-color
                           inherits from `color`): legacy green -> Business
                           Arise blue */
                        color: var(--primary-color, #0073FC);
                        border: 2px dashed;
                        line-height: 1;
                        padding: 7px 5px;
                        display: block;
                        margin-right: auto;
                        position: relative;
                        margin-left: 5px;
                        --corner-s1: -3px;
                        --corner-s2: 6px;
                        font-size: 13px;
                    }

                    .ref-text {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        flex-shrink: 0;
                    }

                    .ref-promo-text .corners {
                        position: absolute;
                        left: -5px;
                        top: var(--corner-s1);
                        bottom: var(--corner-s1);
                    }

                    .ref-promo-text .corners:before, .ref-promo-text .corners:after {
                        content: '';
                        aspect-ratio: 1;
                        width: var(--corner-s2);
                        /* decorative corner markers on the promo callout */
                        background: var(--primary-color, #0073FC);
                        display: block;
                        top: var(--corner-s1);
                        position: absolute;
                    }

                    .ref-promo-text .corners:last-child {
                        left: unset;
                        right: 0;
                    }

                    .ref-promo-text .corners:before {
                        top: auto;
                        bottom: var(--corner-s1);
                    }

                    .ref-top h1 {
                        margin-top: 18px;
                        line-height: 1.3;
                        text-align: left;
                        font-size: clamp(24px, 4.2vw, 40px);
                        margin-bottom: 20px;
                        background: -webkit-linear-gradient(-45deg, #90a3ac 25%, #fff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }

                    .net-font {
                        font-family: var(--font-sui);
                        letter-spacing: max(.02em, 1px);
                    }

                    .ref-desc {
                        text-align: left;
                        margin-bottom: 20px;
                    }

                    .ref-btns {
                        display: flex;
                        gap: 10px;
                    }

                    /* The class name is left alone on purpose — it is an
                       internal identifier, not visitor-facing. Only the colour
                       changes: the legacy Toolkit green gradient becomes the
                       existing Business Arise blue. The old dark end (#004d08)
                       put black text at 2.07:1; this pair keeps dark ink above
                       7:1 across the whole gradient. */
                    .ref-btns .greenbtn {
                        color: #0A0D0F;
                        background: linear-gradient(135deg, var(--primary-color, #0073FC), var(--primary-color-light, #66ACFF) 80%);
                        font-size: 14px;
                        padding: 8px 16px 7px;
                        border-radius: 3px;
                        font-weight: 600;
                    }

                    .ref-btns .ref-register {
                        color: white;
                        font-size: 14px;
                        padding: 8px 16px 7px;
                        font-weight: 400;
                        letter-spacing: 1px;
                        display: flex;
                        position: relative;
                    }

                    .ref-btns .ref-register:after {
                        content: '→';
                        position: absolute;
                        right: -4px;
                    }

                    .ref-btns .ref-register:before {
                        content: '';
                        position: absolute;
                        left: 15px;
                        right: 15px;
                        top: calc(100% - 7px);
                        bottom: -6px;
                        border-top: 1px solid;
                        border-radius: 100%;
                        opacity: 0.7;
                    }

                    .ref-steps h3 {
                        background: -webkit-linear-gradient(-45deg, #90a3ac 25%, #fff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        font-size: 22px;
                        letter-spacing: 3px;
                        margin-bottom: 38px;
                    }

                    .ref-steps {
                        margin-top: 50px;
                    }

                    .ref-steps-list {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        max-width: 640px;
                        margin: auto;
                    }

                    .ref-step {
                        display: flex;
                        flex-direction: column;
                        position: relative;
                        height: 155px;
                        width: 170px;
                        /* decorative step glow: legacy green -> Business Arise blue */
                        background: linear-gradient(0deg, var(--primary-color, #0073FC) 0%, transparent 70%);
                        border-radius: 12px;
                        align-items: flex-start;
                        padding: 19px;
                        max-width: 30%;
                    }

                    .ref-step:after {
                        content: '';
                        inset: 1px;
                        display: flex;
                        /* top-right wash: the yellow-green stop -> Business Arise blue */
                        background: radial-gradient(at top right, #eb230d36, rgba(0, 115, 252, .15), transparent 51%);
                        position: absolute;
                        border-radius: 12px;
                        z-index: 0;
                        opacity: 0.6;
                    }

                    .ref-step > * {
                        position: relative;
                        z-index: 1;
                    }

                    .ref-step:before {
                        content: '';
                        inset: 1px;
                        position: absolute;
                        border-radius: 12px;
                        z-index: 0;
                        /* card fill: the upper stop was a dark GREEN (#245146); now a dark
                           blue of the same value. Light mode replaces this fill in
                           tbtk-footer-pages-light.css. */
                        background: linear-gradient(0, #060210, #10303f);
                    }

                    .ref-step > .extra-glow {
                        display: flex;
                        position: absolute;
                        z-index: -2;
                        inset: 0;
                        /* decorative step glow: legacy green -> Business Arise blue */
                        background: linear-gradient(0deg, var(--primary-color, #0073FC) 0%, rgb(0 115 252 / 30%) 25%, transparent 50%);
                        border-radius: 12px;
                        filter: blur(12px);
                    }

                    .ref-step .step-num {
                        line-height: 1;
                        /* step number: legacy green -> Business Arise blue */
                        color: var(--primary-color-light, #66ACFF);
                        /* step number chip: legacy green tint -> Business Arise blue tint */
                        background: rgba(0, 115, 252, .30);
                        border-radius: 100px;
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 22px;
                        padding: 19px 0;
                    }

                    .ref-step .step-title {
                        margin-top: 14px;
                        font-size: 11px;
                        opacity: .5;
                        font-weight: 100;
                        font-family: var(--font-secondary);
                    }

                    .ref-step .step-high-title {
                        font-family: var(--font-primary);
                        font-weight: 600;
                        font-size: 20px;
                        line-height: 1;
                    }

                    span.ref-small-line {
                        display: block;
                        margin-top: 45px;
                        line-height: 1;
                        font-size: 14px;
                    }


                    @media (max-width: 475px) {
                        .ref-icons {
                            opacity: .5;
                        }

                        .referral-public-wrap {
                            margin-top: 90px;
                        }

                        .ref-steps h3 {
                            font-size: 18px;
                            letter-spacing: 1px;
                        }

                        .referral-public-wrap .ref-top {
                            justify-content: left;
                        }

                    }