.PlayButton {
    --bgColor: rgba(255,255,255,.18);
    --bgColorHover: rgba(255,255,255,.35);
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center
}

.PlayButton::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: var(--bgColor);
    border-radius: 50%;
    transition: background .2s ease-out
}

.PlayButton:hover::before,.PlayButton:focus::before {
    background: var(--bgColorHover)
}

.PlayButton--dark {
    --bgColor: rgba(0,0,0,.18);
    --bgColorHover: rgba(0,0,0,.35)
}

.PlayButton--gray {
    --bgColor: hsl(238deg 16% 36%);
    --bgColorHover: hsl(238deg 16% 42%)
}

.PlayButton>svg:not(.PlayButton-timerBorder) {
    position: relative;
    color: var(--brand-color-text-default)
}

.PlayButton-timerBorder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.PlayButton-timerBorder circle {
    transform: rotate(-90deg);
    transform-origin: center
}

.application-main {
    min-height: 100vh
}

.lp-Copilot {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: balance
}

.lp-Section {
    padding-top: var(--base-size-96);
    padding-bottom: var(--base-size-96)
}

.lp-Section--new-pricing-experience-table summary {
    position: relative;
    display: flex;
    padding: var(--base-size-24) 0;
    cursor: pointer;
    justify-content: center
}

.lp-Section--new-pricing-experience-table summary::-webkit-details-marker,.lp-Section--new-pricing-experience-table summary::marker {
    display: none
}

.lp-Section--new-pricing-experience-table summary h3 {
    display: inline-block
}

.lp-Section--new-pricing-experience-table summary .icon-collapsed,.lp-Section--new-pricing-experience-table summary .icon-expanded {
    position: absolute;
    top: 3px;
    right: 5px;
    font-family: var(--brand-fontStack-sansSerif);
    font-size: 32px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: transform .3s ease
}

.lp-Section--new-pricing-experience-table summary .icon-collapsed::after,.lp-Section--new-pricing-experience-table summary .icon-expanded::after {
    display: block;
    font-family: var(--brand-fontStack-sansSerif);
    font-size: 32px;
    font-weight: 500;
    line-height: 24px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(-70deg, var(--brand-Accordion-toggle-color-start) 0%, var(--brand-Accordion-toggle-color-end) 100%);
    background-clip: text;
    transition: transform var(--brand-animation-duration-fast) ease,opacity var(--brand-animation-duration-faster) ease;
    -webkit-text-fill-color: transparent;
    --brand-Accordion-toggle-color-start: var(--base-color-scale-purple-4, #A371F7);
    --brand-Accordion-toggle-color-end: var(--base-color-scale-purple-4, #A371F7)
}

.lp-Section--new-pricing-experience-table summary .icon-expanded::after {
    content: "+"
}

.lp-Section--new-pricing-experience-table summary .icon-collapsed::after {
    content: "-";
    opacity: 0
}

.lp-Section--new-pricing-experience-table details[open] .icon-expanded::after {
    display: block;
    background: linear-gradient(-70deg, var(--brand-Accordion-toggle-color-start) 0%, var(--brand-Accordion-toggle-color-end) 100%);
    background-clip: text;
    opacity: 0;
    transition: transform var(--brand-animation-duration-fast) ease,opacity var(--brand-animation-duration-faster) ease;
    transform: rotateZ(180deg)
}

.lp-Section--new-pricing-experience-table details[open] .icon-collapsed::after {
    display: block;
    background: linear-gradient(-70deg, var(--brand-Accordion-toggle-color-start) 0%, var(--brand-Accordion-toggle-color-end) 100%);
    background-clip: text;
    opacity: 1;
    transform: rotateZ(180deg)
}

@media(min-width: 1280px) {
    .lp-Section:not(.lp-Section--compact) {
        padding-top:var(--base-size-128);
        padding-bottom: var(--base-size-128)
    }
}

@media(max-width: 767px) {
    .lp-Section-container--centerUntilMedium {
        max-width:488px;
        margin-right: auto;
        margin-left: auto
    }
}

.lp-Section--level-1 {
    background-color: var(--base-color-scale-gray-8, #161B22)
}

.lp-Section--level-1 .Bento-item {
    background-color: var(--base-color-scale-black-0, #010409)
}

.lp-Section--hero {
    position: relative;
    overflow: hidden
}

@media(max-width: 767px) {
    .lp-Section--hero {
        padding-top:var(--base-size-80) !important;
        padding-bottom: var(--base-size-16)
    }
}

@media(min-width: 1280px) {
    .lp-Section--hero {
        padding-top:var(--base-size-112);
        padding-bottom: var(--base-size-64)
    }
}

.lp-Hero {
    position: relative;
    z-index: 1;
    padding-top: var(--base-size-32);
    padding-bottom: var(--base-size-80)
}

@media(max-width: 767px) {
    .lp-Hero {
        padding-top:var(--base-size-24)
    }
}

.lp-Hero-heading {
    max-width: 19ch
}

.lp-Hero-visual {
    position: relative;
    margin-bottom: var(--base-size-32);
    z-index: 1
}

.lp-Hero-ctaButtons {
    display: flex;
    margin-top: var(--base-size-32);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--base-size-16)
}

@media(max-width: 543px) {
    .lp-Hero {
        padding-bottom:var(--base-size-64)
    }

    .lp-Hero-ctaButtons {
        flex-direction: column;
        align-items: stretch
    }
}

.lp-Hero-videoContainer {
    overflow: hidden;
    background-color: #13113c;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08)
}

@media(min-width: 1280px) {
    .lp-Hero-videoContainer {
        min-height:735px
    }
}

.lp-Hero-video--landscape {
    display: block
}

.lp-Hero-video--portrait {
    display: none
}

@media(max-width: 543px)and (orientation: portrait) {
    .lp-Hero-videoContainer {
        margin-right:calc(var(--brand-Grid-spacing-margin)*-1);
        border-radius: 8px 0 0 8px
    }

    .lp-Hero-video--portrait {
        display: block
    }

    .lp-Hero-video--landscape {
        display: none
    }
}

.lp-Hero-video {
    width: 100%;
    height: auto;
    border-radius: inherit
}

.lp-LogoSuite {
    padding-bottom: 0;
    position: relative;
    z-index: 1
}

.lp-LogoSuite img {
    filter: none !important
}

.lp-Hero-videoPlayerButton {
    position: absolute;
    z-index: 1;
    right: var(--base-size-20);
    bottom: var(--base-size-20)
}

@media(max-width: 543px)and (orientation: portrait) {
    .lp-Hero-videoPlayerButton {
        right:0
    }
}

.lp-PlayButton-video {
    position: absolute;
    z-index: 1;
    right: var(--base-size-20);
    bottom: var(--base-size-20)
}

.lp-Hero-head {
    position: absolute;
    z-index: 0;
    top: -190px;
    right: -170px;
    pointer-events: none
}

@media(max-width: 767px) {
    .lp-Hero-head {
        top:-170px
    }
}

@media(max-width: 500px) {
    .lp-Hero-head {
        top:-25%;
        right: -25%
    }
}

.lp-Hero-headBlink {
    width: 400px;
    max-width: calc(100vw - 6rem);
    height: 400px;
    max-height: calc(100vw - 6rem);
    overflow: hidden
}

.lp-Hero-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-color: #010101;
    opacity: 0;
    animation: lp-Hero-cover-fadeAnim 1.1s .2s ease-in backwards
}

@keyframes lp-Hero-cover-fadeAnim {
    0% {
        opacity: 1
    }
}

.lp-Features-secondaryButton {
    border-color: var(--fgColor-default)
}

.lp-Features-editorButton {
    position: relative;
    height: auto;
    padding: var(--base-size-4) var(--base-size-8) var(--base-size-16) var(--base-size-8);
    text-align: center;
    background: linear-gradient(135deg, #393F46 0%, #202328 50%) no-repeat;
    background-clip: padding-box;
    border-color: transparent;
    border-radius: 1rem
}

.lp-Features-editorButton::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 1px;
    content: "";
    background-color: #202328;
    border-radius: .85rem
}

.lp-Features-mobile>svg {
    width: 72px;
    height: 72px;
    padding: var(--base-size-20);
    background-color: var(--brand-Icon-background-purple);
    border-radius: 50%
}

@media(max-width: 1011px) {
    .lp-Features-mobileText {
        text-align:center
    }
}

.lp-Section--pricing {
    position: relative;
    margin-bottom: var(--base-size-48);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover
}

.lp-Pricing-table-header {
    padding-top: 100px;
    background-color: #0d1117
}

@media(min-width: 768px) {
    .lp-Pricing-table-header {
        position:sticky
    }
}

.lp-Pricing-groupTitle {
    margin-bottom: var(--base-size-24)
}

@media(min-width: 768px) {
    .lp-Pricing-groupTitle {
        margin-bottom:var(--base-size-40)
    }
}

@media(min-width: 768px) {
    .lp-Pricing-description--org {
        min-height:4.5rem
    }
}

.lp-Pricing-divider {
    margin: 0;
    margin-bottom: var(--base-size-12);
    border-color: #484f58;
    opacity: .8
}

.lp-Pricing-features-box {
    display: none
}

.lp-Pricing-features-toggle-btn {
    display: inline-flex;
    padding: 0;
    padding-right: var(--base-size-24);
    cursor: pointer;
    background-color: transparent;
    border: 0;
    appearance: none;
    justify-content: space-between;
    align-items: center;
    outline-color: var(--brand-color-focus) !important;
    outline-offset: 2px !important;
    transition: opacity .2s ease-in-out
}

.lp-Pricing-features-toggle-btn:hover {
    border: 0;
    opacity: .7
}

.lp-Pricing-features-toggle-btn[aria-expanded=true] .lp-Pricing-features-icon {
    transform: rotateZ(180deg)
}

.expanded .lp-Pricing-features-box {
    display: block
}

.lp-Pricing-features-icon {
    transition: transform .3s ease
}

@media(min-width: 768px) {
    .lp-Pricing-features-box {
        display:block
    }
}

@media(min-width: 768px) {
    .lp-Pricing-pricing-ctas {
        min-height:108px
    }
}

.lp-Pricing-list {
    display: flex;
    list-style: none;
    flex-direction: column;
    gap: var(--base-size-12)
}

.lp-Pricing-list span {
    font-size: 14px !important
}

.lp-Pricing-list svg {
    fill: var(--base-color-scale-purple-4, #A371F7)
}

.lp-Resources-card {
    --brand-color-accent-primary: transparent;
    margin: 0 auto
}

.lp-FAQs {
    --brand-Accordion-toggle-color-start: var(--base-color-scale-purple-4, #A371F7);
    --brand-Accordion-toggle-color-end: var(--base-color-scale-purple-4, #A371F7)
}

.lp-FAQs h3 {
    max-width: 534px
}

.lp-FAQs h4 {
    padding-inline-end:var(--base-size-32)}

.lp-FAQs p: not(:last-child),.lp-FAQs li:not(:last-child) {
    margin-bottom:var(--base-size-16)
}

.lp-FAQs li {
    list-style-position: inside
}

.is-sansSerifAlt {
    font-family: var(--brand-fontStack-sansSerifAlt)
}

@media(max-width: 1279px) {
    .break-whenWide {
        display:none
    }
}

.has-BlurredBg {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px)
}

.has-GradientBorder {
    position: relative
}

.has-GradientBorder::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: -1px;
    pointer-events: none;
    content: "";
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: inherit;
    mask-image: linear-gradient(180deg, #fff 0%, transparent 50%)
}

.lp-ConicGradientBorder {
    position: relative;
    padding: 1px;
    overflow: hidden;
    border-radius: var(--base-size-24)
}

.lp-ConicGradientBorder::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    border: var(--borderWidth-thin) solid transparent;
    border-radius: var(--base-size-24);
    background-color: #8e47fe;
    background-image: conic-gradient(from 245deg, #096BDE 0.1917rad, #0DFF50 0.5717rad, #8E47FE 1.3701rad, #7C3FFE 3.7256rad, #140FFF 3.9313rad);
    background-size: 120% 120%;
    background-position: center
}

.lp-ConicGradientBorder-label::before {
    background-image: conic-gradient(from 100deg at 50% 50%, #0DFF50 0deg, #67C2F5 130deg, #67C2F5 140deg, #8E47FE 180deg, #8E47FE 270deg, #67C2F5 330deg, #0DFF50 360deg)
}

.lp-ConicGradientBorder-label svg {
    fill: var(--fgColor-default)
}

@media screen and (min-width: 333px) {
    .lp-ConicGradientBorder-hero {
        white-space:nowrap
    }
}

.lp-ConicGradientBorder-hero::before {
    background-image: conic-gradient(from 90deg at 50% 50%, #140FFF 0deg, #096BDE 160deg, #0DFF50 175deg, #7C3FFE 200deg, #7C3FFE 350deg, #140FFF 360deg);
    mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    mask-composite: exclude
}

.lp-ConicGradientBorder-hero .lp-ConicGradientBorder-label-inner {
    background-color: rgba(0,0,0,.15)
}

.lp-ConicGradientBorder-label-inner {
    height: 26px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0;
    background-color: #0d1116
}

.lp-ConicGradientBorder-label-inner::before {
    display: none
}

.lp-ConicGradientBorder-label-mini {
    line-height: 0;
    font-size: 12px;
    font-weight: normal;
    min-height: 0
}

.lp-ConicGradientBorder-label-mini * {
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit
}

.lp-ConicGradientBorder-label-mini .lp-ConicGradientBorder-label-inner {
    height: 19px;
    min-height: 0;
    padding: 3px 8px 2px
}

.lp-Grid--noRowGap {
    grid-row-gap: 0
}

.lp-SectionIntro {
    max-width: 1032px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: var(--base-size-80)
}

.lp-SectionIntro-description {
    max-width: 816px
}

.lp-Section--compact .lp-SectionIntro,.lp-SectionIntro--compact .lp-SectionIntro {
    padding-bottom: var(--base-size-64)
}

.lp-SectionIntro--regular .lp-SectionIntro {
    padding-bottom: var(--base-size-48) !important
}

@media(min-width: 768px) {
    .lp-SectionIntro--regular .lp-SectionIntro {
        padding-bottom:var(--base-size-64) !important
    }
}

@media(max-width: 767px) {
    .lp-Section.lp-Section--compact {
        padding-top:var(--base-size-48);
        padding-bottom: var(--base-size-48)
    }
}

@media(min-width: 1280px) {
    .lp-SectionIntro {
        padding-bottom:var(--base-size-96);
        gap: var(--base-size-24)
    }

    .lp-SectionIntro--regular .lp-SectionIntro {
        padding-bottom: var(--base-size-96) !important
    }

    .lp-Section--compact .lp-SectionIntro,.lp-SectionIntro--compact .lp-SectionIntro {
        padding-bottom: var(--base-size-64)
    }
}

.lp-Timeline>li {
    padding-left: var(--base-size-24)
}

.lp-River-text {
    color: var(--brand-color-text-muted)
}

.lp-River-text .lp-Link--inline {
    color: var(--brand-Link-color-accent)
}

@media(min-width: 768px) {
    .lp-River-text {
        margin-inline-end:var(--base-size-40)
    }
}

.lp-River-label {
    --brand-Label-color-start: #8E47FE;
    --brand-Label-color-end: #0DFF50
}

.lp-River-visual {
    border-radius: var(--brand-Bento-item-borderRadius-medium)
}

.lp-Label--section::before {
    opacity: .25
}

.lp-Link--inline {
    color: var(--brand-Link-color-accent);
    text-decoration: underline;
    text-decoration-color: inherit !important
}

.lp-Link--inline:hover {
    color: var(--brand-color-text-default)
}

.lp-Link--inline:focus-visible {
    outline-offset: 1px
}

@media(prefers-reduced-motion: reduce) {
    * {
        animation: none
    }
}

.lp-Section--footnotes ol {
    padding-top: 0;
    padding-bottom: 0
}

.lp-RiverBreakout-text {
    max-width: 630px
}

.lp-RiverBreakout {
    padding-top: 0;
    padding-bottom: var(--base-size-48)
}

.lp-RiverBreakout>div {
    grid-auto-rows: 0 1fr !important
}

@media(min-width: 768px) {
    .lp-River-mod {
        grid-template-columns:[content] 1fr [visual] 1.1fr
    }
}

@media(min-width: 1012px) {
    .lp-River-mod {
        gap:0
    }
}

.lp-Hero-heading-mask {
    background: radial-gradient(81.14% 431.6% at 50.68% 170.49%, #FFF 0%, rgba(255, 255, 255, 0.867345) 55%, rgba(255, 255, 255, 0) 100%);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-clip: text;
    max-width: 20ch
}

.lp-Hero-fade {
    z-index: 0;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(41, 33, 106, 0) 0%, #0D1117 87.76%)
}

.Button--heroCta {
    border-color: var(--brand-color-accent-white)
}

.lp-Section--hero-bg-wrap {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.lp-Section--hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    transform: scale(1.2)
}

.lp-SectionIntro-label::before {
    --brand-Label-background: #484F58
}

@media(min-width: 768px)and (max-width: 1124px) {
    .lp-Pricing-cards {
        flex-wrap:wrap;
        max-width: 780px;
        margin-left: auto;
        margin-right: auto
    }

    .lp-Pricing-card {
        min-width: 250px
    }
}

.lp-Pricing-card {
    display: grid;
    padding: var(--base-size-32);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(153, 153, 153, 0) 100%);
    border-radius: var(--base-size-24);
    grid-auto-rows: min-content
}

.lp-Pricing-card::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 66.5%),linear-gradient(129.5deg, rgba(210, 168, 255, 0.05) 27.41%, rgba(121, 192, 255, 0.05) 72.59%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity .3s ease
}

.lp-Pricing-card:hover::after {
    opacity: 1
}

@media(min-width: 1280px) {
    .lp-Pricing-card {
        padding:var(--base-size-36)
    }
}

.lp-Pricing-currency,.lp-Pricing-number {
    font-size: 36px
}

.lp-Pricing-included {
    color: var(--base-color-scale-green-3)
}

.lp-Pricing-not-included {
    color: var(--base-color-scale-gray-5)
}

.lp-LimitedIcon {
    transform: scaleY(-1);
    color: var(--base-color-scale-purple-4)
}

.lp-Section--new-pricing-experience-table .lp-Pricing-table {
    padding-top: var(--base-size-16)
}

@media(min-width: 768px) {
    .lp-Section--new-pricing-experience-table .lp-Pricing-table {
        padding-top:var(--base-size-48)
    }
}

@media(min-width: 768px) {
    .lp-Pricing-table {
        padding-top:var(--base-size-40)
    }
}

.lp-Pricing-table .border-bottom {
    border-color: #1f252b !important
}

@media(max-width: 767px) {
    .lp-Pricing-table .border-bottom {
        border-color:#484f58 !important
    }
}

.lp-Pricing-table .border-bottom.lp-Pricing-features-toggle-btn {
    border-color: transparent !important
}

.lp-Pricing-table-header-noAnchorNav {
    padding-top: var(--base-size-24)
}

.lp-Pricing-table-cell svg {
    width: 24px;
    height: 24px
}

@media(max-width: 767px) {
    .lp-Pricing-table-cell {
        display:flex;
        flex-flow: row wrap;
        align-items: center;
        padding: var(--base-size-12) 0;
        border-bottom: var(--borderWidth-thin) solid #1f252b;
        font-weight: var(--base-text-weight-semibold)
    }

    .lp-Pricing-table-cell svg {
        margin-left: 10px
    }

    .lp-Pricing-table-cell .lp-Pricing-table-cell-plan {
        color: var(--brand-color-text-muted)
    }

    .lp-Pricing-table-cell:last-child {
        border-bottom: 0
    }
}

@media(max-width: 767px) {
    .lp-CompareTable-cell {
        padding:var(--base-size-12) 0;
        border-bottom: var(--borderWidth-thin) solid #1f252b
    }

    .lp-CompareTable-cell:last-child {
        border-bottom: 0
    }
}

@media(min-width: 768px) {
    .lp-Pricing-table-rowheader {
        color:var(--brand-color-text-muted)
    }
}

.lp-Pricing-table .lp-Pricing-features-box [role=row]:last-child {
    border-bottom: 0 !important
}

.lp-Pricing-table-button {
    padding: var(--base-size-6)
}

.lp-Pricing-table [role=columnheader] h3 {
    font-size: var(--base-size-20) !important
}

.lp-Pricing-table-label-wrap {
    display: flex;
    margin-bottom: var(--base-size-12)
}

.lp-Pricing-text-muted {
    color: var(--brand-color-text-muted)
}

.lp-IDE-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, 140px 140px);
    place-content: center;
    grid-gap: 10px;
    text-align: center;
    padding: 0 var(--base-size-16)
}

@media(min-width: 768px) {
    .lp-IDE-list:not(.lp-IDE-list--small) {
        grid-template-columns:repeat(4, 150px);
        grid-gap: var(--base-size-16)
    }
}

.lp-IDE-list img {
    display: block
}

.lp-IDE-list .lp-Features-editorButton {
    width: 140px;
    min-height: 140px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    padding: var(--base-size-8)
}

.lp-IDE-list .lp-Features-editorButton img {
    margin: 0 auto
}

.lp-IDE-list .lp-IDE-item-text {
    margin-top: var(--base-size-8)
}

@media(min-width: 420px) {
    .lp-IDE-list {
        grid-template-columns:repeat(auto-fit, 150px 150px)
    }

    .lp-IDE-list .lp-Features-editorButton {
        width: 150px;
        min-height: 150px
    }
}

.lp-IDE-list.lp-IDE-list--small {
    grid-template-columns: repeat(auto-fit, 96px 96px)
}

@media(min-width: 420px) {
    .lp-IDE-list.lp-IDE-list--small {
        grid-template-columns:repeat(4, 96px)
    }
}

.lp-IDE-list.lp-IDE-list--small .lp-IDE-item-text {
    font-size: var(--base-size-12)
}

.lp-IDE-list.lp-IDE-list--small .lp-Features-editorButton {
    width: 96px;
    min-height: 96px;
    height: auto;
    padding: var(--base-size-4)
}

.lp-IDE-list.lp-IDE-list--small .lp-Features-editorButton img {
    width: 40px;
    height: 40px
}

.lp-IDE-list.lp-IDE-list--small .lp-IDE-item-text-appendix {
    opacity: 0;
    position: absolute;
    pointer-events: none
}

@media(min-width: 768px) {
    .lp-IDE-list.lp-IDE-list--small {
        grid-template-columns:repeat(auto-fit, 76px 76px 76px 76px)
    }

    .lp-IDE-list.lp-IDE-list--small .lp-Features-editorButton {
        width: 76px;
        height: 76px;
        min-height: auto;
        transition: transform .3s ease
    }

    .lp-IDE-list.lp-IDE-list--small .lp-IDE-item:hover .lp-Features-editorButton {
        transform: translate3d(0, -8px, 0)
    }

    .lp-IDE-list.lp-IDE-list--small .lp-IDE-item:hover .lp-IDE-item-subtext {
        opacity: 1
    }

    .lp-IDE-list.lp-IDE-list--small .lp-IDE-item-subtext {
        display: block
    }

    .lp-IDE-list.lp-IDE-list--small .lp-IDE-item-text {
        position: absolute;
        pointer-events: none;
        opacity: 0
    }
}

.lp-IDE-item {
    position: relative
}

.lp-IDE-item-subtext {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    font-size: var(--base-size-12);
    white-space: nowrap;
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
    transition: opacity .3s ease
}

.lp-Pricing-IDE-section {
    margin-top: var(--base-size-48) !important;
    margin-bottom: var(--base-size-48) !important
}

.lp-Features-terminal-visual {
    padding-left: 5%
}

@media(min-width: 768px) {
    .lp-Features-terminal-visual {
        padding:0 5%
    }
}

.lp-Features-terminal-visual-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1
}

@media(min-width: 768px) {
    .lp-Features-terminal-visual-img {
        width:auto;
        max-width: 831px
    }
}

.lp-SubNav-spacer {
    height: 66px
}

@media(min-width: 768px) {
    .lp-SubNav-spacer {
        height:72px
    }
}

@media(prefers-reduced-motion: reduce) {
    .lp-LogoSuite-wrap .lp-pauseButton {
        display: none
    }
}

.lp-Hero-subnav--highContrast a {
    --brand-color-text-muted: var(--brand-color-text-default)
}

.lp-Hero .vscode-cta {
    margin-top: var(--base-size-24)
}

.vscode-cta img {
    display: inline;
    vertical-align: middle;
    position: relative;
    top: calc(-1*var(--base-size-2));
    margin: 0 var(--base-size-2)
}

.vscode-cta.vscode-cta--small img {
    top: calc(-1*var(--base-size-1));
    width: 18px;
    height: 18px;
    margin: 0
}

.vscode-cta.vscode-cta--small {
    font-size: var(--text-caption-size, 12px)
}

.vscode-cta a {
    color: inherit;
    text-decoration-color: currentColor
}

.lp-Features-terminal-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover !important
}

.lp-Link--muted {
    color: var(--brand-Link-color-muted)
}