.ctbx {
    position:relative;
    display:flex;
    align-items: center;
    gap:15px;
    overflow:hidden;
    padding:22px 20px;
    border:1px solid #e3e8e5;
    border-radius:15px;
    background:#fff;
    color:var(--primary-text);
    text-align:start;
    box-shadow:0 12px 26px rgba(9,35,24,.045);
    transition:var(--transition);
    isolation:isolate;
}

.ctbx::before {
    content:"";
    position:absolute;
    inset-inline-end:-45px;
    inset-block-end:-60px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:color-mix(in srgb,var(--uicolor) 13%,transparent);
    pointer-events:none;
    z-index:0;
}

a.ctbx {
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.ctbx-ic {
    position:relative;
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    font-weight: 100;
    color: #fbfffd;
    background: color-mix(in srgb,var(--uicolor) 95%,#fff);
    font-size: 20px;
    z-index:1;
}

.ctbx-ic i,
.ctbx-ic svg {
    color:inherit;
    font-size:inherit;
}

.ctbx-ic svg {
    width:1em;
    height:1em;
}

.ctbx-cn {
    position:relative;
    flex:1;
    min-width:0;
    z-index:1;
}

.ctbx-t {
    margin:0;
    color:var(--primary-text);
    font-size: 22px;
    font-weight: 700;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.ctbx-d {
    margin:10px 0 0;
    color:var(--secondarytext);
    font-size:13px;
    font-weight:600;
    line-height:1.7;
    overflow-wrap:anywhere;
}

.ctbx-go {
    position:absolute;
    inset-inline-end:16px;
    inset-block-end:14px;
    width: 45px;
    height: 45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background: var(--uicolor4);
    font-size:12px;
    opacity:0;
    transform:translateY(6px);
    transition:var(--transition);
    pointer-events:none;
    z-index:2;
}

html[dir="ltr"] .ctbx-go i {
    transform:scaleX(-1);
}

div.ctbx .ctbx-go {
    display:none;
}

/* =========================
   Desktop Interaction
========================= */

@media (hover:hover) and (pointer:fine) {
    a.ctbx:hover {
        transform:translateY(-4px);
        border-color:color-mix(in srgb,var(--uicolor) 35%,#e3e8e5);
        box-shadow:0 20px 42px rgba(9,35,24,.09);
    }

    a.ctbx:hover .ctbx-go {
        opacity:1;
        transform:translateY(0);
    }
}

a.ctbx:focus-visible {
    border-color:var(--uicolor);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--uicolor) 20%,transparent),
               0 16px 34px rgba(9,35,24,.08);
}

a.ctbx:focus-visible .ctbx-go {
    opacity:1;
    transform:translateY(0);
}

a.ctbx:active {
    transform:scale(.985);
    box-shadow:0 8px 18px rgba(9,35,24,.06);
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:760px) {
    .ctbx {
        min-height:128px;
        gap:12px;
        padding:17px 16px;
        border-radius:18px;
        box-shadow:0 8px 20px rgba(9,35,24,.05);
    }

    .ctbx::before {
        inset-inline-end:-48px;
        inset-block-end:-64px;
        width:96px;
        height:96px;
    }

    .ctbx-ic {
        flex-basis:42px;
        width:42px;
        height:42px;
        border-radius:13px;
        font-size:18px;
    }

    a.ctbx .ctbx-cn {
        padding-inline-end:42px;
    }

    .ctbx-t {
        font-size:17px;
        line-height:1.4;
    }

    .ctbx-d {
        margin-top:7px;
        font-size:12.5px;
        line-height:1.65;
    }

    a.ctbx .ctbx-go {
        inset-inline-end:12px;
        inset-block-start:50%;
        inset-block-end:auto;
        width:34px;
        height:34px;
        font-size:12px;
        opacity:1;
        transform:translateY(-50%);
        box-shadow:0 7px 16px color-mix(in srgb,var(--uicolor2) 28%,transparent);
    }

    a.ctbx:focus-visible .ctbx-go,
    a.ctbx:active .ctbx-go {
        transform:translateY(-50%);
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:480px) {
    .ctbx {
        min-height:112px;
        gap:11px;
        padding:15px 14px;
        border-radius:16px;
    }

    .ctbx-ic {
        flex-basis:40px;
        width:40px;
        height:40px;
        border-radius:12px;
        font-size:17px;
    }

    a.ctbx .ctbx-cn {
        padding-inline-end:39px;
    }

    .ctbx-t {
        font-size:16px;
    }

    .ctbx-d {
        margin-top:6px;
        font-size:12px;
        line-height:1.6;
    }

    a.ctbx .ctbx-go {
        inset-inline-end:11px;
        width:32px;
        height:32px;
        font-size:11px;
    }
}

@media only screen and (max-width:390px) {
    .ctbx {
        min-height:106px;
        padding:14px 13px;
    }

    .ctbx-ic {
        flex-basis:38px;
        width:38px;
        height:38px;
        font-size:16px;
    }

    .ctbx-t {
        font-size:15px;
    }

    .ctbx-d {
        font-size:11.5px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .ctbx,
    .ctbx-go {
        transition:none;
    }
}