.webflow-release-studio {
    --wf-blue: #146ef5;
    --wf-blue-soft: #6aa5ff;
    --wf-purple: #8b5cf6;
    --wf-mint: #00d6aa;
    --wf-ink: #07090f;
    --wf-panel: rgba(14, 18, 29, 0.9);
    --wf-border: rgba(151, 169, 205, 0.2);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid rgba(126, 158, 215, 0.24);
    border-radius: 28px;
    color: #f5f8ff;
    background:
        linear-gradient(145deg, rgba(20, 110, 245, 0.1), transparent 38%),
        radial-gradient(circle at 84% 12%, rgba(139, 92, 246, 0.16), transparent 34%),
        #080b13;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.36);
}

.webflow-release-studio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.webflow-release-studio__glow {
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    filter: blur(90px);
    opacity: 0.18;
    pointer-events: none;
}

.webflow-release-studio__glow--top {
    top: -150px;
    right: 12%;
    background: var(--wf-blue);
}

.webflow-release-studio__glow--bottom {
    bottom: -180px;
    left: 24%;
    background: var(--wf-purple);
}

.webflow-release-studio__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.webflow-release-studio__header > div:first-child {
    max-width: 760px;
    min-width: 0;
}

.webflow-release-studio__eyebrow {
    margin: 0 0 0.65rem;
    color: #83adff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.webflow-release-studio__header h2 {
    max-width: 710px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 3.2vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.webflow-release-studio__header p:not(.webflow-release-studio__eyebrow) {
    max-width: 690px;
    margin: 0.85rem 0 0;
    color: #aab4c8;
    font-size: 0.98rem;
    line-height: 1.65;
}

.webflow-release-studio__mode {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(0, 214, 170, 0.28);
    border-radius: 999px;
    color: #b7f6e8;
    background: rgba(0, 214, 170, 0.08);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.webflow-release-studio__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wf-mint);
    box-shadow: 0 0 0 5px rgba(0, 214, 170, 0.12);
}

.webflow-release-studio__workspace {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.35fr) minmax(0, 0.83fr);
    gap: 0.9rem;
    align-items: stretch;
}

.webflow-release-studio__passport,
.webflow-release-studio__diff,
.webflow-release-studio__verdict {
    min-width: 0;
    border: 1px solid var(--wf-border);
    border-radius: 19px;
    background: linear-gradient(160deg, rgba(17, 22, 35, 0.96), rgba(9, 12, 20, 0.94));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.webflow-release-studio__passport,
.webflow-release-studio__diff {
    padding: 1rem;
}

.webflow-release-studio__panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(151, 169, 205, 0.13);
    color: #7f8ba3;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.webflow-release-studio__panel-heading strong {
    color: #dce6fb;
    font-size: 0.7rem;
}

.webflow-release-studio__item-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.webflow-release-studio__item-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, var(--wf-blue), var(--wf-purple));
    box-shadow: 0 9px 26px rgba(20, 110, 245, 0.25);
    font-size: 1rem;
    font-weight: 900;
}

.webflow-release-studio__item-title div {
    min-width: 0;
}

.webflow-release-studio__item-title small,
.webflow-release-studio__verdict-top small {
    display: block;
    margin-bottom: 0.15rem;
    color: #77839a;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.webflow-release-studio__item-title strong {
    display: block;
    overflow: hidden;
    color: #f8faff;
    font-size: 0.96rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webflow-release-studio__identity-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.webflow-release-studio__identity-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.58rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.webflow-release-studio__identity-list dt {
    color: #758097;
    font-size: 0.7rem;
}

.webflow-release-studio__identity-list dd {
    overflow: hidden;
    margin: 0;
    color: #dbe5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webflow-release-studio__scope {
    margin-top: 0.85rem;
    padding: 0.75rem;
    border: 1px solid rgba(20, 110, 245, 0.22);
    border-radius: 12px;
    background: rgba(20, 110, 245, 0.07);
}

.webflow-release-studio__scope span,
.webflow-release-studio__scope small {
    display: block;
    color: #8390a8;
    font-size: 0.66rem;
    line-height: 1.4;
}

.webflow-release-studio__scope strong {
    display: block;
    margin: 0.25rem 0;
    color: #cfe0ff;
    font-size: 0.73rem;
    line-height: 1.4;
}

.webflow-release-studio__diff-head,
.webflow-release-studio__diff-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(64px, 0.7fr) minmax(64px, 0.7fr);
    gap: 0.45rem;
    align-items: center;
}

.webflow-release-studio__diff-head {
    padding: 0.75rem 0.7rem 0.35rem;
    color: #667189;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.webflow-release-studio__diff-head span:not(:first-child) {
    text-align: center;
}

.webflow-release-studio__diff-row {
    min-height: 70px;
    margin-top: 0.4rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(151, 169, 205, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.webflow-release-studio__diff-row--changed {
    border-color: rgba(20, 110, 245, 0.22);
    background: rgba(20, 110, 245, 0.055);
}

.webflow-release-studio__diff-row--blocked {
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(248, 113, 113, 0.045);
}

.webflow-release-studio__diff-row > div {
    min-width: 0;
}

.webflow-release-studio__diff-row small {
    display: block;
    color: #77839a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.64rem;
}

.webflow-release-studio__diff-row strong {
    display: block;
    overflow: hidden;
    margin-top: 0.2rem;
    color: #edf3ff;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webflow-release-studio__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
}

.webflow-release-studio__state--ready {
    color: #bcd3ff;
    background: rgba(20, 110, 245, 0.15);
}

.webflow-release-studio__state--old {
    color: #b2bac9;
    background: rgba(148, 163, 184, 0.1);
}

.webflow-release-studio__state--match {
    color: #a8ecdc;
    background: rgba(0, 214, 170, 0.1);
}

.webflow-release-studio__state--alert {
    color: #fecaca;
    background: rgba(248, 113, 113, 0.13);
}

.webflow-release-studio__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.8rem;
    color: #7f8ba2;
    font-size: 0.65rem;
}

.webflow-release-studio__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.webflow-release-studio__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.webflow-release-studio__dot--staged {
    background: var(--wf-blue);
}

.webflow-release-studio__dot--live {
    background: var(--wf-mint);
}

.webflow-release-studio__dot--blocked {
    background: #f87171;
}

.webflow-release-studio__verdict {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-color: rgba(248, 113, 113, 0.2);
    background:
        linear-gradient(160deg, rgba(42, 19, 28, 0.66), rgba(11, 13, 21, 0.96) 52%);
}

.webflow-release-studio__verdict-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.webflow-release-studio__verdict-icon {
    display: grid;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 50%;
    color: #fecaca;
    background: rgba(248, 113, 113, 0.11);
    font-weight: 900;
}

.webflow-release-studio__verdict-top strong {
    color: #fff;
    font-size: 0.96rem;
}

.webflow-release-studio__verdict > p {
    margin: 0.85rem 0;
    color: #9ea9bd;
    font-size: 0.76rem;
    line-height: 1.55;
}

.webflow-release-studio__verdict ul {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.webflow-release-studio__verdict li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.48rem 0;
    border-bottom: 1px solid rgba(151, 169, 205, 0.1);
    color: #7f8aa0;
    font-size: 0.69rem;
}

.webflow-release-studio__verdict li strong {
    color: #dfe7f7;
    font-size: 0.68rem;
}

.webflow-release-studio__verdict li .webflow-release-studio__danger {
    color: #fca5a5;
}

.webflow-release-studio__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    margin-top: auto;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(20, 110, 245, 0.34);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, rgba(20, 110, 245, 0.92), rgba(108, 64, 220, 0.9));
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.webflow-release-studio__cta:hover,
.webflow-release-studio__cta:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(20, 110, 245, 0.22);
}

.webflow-release-studio__rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--wf-border);
    border-radius: 18px;
    background: rgba(10, 13, 22, 0.82);
}

.webflow-release-studio__rail-line {
    position: absolute;
    top: 31px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, var(--wf-mint) 0 39%, var(--wf-blue) 39% 52%, rgba(151, 169, 205, 0.22) 52%);
}

.webflow-release-studio__step {
    position: relative;
    z-index: 1;
    min-width: 0;
    text-align: center;
}

.webflow-release-studio__step > span {
    display: inline-grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(151, 169, 205, 0.22);
    border-radius: 50%;
    color: #7b879c;
    background: #0b0f19;
    font-size: 0.6rem;
    font-weight: 900;
}

.webflow-release-studio__step--done > span {
    border-color: rgba(0, 214, 170, 0.4);
    color: #aaf2e2;
    background: rgba(0, 214, 170, 0.12);
}

.webflow-release-studio__step--active > span {
    border-color: rgba(20, 110, 245, 0.5);
    color: #d4e3ff;
    background: rgba(20, 110, 245, 0.16);
    box-shadow: 0 0 0 5px rgba(20, 110, 245, 0.08);
}

.webflow-release-studio__step div {
    margin-top: 0.55rem;
}

.webflow-release-studio__step small,
.webflow-release-studio__step strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webflow-release-studio__step small {
    color: #68758b;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.webflow-release-studio__step strong {
    margin-top: 0.15rem;
    color: #cfd8e8;
    font-size: 0.67rem;
}

.webflow-release-studio__boundaries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.webflow-release-studio__boundaries article {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(151, 169, 205, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.webflow-release-studio__boundaries span {
    color: #bdcff0;
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.webflow-release-studio__boundaries p {
    margin: 0.35rem 0 0;
    color: #7f8ba1;
    font-size: 0.7rem;
    line-height: 1.45;
}

@media (max-width: 1040px) {
    .webflow-release-studio__workspace {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    }

    .webflow-release-studio__verdict {
        grid-column: 1 / -1;
    }

    .webflow-release-studio__verdict ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .webflow-release-studio__verdict li {
        display: grid;
        gap: 0.2rem;
        border-bottom: 0;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
        padding: 0.55rem;
    }

    .webflow-release-studio__cta {
        margin-top: 0.25rem;
    }
}

@media (max-width: 760px) {
    .webflow-release-studio {
        border-radius: 21px;
    }

    .webflow-release-studio__header {
        display: grid;
        gap: 1rem;
    }

    .webflow-release-studio__mode {
        justify-self: start;
    }

    .webflow-release-studio__workspace {
        grid-template-columns: 1fr;
    }

    .webflow-release-studio__verdict {
        grid-column: auto;
    }

    .webflow-release-studio__verdict ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webflow-release-studio__rail {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .webflow-release-studio__rail-line {
        top: 28px;
        right: auto;
        bottom: 28px;
        left: 30px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, var(--wf-mint) 0 39%, var(--wf-blue) 39% 52%, rgba(151, 169, 205, 0.22) 52%);
    }

    .webflow-release-studio__step {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 0.65rem;
        align-items: center;
        min-height: 48px;
        text-align: left;
    }

    .webflow-release-studio__step div {
        margin-top: 0;
    }

    .webflow-release-studio__step small,
    .webflow-release-studio__step strong {
        white-space: normal;
    }

    .webflow-release-studio__boundaries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .dark-page.api-integration-page .dark-hero-highlights {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .dark-page.api-integration-page .dark-hero-highlights li {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .webflow-release-studio {
        padding: 1rem;
        border-radius: 18px;
    }

    .webflow-release-studio__header h2 {
        font-size: 1.55rem;
    }

    .webflow-release-studio__diff-head {
        display: none;
    }

    .webflow-release-studio__diff-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
    }

    .webflow-release-studio__diff-row > div {
        grid-column: 1 / -1;
    }

    .webflow-release-studio__state::before {
        margin-right: 0.25rem;
        color: #738097;
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .webflow-release-studio__state:nth-child(2)::before {
        content: "Staged";
    }

    .webflow-release-studio__state:nth-child(3)::before {
        content: "Live";
    }

    .webflow-release-studio__verdict ul,
    .webflow-release-studio__boundaries {
        grid-template-columns: 1fr;
    }

    .webflow-release-studio__cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webflow-release-studio__cta {
        transition: none;
    }
}