.changelog {
    --changelog-brand: #3f35ff;
    --changelog-brand-light: #e8e7ff;
    --changelog-brand-mid: #8b84ff;
    --changelog-text: #13151a;
    --changelog-text-2: #4e5053;
    --changelog-text-3: #71717b;
    --changelog-border: #ebebeb;
    --changelog-border-2: #d8d8d8;
    --changelog-bg-subtle: #fafafa;
    --changelog-release: #16a34a;
    --changelog-release-bg: #dcfce7;
    --changelog-improve: #3f35ff;
    --changelog-improve-bg: #e8e7ff;
    --changelog-retired: #dc2626;
    --changelog-retired-bg: #fee2e2
}

.changelog-tag {
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 4px 10px;
    text-transform: uppercase
}

.changelog-tag {
    background: var(--changelog-improve-bg);
    color: var(--changelog-improve)
}

.changelog-tag--new,
.changelog-tag--new-models {
    background: var(--changelog-release-bg);
    color: var(--changelog-release)
}

.changelog-tag--improvement {
    background: var(--changelog-improve-bg);
    color: var(--changelog-improve)
}

.changelog-tag--retired {
    background: var(--changelog-retired-bg);
    color: var(--changelog-retired)
}

.changelog-hero-bg {
    background-image: linear-gradient(90deg, rgba(63, 53, 255, .05) 1px, transparent 0), linear-gradient(180deg, rgba(63, 53, 255, .05) 1px, transparent 0), linear-gradient(180deg, #edecff, rgba(237, 236, 255, 0) 320px);
    background-size: 56px 56px, 56px 56px, 100% 100%;
    height: 480px;
    left: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    mask-image: linear-gradient(180deg, #000 40%, transparent);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.changelog-hero-bg--single {
    background-image: linear-gradient(90deg, rgba(63, 53, 255, .06) 1px, transparent 0), linear-gradient(180deg, rgba(63, 53, 255, .06) 1px, transparent 0), linear-gradient(180deg, #edecff, rgba(237, 236, 255, 0));
    height: 540px;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
    mask-image: linear-gradient(180deg, #000 45%, transparent)
}

.changelog-tag {
    padding: 5px 11px
}

.changelog-single {
    position: relative
}

.changelog-article-wrap {
    margin: 0 auto;
    max-width: 740px;
    padding: 0 24px;
    position: relative;
    z-index: 1
}

.changelog-entry-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.changelog-back {
    align-items: center;
    color: var(--changelog-text-3);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .08em;
    margin-top: 40px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .15s
}

.changelog-back svg {
    height: 15px;
    width: 15px
}

.changelog-back:hover {
    color: var(--changelog-brand)
}

.changelog-article-head {
    padding: 40px 0 30px;
    text-align: center
}

.changelog-article-head h1 {
    font-family: Space Grotesk, sans-serif;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1.6px;
    line-height: 1.08
}

.changelog-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

.changelog-article-meta {
    color: var(--changelog-text-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    margin: 18px 0 16px;
    text-transform: uppercase
}

.single .changelog-prose {
    color: var(--changelog-text-2);
    font-size: 17px;
    line-height: 1.75;
    padding: 8px 0 16px
}

.single .changelog-prose p {
    color: var(--changelog-text-2);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 20px
}

.single .changelog-prose .lead,
.single .changelog-prose>p:first-child {
    color: var(--changelog-text);
    font-size: 19px;
    line-height: 1.65
}

.single .changelog-prose h2 {
    color: var(--changelog-text);
    font-family: Space Grotesk, sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -.7px;
    margin: 38px 0 14px
}

.single .changelog-prose a {
    border-bottom: 1px solid rgba(63, 53, 255, .32);
    color: var(--changelog-brand);
    text-decoration: none
}

.single .changelog-prose a:hover {
    border-bottom-color: var(--changelog-brand)
}

.single .changelog-prose ul {
    list-style: none;
    margin: 0 0 20px;
    padding-left: 4px
}

.single .changelog-prose li {
    margin-bottom: 11px;
    padding-left: 22px;
    position: relative
}

.single .changelog-prose li:before {
    background: var(--changelog-brand-mid);
    border-radius: 2px;
    content: "";
    height: 6px;
    left: 2px;
    position: absolute;
    top: 11px;
    width: 6px
}

.single .changelog-prose li strong,
.single .changelog-prose p strong {
    color: var(--changelog-text);
    font-weight: 600
}

.single .changelog-prose :not(pre)>code {
    background: #f5f5f5;
    border-radius: 5px;
    color: var(--changelog-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    padding: 2px 6px
}

.changelog-article-foot {
    align-items: center;
    border-top: 1px solid var(--changelog-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 28px;
    padding: 24px 0 8px
}

.changelog-article-foot .changelog-back {
    margin-top: 0
}

.changelog-share {
    align-items: center;
    background: none;
    border: 1px solid var(--changelog-border-2);
    border-radius: 8px;
    color: var(--changelog-text-3);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .08em;
    padding: 9px 16px;
    text-transform: uppercase;
    transition: all .15s
}

.changelog-share:hover {
    border-color: var(--changelog-brand);
    color: var(--changelog-brand)
}

.changelog-cta {
    background-color: var(--changelog-bg-subtle);
    background-image: linear-gradient(90deg, rgba(19, 21, 26, .05) 1px, transparent 0), linear-gradient(180deg, rgba(19, 21, 26, .05) 1px, transparent 0);
    background-size: 64px 64px;
    border-bottom: 1px solid var(--changelog-border);
    border-top: 1px solid var(--changelog-border);
    margin-top: 64px;
    padding: 56px 24px
}

.changelog-cta-card {
    background: #fff;
    margin: 0 auto;
    max-width: 1080px;
    padding: 64px 32px;
    text-align: center
}

.changelog-cta-eyebrow {
    color: var(--changelog-text-3);
    font-family: Space Grotesk, sans-serif;
    font-size: 16px;
    letter-spacing: .06em;
    margin-bottom: 16px;
    text-transform: uppercase
}

.changelog-cta-card h2 {
    font-family: Space Grotesk, sans-serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -1.4px;
    line-height: 1.08
}

.changelog-cta-card p {
    color: var(--changelog-text-2);
    font-size: 18px;
    margin: 16px auto 0;
    max-width: 460px
}

.changelog-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 30px
}

.changelog-btn {
    border-radius: 2px;
    font-family: Space Grotesk, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 15px 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .15s
}

.changelog-btn-primary {
    background: var(--changelog-brand);
    color: #fff
}

.changelog-btn-primary:hover {
    opacity: .9
}

.changelog-btn-ghost {
    background: #fff;
    border: 1px solid var(--changelog-text);
    color: var(--changelog-text)
}

.changelog-btn-ghost:hover {
    background: var(--changelog-text);
    color: #fff
}

.changelog-related {
    background: #fff
}

.changelog-related-inner {
    margin: 0 auto;
    max-width: 920px;
    padding: 64px 24px 80px
}

.changelog-related-inner h2 {
    font-family: Space Grotesk, sans-serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -1px;
    margin-bottom: 28px
}

.changelog-related-grid {
    border-left: 1px solid var(--changelog-border);
    border-top: 1px solid var(--changelog-border);
    display: grid;
    grid-template-columns: 1fr 1fr
}

.changelog-rel-card {
    border-bottom: 1px solid var(--changelog-border);
    border-right: 1px solid var(--changelog-border);
    color: inherit;
    cursor: pointer;
    display: block;
    padding: 28px;
    text-decoration: none;
    transition: background .2s ease
}

.changelog-rel-card:hover {
    background: var(--changelog-bg-subtle)
}

.changelog-rel-card:hover .changelog-rel-title {
    color: var(--changelog-brand)
}

.changelog-rel-top {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 44px
}

.changelog-rel-date {
    color: var(--changelog-text-3);
    font-size: 13px;
    white-space: nowrap
}

.changelog-rel-title {
    font-family: Space Grotesk, sans-serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.4px;
    line-height: 1.22;
    transition: color .15s
}

@media(max-width:720px) {
    .changelog-article-head h1 {
        font-size: 36px
    }

    .changelog-related-grid {
        grid-template-columns: 1fr
    }

    .changelog-article-foot {
        align-items: flex-start;
        flex-direction: column
    }
}

.home-cta {
    margin-top: 40px
}

.home-cta__label {
    margin-bottom: 12px;
    text-transform: uppercase
}

.home-cta__desc {
    color: #4e5053;
    margin: 0 auto;
    max-width: 580px
}