/* همه کلاس‌ها با cp شروع می‌شوند تا با استایل‌های صفحه تداخل نداشته باشند. */
    .cp-course-ad,
    .cp-course-ad * {
        box-sizing: border-box;
    }

    .cp-course-ad {
        --cp-yellow: #f5c928;
        --cp-yellow-2: #ffdd55;
        --cp-ink: #0c0c0d;
        --cp-muted: #bbb9ad;
        width: min(1110px, calc(100% - 32px));
        margin: 1px auto;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(245, 201, 40, .32);
        border-radius: 24px;
        background:
            radial-gradient(circle at 12% 12%, rgba(245, 201, 40, .17), transparent 30%),
            linear-gradient(125deg, #17160f 0%, #0d0e10 56%, #17140a 100%);
        color: #fff;
        box-shadow: 0 24px 65px rgba(0, 0, 0, .34);
        font-family: inherit, Tahoma, Arial, sans-serif;
    }

    .cp-course-ad::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .18;
        background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
        background-size: 38px 38px;
        mask-image: linear-gradient(90deg, #000, transparent 70%);
    }

    .cp-course-ad__inner {
        min-height: 320px;
        display: grid;
        grid-template-columns: 1.08fr .92fr;
        align-items: center;
        gap: 34px;
        padding: 16px 22px;
    }

    .cp-course-ad__badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 7px 12px;
        border: 1px solid rgba(245, 201, 40, .34);
        border-radius: 999px;
        background: rgba(245, 201, 40, .1);
        color: var(--cp-yellow-2);
        font-size: 13px;
        font-weight: 800;
    }

    .cp-course-ad__badge::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cp-yellow);
        box-shadow: 0 0 12px var(--cp-yellow);
    }

    .cp-course-ad__title {
        max-width: 650px;
        margin: 0;
        font-size: clamp(25px, 3vw, 42px);
        line-height: 1.45;
        letter-spacing: -.7px;
        font-weight: 950;
    }

    .cp-course-ad__title span {
        color: var(--cp-yellow);
    }

    .cp-course-ad__text {
        max-width: 660px;
        margin: 12px 0 22px;
        color: var(--cp-muted);
        font-size: clamp(14px, 1.25vw, 17px);
        line-height: 2;
    }

    .cp-course-ad__actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .cp-course-ad__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 22px;
        border-radius: 13px;
        background: linear-gradient(135deg, var(--cp-yellow-2), var(--cp-yellow));
        color: #090909 !important;
        text-decoration: none !important;
        font-size: 15px;
        font-weight: 900;
        box-shadow: 0 12px 30px rgba(245, 201, 40, .18);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .cp-course-ad__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(245, 201, 40, .28);
    }

    .cp-course-ad__button svg {
        width: 19px;
        height: 19px;
    }

    .cp-course-ad__note {
        color: #8f8e87;
        font-size: 12px;
    }

    .cp-course-ad__visual {
        position: relative;
        min-height: 238px;
    }

    .cp-course-ad__glow {
        position: absolute;
        inset: 15% 5%;
        border-radius: 50%;
        background: rgba(245, 201, 40, .24);
        filter: blur(50px);
    }

    .cp-browser {
        position: absolute;
        inset: 8px 0 0 8px;
        overflow: hidden;
        transform: rotate(-3deg);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 16px;
        background: #11141a;
        box-shadow: 0 25px 48px rgba(0, 0, 0, .5);
        transition: transform .45s ease;
    }

    .cp-course-ad:hover .cp-browser {
        transform: rotate(-1deg) translateY(-4px);
    }

    .cp-browser__bar {
        height: 31px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        background: #22262e;
    }

    .cp-browser__bar i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #727781;
    }

    .cp-browser__body {
        padding: 17px;
        direction: ltr;
    }

    .cp-browser__hero {
        height: 91px;
        display: grid;
        grid-template-columns: 1fr 105px;
        gap: 15px;
        padding: 14px;
        border-radius: 11px;
        background: linear-gradient(135deg, #1c2130, #12151c);
    }

    .cp-browser__copy {
        padding-top: 3px;
    }

    .cp-browser__copy b,
    .cp-browser__copy span {
        display: block;
        border-radius: 5px;
        background: #e7e9ef;
    }

    .cp-browser__copy b {
        width: 72%;
        height: 10px;
        margin-bottom: 9px;
    }

    .cp-browser__copy span {
        width: 88%;
        height: 6px;
        opacity: .3;
        margin-bottom: 6px;
    }

    .cp-browser__copy em {
        display: block;
        width: 48px;
        height: 15px;
        margin-top: 10px;
        border-radius: 4px;
        background: var(--cp-yellow);
    }

    .cp-browser__product {
        border-radius: 9px;
        background: linear-gradient(145deg, #f8d64f, #b68b00);
        position: relative;
    }

    .cp-browser__product::after {
        content: "";
        position: absolute;
        width: 48px;
        height: 58px;
        left: 29px;
        top: 16px;
        border-radius: 24px 24px 13px 13px;
        background: #17191d;
        box-shadow: inset 0 0 0 5px #333945;
    }

    .cp-browser__cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 11px;
    }

    .cp-browser__cards i {
        height: 64px;
        border-radius: 8px;
        background: linear-gradient(#f0f1f3 70%, #c8cbd1 70%);
    }

    .cp-course-ad__ai {
        position: absolute;
        left: -9px;
        bottom: -6px;
        display: grid;
        place-items: center;
        width: 70px;
        height: 70px;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 19px;
        background: var(--cp-yellow);
        color: #090909;
        font: 950 24px/1 Arial, sans-serif;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
        transform: rotate(7deg);
    }

    @media (max-width: 760px) {
        .cp-course-ad {
            width: min(100% - 20px, 560px);
            border-radius: 19px;
        }

        .cp-course-ad__inner {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 17px 12px 20px;
        }

        .cp-course-ad__content {
            text-align: center;
        }

        .cp-course-ad__badge {
            margin-inline: auto;
        }

        .cp-course-ad__actions {
            justify-content: center;
        }

        .cp-course-ad__visual {
            min-height: 205px;
        }

        .cp-browser {
            inset: 2px 5px 0;
        }

        .cp-course-ad__ai {
            left: 0;
        }
    }

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

        .cp-course-ad__button,
        .cp-browser {
            transition: none;
        }
    }