.affiliate-public-v3 {
    --affiliate-forest: #203c31;
    --affiliate-green: #315b48;
    --affiliate-soft: #eef4f0;
    overflow: hidden;
    background: #f7f9f7;
}

.affiliate-public-v3__hero {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgb(255 255 255 / 12%),
            transparent 22rem
        ),
        linear-gradient(
            135deg,
            var(--affiliate-forest),
            var(--affiliate-green)
        );
}

.affiliate-public-v3__badge {
    border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.affiliate-public-v3__hero-copy {
    max-width: 42rem;
    color: rgb(255 255 255 / 78%) !important;
    line-height: 1.7;
}

.affiliate-public-v3__hero-copy strong {
    color: #fff;
}

.affiliate-public-v3__quick > div > div {
    display: grid;
    gap: .1rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: .85rem;
    background: rgb(255 255 255 / 7%);
    padding: .85rem;
}

.affiliate-public-v3__quick strong {
    color: #fff;
}

.affiliate-public-v3__quick span {
    color: rgb(255 255 255 / 58%);
    font-size: .72rem;
}

.affiliate-public-v3__hero-media {
    position: relative;
    min-height: 30rem;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 2rem 5rem rgb(7 25 16 / 28%);
}

.affiliate-public-v3__hero-media > img {
    width: 100%;
    height: 100%;
    min-height: 30rem;
    object-fit: cover;
    animation: affiliateHeroImage 12s ease-in-out infinite alternate;
}

.affiliate-public-v3__code-card {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    gap: .25rem;
    max-width: 23rem;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 1rem;
    background: rgb(24 48 37 / 82%);
    padding: 1rem 1.1rem;
    color: #fff;
    backdrop-filter: blur(12px);
    animation: affiliateCodeCard 3.6s ease-in-out infinite;
}

.affiliate-public-v3__code-card small,
.affiliate-public-v3__code-card span {
    color: rgb(255 255 255 / 70%);
}

.affiliate-public-v3__code-card strong {
    font-size: 1.55rem;
    letter-spacing: .08em;
}

.affiliate-public-v3__story-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.affiliate-public-v3__steps {
    display: grid;
    gap: .9rem;
}

.affiliate-public-v3__steps article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    border: 1px solid #e2e9e4;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
}

.affiliate-public-v3__steps article > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: .8rem;
    background: var(--affiliate-soft);
    color: var(--affiliate-green);
    font-size: .72rem;
    font-weight: 900;
}

.affiliate-public-v3__commissions {
    background: #f2f6f3;
}

.affiliate-public-v3__commission-card {
    border-radius: 1rem;
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.affiliate-public-v3__commission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.5rem rgb(32 60 49 / 10%) !important;
}

.affiliate-public-v3__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--affiliate-soft);
    font-size: 1.35rem;
}

.affiliate-public-v3__rate {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #e7ece9;
    padding-top: 1rem;
}

.affiliate-public-v3__rate small {
    color: #7a8880;
}

.affiliate-public-v3__rate strong {
    color: var(--affiliate-green);
    font-size: 1.45rem;
}

.affiliate-public-v3__rate-note {
    border: 1px solid #d4e2d8;
    background: #eaf3ed;
    color: #3e594a;
}

.affiliate-public-v3__use-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    height: 100%;
    border: 1px solid #e3e9e5;
    border-radius: 1rem;
    padding: 1rem;
}

.affiliate-public-v3__use-card > span {
    font-size: 1.35rem;
}

.affiliate-public-v3__use-card small {
    display: block;
    margin-top: .2rem;
    color: #76847c;
    line-height: 1.5;
}

.affiliate-public-v3__workspace {
    background:
        linear-gradient(
            135deg,
            #e9f1ec,
            #f7f9f7
        );
}

.affiliate-public-v3__workspace-copy {
    background: var(--affiliate-forest);
    color: #fff;
}

.affiliate-public-v3__workspace-copy span,
.affiliate-public-v3__workspace-copy li {
    color: rgb(255 255 255 / 76%);
}

.affiliate-public-v3__dashboard-demo {
    display: grid;
    gap: .8rem;
}

.affiliate-public-v3__dashboard-demo > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #e2e8e4;
    border-radius: .9rem;
    background: #f8faf8;
    padding: 1rem;
}

.affiliate-public-v3__dashboard-demo small {
    color: #7b8981;
}

.affiliate-public-v3__dashboard-demo strong {
    color: var(--affiliate-green);
}

.affiliate-public-v3 .accordion-item {
    overflow: hidden;
    border-color: #e1e8e3;
}

.affiliate-public-v3 .accordion-item:first-of-type {
    border-radius: 1rem 1rem 0 0;
}

.affiliate-public-v3 .accordion-item:last-of-type {
    border-radius: 0 0 1rem 1rem;
}

.affiliate-public-v3__cta {
    background:
        radial-gradient(
            circle at 50% 0,
            rgb(255 255 255 / 9%),
            transparent 23rem
        ),
        var(--affiliate-forest);
}

[data-affiliate-reveal] {
    opacity: 1;
    transform: none;
}

.js-affiliate-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.2, .65, .3, 1);
}

.js-affiliate-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes affiliateHeroImage {
    from {
        transform: scale(1.015);
    }

    to {
        transform: scale(1.06);
    }
}

@keyframes affiliateCodeCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-.35rem);
    }
}

@media (max-width: 61.99rem) {
    .affiliate-public-v3__hero-media,
    .affiliate-public-v3__hero-media > img {
        min-height: 22rem;
    }
}