h2:not(.slogan),
h3,
h4 {
    text-transform: uppercase;
}

article.display h2.slogan,
article.display h2.slogan > .word {
    text-transform: none !important;
}

section.itemCard {
    position: relative;
    z-index: 1;
    padding-top: 0;
}

section.itemCard:before {
    position: absolute;
    top: -100px;
    z-index: 0;
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background: rgb(17 17 17);
}

article[id] {
  scroll-margin-top: 80px;
}

/* Intro block */

article#vcore.intro {
    position: relative;
    top: 80px;
    z-index: 1;
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 560px;
    overflow: hidden;
    background: linear-gradient(to bottom,  rgba(63,63,62,1) 0%,rgba(43,43,42,1) 22%,rgba(0,0,0,1) 100%);
    isolation: isolate;
}

article#vcore.intro:before {
    content: "";
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 300px;
    background: transparent;
}

article#vcore.intro .vCoreDevice {
    position: relative;
    top: -300px;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 80px);
    margin: 0;
    padding: 0;
}

/* Отдельный слой с девайсом поверх текста */

article#vcore.intro .vCoreDevice::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    pointer-events: none;
    background-image: url('../img/products/v-core-box.webp');
    background-size: auto 240px;
    background-position: 50% 80%;
    background-repeat: no-repeat;
    opacity: 0;
    filter: brightness(0.08) blur(6px);
    transform: translateY(34px) scale(0.96);
    transform-origin: 50% 80%;
    transition:
        opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 2.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article#vcore.intro.is-visible .vCoreDevice::after {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translateY(0) scale(1);
}

/* Верхнее затемнение */

article#vcore.intro .topShadow {
    position: absolute;
    top: -60px;
    left: -60px;
    z-index: 1;
    display: block;
    width: calc(100% + 120px);
    height: 360px;
    pointer-events: none;
    background-image: url('../img/products/top-shadow.webp');
    background-position: 50% -70px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.8s ease 0.2s;
    filter: blur(5px);
}

@media (min-width:1000px) {
    article#vcore.intro.is-visible .topShadow {
        top: -50px;
        z-index: 3;
        opacity: 0.75;
    }
}
@media (max-width:999px) {
    article#vcore.intro.is-visible .topShadow {
        top: -20px;
        z-index: 3;
        opacity: 0.75;
    }
}

@media (min-width: 2000px) and (max-width:3800px) and (min-height:1280px) and (max-height:1550px) {
    section.itemCard article#vcore.intro {
        height: 560px;
    }
    section.itemCard article#vcore.intro .introText {
        top: 10px;
    }
}

/* Текст находится ниже слоя девайса */

article#vcore.intro .introText {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: min(480px, calc(100% - 40px));
    opacity: 0;
    filter: blur(9px);
    transform: translateX(-50%) translateY(calc(55vh - 110px)) scale(0.97);
    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s,
        filter 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s,
        transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s;
    will-change: opacity, filter, transform;
}

article#vcore.intro.is-visible .introText {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
}

article#vcore.intro h1 {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 80px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
}

article#vcore.intro h2 {
    margin: 0;
    padding: 0;
    color: #cdcdcd;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4em;
    text-align: center;
    text-transform: inherit;
    opacity: 0.8;
}

article#vcore.intro a.readMore,
article.included .url a {
    display: block;
    width: fit-content;
    margin: 20px auto;
    padding: 6px 18px;
    border: 1px solid #848484;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
    transition:
        opacity 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
article.included .url a em {
    font-style: normal;
    color: #111;
}

article#vcore.intro a.readMore:hover,
article#vcore.intro a.readMore:focus-visible,
article.included .url a:hover,
article.included .url a:focus-visible {
    border-color: #fff;
    background-color: #333;
    color: #fff;
    opacity: 1;
    outline: none;
    transform: translateY(-1px);
}

article#vcore.intro a.readMore em,
article.included .url a em {
    display: inline-block;
    height: 14px;
    margin: 5px 0 0;
    font-size: 14px;
    font-style: normal;
    line-height: 15px;
    vertical-align: top;
}

article#vcore.intro a.readMore::after,
article.included .url a::after {
    content: "";
    position: relative;
    top: 2px;
    left: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/products/svg/round-url.svg');
    background-size: 20px auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

article.included .url a::after {
    background-color: #111;
    border-radius: 100px;
    filter: invert(1);
    opacity: 0.8;
}

article.included .url a:hover, 
article.included .url a:target {
    background-color: #2ba9e1;
    border: 1px solid #2ba9e1;
}

article.included .url a:hover::after, 
article.included .url a:target::after {
    background-color: #2ca8e1;
    filter: invert(0);
    opacity: 1;
}

article.included .url a:hover em, 
article.included .url a:target em {
    color: #fff;
}

article#vcore.intro a.readMore:hover::after,
article#vcore.intro a.readMore:focus-visible::after {
    transform: translateY(3px) rotate(90deg);
}


@media (max-width: 640px) {
    article#vcore.intro {
        height: fit-content;
        min-height: 520px;
        background-size: auto 100%;
    }

    section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 140px;
        background-position: 50% 300px;
    }

    article#vcore.intro .introText {
        transform: translateX(-50%) translateY(calc(52svh - 100px)) scale(0.97);
    }

    article#vcore.intro.is-visible .introText {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    section.itemCard article#vcore.intro h1 {
    	width: 320px;
        margin: 0 auto 20px;
        padding-top: 0;
        font-size: 21px;
    }

    article#vcore.intro h2 {
        font-size: 16px;
    }

    div.performance {
        display: block;
        width: 100%;
        min-height: fit-content;
    }
}

@media (max-width: 440px) {
    body section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 110px;
        background-position: 50% 360px;
    }
}

@media (min-width: 1024px) {
    article.compatibility .charts {
        max-width: 1000px;
        margin: 20px auto;
    }
    article.compatibility .chart.pc {
        position: relative;
        top: 20px;
        display: block;
        width: 100%;
        max-width: 1000px;
        height: 640px;
        margin: 0 auto;
        background-image: url('../img/products/vectornate-resolution-compatibility-matrix-2928x1200.webp');
        background-position: 50% 85%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        position: relative;
        z-index: 17;
        opacity: 1;
        inset: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

@media (max-width: 999px) {
    section.itemCard article#vcore.intro.is-visible .introText {
        top: 110px;
    }
    article#vcore.intro .vCoreDevice {
        max-height:550px;
    }
    article#vcore.intro h1 {
        padding-top: 20px;
    }
}

@media (min-width: 1000px) and (max-width: 1280px) {
    section.itemCard article#vcore.intro.is-visible .introText {
        top: 120px;
    }
}

@media (min-width: 1000px) and (max-width: 2000px) {
    section.itemCard article#vcore.intro,
    section.itemCard article#vcore.intro .vCoreDevice {
        height: 640px;
    }
    article#vcore.intro h1 {
        padding-top: 20px;
    }

}

@media (min-width: 1280px) and (max-width: 1480px) and (min-height: 640px) and (max-height: 720px) {
    section.itemCard article#vcore.intro .introText {
        top: 100px;
    }
    section.itemCard article#vcore.intro .vCoreDevice::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        display: block;
        pointer-events: none;
        background-image: url('../img/products/v-core-box.webp');
        background-size: auto 240px;
        background-position: 50% 90%;
        background-repeat: no-repeat;
        opacity: 0;
        filter: brightness(0.08) blur(6px);
        transform: translateY(34px) scale(0.96);
        transform-origin: 50% 80%;
        transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1), filter 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, filter, transform;
    }
    section.itemCard article#vcore.intro.is-visible .vCoreDevice::after {
        opacity: 1;
        filter: brightness(1) blur(0);
        transform: translateY(0) scale(1);
    }    
}

@media (min-width: 1280px) and (max-width: 1480px) and (min-height: 1024px) and (max-height: 1290px) {
    article#vcore.intro .introText {
        top: 15%;
    }
}
@media (min-width: 1280px) {
    article#vcore.intro .introText {
        top: 15%;
    }
}

@media (prefers-reduced-motion: reduce) {
    article#vcore.intro .vCoreDevice::after,
    article#vcore.intro .topShadow,
    article#vcore.intro .introText,
    article#vcore.intro a.readMore,
    article#vcore.intro a.readMore::after {
        transition: none;
    }

    article#vcore.intro .vCoreDevice::after,
    article#vcore.intro .topShadow,
    article#vcore.intro .introText {
        opacity: 1;
        filter: none;
    }

    article#vcore.intro .vCoreDevice::after {
        transform: none;
    }

    article#vcore.intro .introText {
        transform: translateX(-50%);
    }
}

/* /Intro block */

/* Key features */

article.keyFeatures {
    --feature-sync-duration: 700ms;
    --feature-sync-easing: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    top: 62px;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #c3c3c3 100%);
}

article.keyFeatures .wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1000px;
    min-height: 400px;
    margin: 0 auto;
    padding: 20px 40px 0;
    box-sizing: border-box;
}

article.keyFeatures .column {
    position: relative;
    min-width: 0;
}

article.keyFeatures .column.left {
    z-index: 2;
    flex: 0 1 400px;
}

article.keyFeatures .column.left ul,
article.keyFeatures .column.left ul li {
    list-style: none;
}

article.keyFeatures .column.left ul li:before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 100px;
    background-color: #111;
}

article.keyFeatures .column.right {
    z-index: 1;
    flex: 1 1 480px;
    width: 100%;
    max-width: 460px;
    min-height: 460px;
    margin-left: 30px;
}

article.keyFeatures .wrapper h2 {
    margin: 20px 0;
    padding: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.25em;
    color: #111;
    text-align: left;
    text-shadow: 0 1px 2px #fff;
}

article.keyFeatures .wrapper h2.ui {
    margin-bottom: 15px;
    color: #3d3d3d;
    text-align: center;
}

/* Feature list */

article.keyFeatures .column.left ul {
    max-width: 400px;
    margin: 0 0 0 -18px;
    padding: 0 0 60px 18px;
}

article.keyFeatures .column.left ul li {
    margin: 0 0 5px -12px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #111;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55em;
    letter-spacing: -0.01em;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(14px);
    transition:
        opacity 650ms var(--feature-sync-easing),
        filter 650ms var(--feature-sync-easing),
        transform 750ms var(--feature-sync-easing);
    will-change: opacity, filter, transform;
}

article.keyFeatures .column.left ul.is-visible li {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

article.keyFeatures .column.left ul.is-visible li.one {
    transition-delay: 0s;
}

article.keyFeatures .column.left ul.is-visible li.two {
    transition-delay: 0.65s;
}

article.keyFeatures .column.left ul.is-visible li.three {
    transition-delay: 1.3s;
}

article.keyFeatures .column.left ul.is-visible li.four {
    transition-delay: 1.95s;
}

article.keyFeatures .column.left ul.is-visible li.five {
    transition-delay: 2.6s;
}

article.keyFeatures .column.left ul.is-visible li.six {
    transition-delay: 3.25s;
}

article.keyFeatures .column.left ul.is-visible li.seven {
    transition-delay: 3.9s;
}

article.keyFeatures .column.left ul.is-visible li.eight {
    transition-delay: 4.55s;
}

article.keyFeatures .column.left ul.has-slider-selection.is-reveal-complete li {
    color: rgb(17 17 17 / 38%);
    transition:
        color var(--feature-sync-duration) var(--feature-sync-easing),
        background-color var(--feature-sync-duration) var(--feature-sync-easing),
        box-shadow var(--feature-sync-duration) var(--feature-sync-easing);
    transition-delay: 0s;
    will-change: auto;
}

article.keyFeatures .column.left ul.has-slider-selection.is-reveal-complete li.is-current-feature {
    color: #111;
    background-color: transparent;
    box-shadow: none;
}

/* Feature icons slider */

article.keyFeatures .featureIconsSlider {
    position: relative;
    z-index: 3;
    width: calc(100% - 80px);
    max-width: 620px;
    height: 200px;
    margin: 20px auto 10px;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(24px);
    transition:
        opacity 1s var(--feature-sync-easing),
        filter 1s var(--feature-sync-easing),
        transform 1s var(--feature-sync-easing);
}

article.keyFeatures.is-visible .featureIconsSlider {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

article.keyFeatures .featureSliderViewport {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: visible;
}

article.keyFeatures .featureSliderTrack {
    position: relative;
    width: 100%;
    height: 100%;
}

article.keyFeatures .featureIconCard {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 150px;
    min-height: 126px;
    padding: 13px 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    filter: blur(0);
    pointer-events: none;
    transform: translateX(-50%) scale(0.65);
    transition:
        visibility 0s linear var(--feature-sync-duration),
        opacity var(--feature-sync-duration) var(--feature-sync-easing),
        filter var(--feature-sync-duration) var(--feature-sync-easing),
        transform var(--feature-sync-duration) var(--feature-sync-easing),
        background-color var(--feature-sync-duration) var(--feature-sync-easing),
        border-color var(--feature-sync-duration) var(--feature-sync-easing),
        box-shadow var(--feature-sync-duration) var(--feature-sync-easing);
    will-change: opacity, filter, transform;
}

article.keyFeatures .featureIconCard.is-prev,
article.keyFeatures .featureIconCard.is-active,
article.keyFeatures .featureIconCard.is-next {
    visibility: visible;
    transition-delay: 0s;
}

article.keyFeatures .featureIconCard.is-prev {
    z-index: 1;
    opacity: 0.42;
    filter: blur(0.5px);
    pointer-events: auto;
    cursor: pointer;
    transform: translateX(calc(-50% - 170px)) scale(0.78);
}

article.keyFeatures .featureIconCard.is-active {
    z-index: 3;
    height: 150px;
    padding-top: 20px;
    border-color: rgb(255 255 255 / 48%);
    background-color: rgb(255 255 255 / 42%);
    box-shadow:
        0 18px 45px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 55%);
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

article.keyFeatures .featureIconCard.is-next {
    z-index: 1;
    opacity: 0.42;
    filter: blur(0.5px);
    pointer-events: auto;
    cursor: pointer;
    transform: translateX(calc(-50% + 170px)) scale(0.78);
}

article.keyFeatures .featureIconCard.is-prev:hover,
article.keyFeatures .featureIconCard.is-next:hover {
    opacity: 0.7;
}

article.keyFeatures .featureIcon {
    --feature-icon-x: 0;
    display: block;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
    background-image: url('../img/products/svg/vectotech-features-icons.svg');
    background-position: var(--feature-icon-x) 0;
    background-size: 448px auto;
    background-repeat: no-repeat;
}

article.keyFeatures .iconThunderbolt {
    --feature-icon-x: 0;
}

article.keyFeatures .iconNvme {
    --feature-icon-x: -64px;
}

article.keyFeatures .iconMultiDisplay {
    --feature-icon-x: -128px;
}

article.keyFeatures .iconCharging {
    --feature-icon-x: -192px;
}

article.keyFeatures .iconCooling {
    --feature-icon-x: -256px;
}

article.keyFeatures .iconWarranty {
    --feature-icon-x: -320px;
}

article.keyFeatures .iconSupport {
    --feature-icon-x: -384px;
}

article.keyFeatures .featureIconCard.is-active .featureIcon,
article.keyFeatures .featureIconCard.active .featureIcon {
    background-position: var(--feature-icon-x) -64px;
}

article.keyFeatures .featureName {
    display: block;
    width: 100%;
    color: #222;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25em;
    text-align: center;
}

article.keyFeatures .featureName small {
    display: block;
    padding-top: 2px;
    font-size: 10px;
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: -0.02em;
}

/* Slider arrows */

article.keyFeatures .featureSliderArrow {
    position: absolute;
    top: 78px;
    z-index: 5;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 13%);
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    opacity: 0.78;
    transform: translateY(-50%);
    transition:
        opacity 300ms ease,
        background-color 300ms ease,
        transform 350ms var(--feature-sync-easing);
}

article.keyFeatures .featureSliderArrow.prev {
    left: 0;
}

article.keyFeatures .featureSliderArrow.next {
    right: 0;
}

article.keyFeatures .featureSliderArrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #222;
    border-right: 2px solid #222;
}

article.keyFeatures .featureSliderArrow.prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

article.keyFeatures .featureSliderArrow.next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

article.keyFeatures .featureSliderArrow:hover,
article.keyFeatures .featureSliderArrow:focus-visible {
    background-color: rgb(255 255 255 / 90%);
    opacity: 1;
    outline: none;
    transform: translateY(-50%) scale(1.08);
}

/* Feature image preview */

article.keyFeatures .deviceFeaturePreview {
    position: relative;
    isolation: isolate;
    display: none;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 1600 / 821;
    margin: -30px auto 30px;
    overflow: hidden;
}

article.keyFeatures .deviceFeatureFrame {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    pointer-events: none;
    transform: translateY(14px) scale(0.985);
    transition:
        visibility 0s linear var(--feature-sync-duration),
        opacity var(--feature-sync-duration) var(--feature-sync-easing),
        filter var(--feature-sync-duration) var(--feature-sync-easing),
        transform var(--feature-sync-duration) var(--feature-sync-easing);
    will-change: opacity, filter, transform;
}

article.keyFeatures .deviceFeatureFrame.is-active,
article.keyFeatures .deviceFeatureFrame.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

/* Responsive */

@media (max-width: 767px) {
    article.keyFeatures {
        min-height: 860px;
    }

    article.keyFeatures .wrapper {
        display: block;
        min-height: 0;
        padding: 30px 20px;
    }

    article.keyFeatures .column.left,
    article.keyFeatures .column.right {
        width: 100%;
        max-width: none;
    }

    article.keyFeatures .column.right {
        min-height: 340px;
        margin-left: 0;
    }

    article.keyFeatures .wrapper h2 {
        margin: 0;
        text-align: center;
    }

    article.keyFeatures .column.left ul {
        max-width: none;
        margin-left: 0;
        padding: 20px 0 25px 20px;
    }

    article.keyFeatures .deviceFeaturePreview {
        margin: 22px auto 30px;
    }
}

@media (max-width: 640px) {
    article.keyFeatures .featureIconsSlider {
        width: 100%;
        padding: 20px 44px 40px;
    }

    article.keyFeatures .featureSliderViewport {
        height: 142px;
    }

    article.keyFeatures .featureIconCard {
        width: 126px;
    }

    article.keyFeatures .featureIconCard.is-prev {
        transform: translateX(calc(-50% - 116px)) scale(0.7);
    }

    article.keyFeatures .featureIconCard.is-next {
        transform: translateX(calc(-50% + 116px)) scale(0.7);
    }

    article.keyFeatures .featureSliderArrow {
        top: 74px;
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.keyFeatures .featureIconsSlider,
    article.keyFeatures .featureIconCard,
    article.keyFeatures .featureSliderArrow,
    article.keyFeatures .deviceFeatureFrame,
    article.keyFeatures .column.left ul li {
        transition: none;
    }

    article.keyFeatures .featureIconsSlider {
        opacity: 1;
        filter: none;
        transform: none;
    }

    article.keyFeatures .column.left ul li {
        opacity: 1;
        filter: none;
        transform: none;
    }

    article.keyFeatures .deviceFeatureFrame {
        filter: none;
        transform: none;
    }
}

article.keyFeatures .column.left ul > li,
article.keyFeatures .column.left ul.is-visible > li {
    visibility: visible;
    opacity: 0.5 !important;
    filter: none !important;
    transform: none !important;
    transition: opacity 0.28s ease !important;
    transition-delay: 0s !important;
}

article.keyFeatures .column.left ul > li.is-current-feature,
article.keyFeatures .column.left ul.is-visible > li.is-current-feature {
    opacity: 1 !important;
}

article.keyFeatures .deviceFeaturePreview {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    article.keyFeatures .column.left ul > li {
        transition: none !important;
    }
}

/* /Key features */


/* Dock */

article.dock {
    position: relative;
    top: 0;
	z-index: 5;    
    display: block;
    width: 100%;
    min-height: 640px;
    height: auto;
    overflow: hidden;
    background-color: #686664;
    isolation: isolate;
}

article.dock.is-visible button.plus {
    display: none;
}

article.dock::before {
    content: "";
    position: absolute;
    top: 0;
    inset: 0;
    top: -15%;
    z-index: -1;
    background-image: url('../img/products/dock-hr.webp');
    background-position: top center;
    background-size: auto 120%;
    background-repeat: no-repeat;
    transform: scale(1);
    transform-origin: top center;
    transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

article.dock.zoomIn::before {
    transform: scale(1.564);
    background-size: auto 115%;
    background-position: 50% 165%;
}
.fadeBorders {
    position: absolute;
    display: block;
    width: 100%;
    min-height: 640px;
    background: transparent;
}
.fadeBorders:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background: linear-gradient(rgb(41 41 41 / 40%), rgba(255, 255, 255, 0));
    border: none;
}
.fadeBorders:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(81 81 81 / 50%));
    border: none;
}

article.dock .dockContent {
    position: relative;
    display: block;
    width: 100%;
    min-height: 176px;
    margin-top: 40px;
}

article.dock h2.slogan {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 600px;
    margin: 0;
    padding: 0;
    font-size: 42px;
    font-weight: 400;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

article.dock h2.slogan > span {
    display: block;
    min-height: 42px;
    margin-bottom: 10px;
    color: #fff;
    line-height: 42px;
}

article.dock h2.slogan > span:last-child {
    margin-bottom: 0;
}

article.dock h2.slogan .word {
    display: inline-block;
    margin-right: 0.22em;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px) scale(0.97);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--word-index) * 110ms);
    will-change: opacity, filter, transform;
}

article.dock.is-visible:not(.is-open) h2.slogan .word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.dock.is-open h2.slogan {
    visibility: hidden;
    transition-delay: 1.15s;
}

article.dock.is-open h2.slogan .word {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-28px) scale(0.98);
    transition-delay: calc(var(--reverse-index) * 90ms);
}

article.dock .advertText {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    visibility: hidden;
    width: calc(100% - 80px);
    max-width: 480px;
    margin: 0;
    padding: 18px 24px 24px;
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / 42%);
    border-bottom: none;
    border-radius: 10px;
    background-color: rgb(255 255 255 / 78%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgb(0 0 0 / 10%);
    text-shadow: 0 1px 2px rgb(255 255 255 / 80%);
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
    transform: translateY(130%) scale(0.97);
    transition: visibility 0s linear 1.2s, opacity 1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article.dock.is-open .advertText {
    visibility: visible;
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0.55s;
}

article.dock .advertText h3 {
    margin: 5px 0 10px;
    padding: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.25em;
}

article.dock .advertText p {
    margin: 0 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5em;
}

article.dock .advertText p:last-child {
    margin-bottom: 0;
}

article.dock button.plus, 
article.display button.plus, 
article.thunderbolt button.plus,
article.compatibility button.plus {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 24px 0 0 4px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgb(129 129 129 / 42%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 34px;
    font-weight: 300;
    line-height: 32px;
    cursor: pointer;
    visibility: visible;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(20px) scale(0.96);
    transition: visibility 0s linear 0s, opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
    transition-delay: 0s, calc(var(--words-duration, 900ms) + 250ms), calc(var(--words-duration, 900ms) + 250ms), calc(var(--words-duration, 900ms) + 250ms), 0s, 0s, 0s;
    will-change: opacity, filter, transform;
}

article.display button.plus,
article.thunderbolt button.plus {
    background-color: rgb(255 255 255 / 42%);
    border: 3px solid #000;
    color: #000;
}

article.dock.is-visible:not(.is-open) button.plus {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.display button.plus:hover,
article.display button.plus:focus-visible,
article.thunderbolt button.plus:hover,
article.thunderbolt button.plus:focus-visible,
article.dock button.plus:hover,
article.dock button.plus:focus-visible,
article.compatibility button.plus:hover,
article.compatibility button.plus:focus-visible {
    border-color: #128abf;
    background-color: #128abf;
    color: #fff;
    outline: none;
}

article.dock.is-open button.plus {
    visibility: hidden;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transform: translateY(-14px) scale(0.88) rotate(45deg);
    transition-delay: 0.65s, 0s, 0s, 0s, 0s, 0s, 0s;
}

@media (max-width: 640px) {
    article.dock {
        min-height: 540px;
    }

    article.dock::before {
        background-size: auto 100%;
    }

    article.dock.zoomIn::before {
        transform: scale(1.08);
    }

    article.dock .dockContent {
        min-height: 144px;
        margin-top: 28px;
    }

    article.dock h2.slogan {
        margin-right: 20px;
        margin-left: 20px;
        font-size: 32px;
    }

    article.dock h2.slogan > span {
        min-height: 36px;
        margin-bottom: 6px;
        line-height: 36px;
    }

    article.dock .advertText {
        left: 20px;
        width: calc(100% - 40px);
        padding: 16px 20px;
    }

    article.dock button.plus {
        width: 46px;
        height: 46px;
        margin-top: 20px;
        margin-left: 20px;
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.dock::before,
    article.dock h2.slogan,
    article.dock h2.slogan .word,
    article.dock .advertText,
    article.dock button.plus {
        transition: none;
    }

    article.dock.is-visible:not(.is-open) h2.slogan .word,
    article.dock.is-visible:not(.is-open) button.plus {
        opacity: 1;
        filter: none;
        transform: none;
    }

    article.dock.is-open .advertText {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* /Dock */

/* Built-In */

article.builtIn {
    --built-in-heading-delay: 0.55s;
    --built-in-copy-step: 0.65s;
    --built-in-final-delay: 3.35s;

    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    min-height: 640px;
    height: auto;
    padding-top: 10px;
    overflow: hidden;
    background-color: #000;
    isolation: isolate;
    vertical-align: top;
}

article.builtIn::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(58 101 129 / 98%) 0%, rgba(0, 0, 0, 0.3) 54%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    filter: brightness(0.72) saturate(1.08);
    transform: translate3d(-3%, -2%, 0) scale(1.08);
    transform-origin: center;
    animation: builtInWaveMovement 18s ease-in-out infinite alternate;
    animation-play-state: paused;
    transition:
        opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, transform;
}

article.builtIn.is-visible::before {
    opacity: 0.72;
    filter: brightness(0.82) saturate(1.12);
    animation-play-state: running;
}

@keyframes builtInWaveMovement {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.08);
    }

    50% {
        transform: translate3d(2%, 1%, 0) scale(1.12);
    }

    100% {
        transform: translate3d(-1%, 4%, 0) scale(1.09);
    }
}

article.builtIn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -3%;
    z-index: 2;
    display: block;
    width: min(62vw, 900px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    background-image: url('../img/products/built-in.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 25%) 16%, #000 38%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 25%) 16%, #000 38%, #000 100%);
    opacity: 0;
    filter: blur(12px) brightness(0.3);
    transform: translate3d(100px, -46%, 0) scale(0.94);
    transform-origin: right center;
    transition:
        opacity 2s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
        filter 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
        transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
    will-change: opacity, filter, transform;
}

article.builtIn.is-visible::after {
    opacity: 0.94;
    filter: blur(0) brightness(1);
    transform: translate3d(0, -50%, 0) scale(1);
}

@media (min-width: 1380px) and (max-width:1550px) {
    section.itemCard article.builtIn {
        min-height: 640px;
        height: auto;
    }
    section.itemCard article.builtIn::after {
        left: 50%;
        bottom: 20px;
    }
}
@media (min-width: 1551px) {
    section.itemCard article.builtIn::after {
        left: 50%;        
        bottom: 20px;
    }
}


article.builtIn .wrapper,
article.keyFeatures .wrapper,
.fadeBorders .wrapper {
    position: relative;
    z-index: 3;
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
}

article.builtIn .wrapper {
    color: #fff;
}

article.builtIn h2 {
    display: block;
    margin: 0;
    padding: 40px 0 0;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2em;
}

article.builtIn .wrapper h3 {
    margin: 24px 0 0;
    padding: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25em;
}

article.builtIn .wrapper p.large {
    max-width: 480px;
    margin: 28px 0 0;
    padding: 0;
    color: rgb(255 255 255 / 88%);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65em;
}

article.builtIn .wrapper p.smaller {
    max-width: 480px;
    margin: 20px 0 0;
    padding: 0;
    color: rgb(255 255 255 / 64%);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65em;
}

article.builtIn h2,
article.builtIn h3,
article.builtIn p {
    text-shadow: 0 2px 18px rgb(0 0 0 / 75%);
}

article.builtIn::before {
    inset: -5%;
    background-position: 42% 30%;
    opacity: 0;
}

article.builtIn.is-visible::before {
    opacity: 0.55;
}

article.builtIn::after {
    top: auto;
    left: calc(50% - 150px);
    bottom: 20px;
    width: 115vw;
    max-width: 620px;
    opacity: 0;
    transform: translate3d(-70px, 30px, 0) scale(0.84);
}

article.builtIn.is-visible::after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

article.builtIn .wrapper {
    z-index: 4;
}

/* Начальное состояние элементов */

article.builtIn .wrapper > h3 {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 28px;
    font-weight: 300;
}

article.builtIn .wrapper > h2,
article.builtIn .wrapper > h3,
article.builtIn .wrapper > p.large,
article.builtIn .wrapper > p.smaller {
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 0 100% 0);
    transform: translateY(28px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, clip-path, transform;
}

/* Проявление элементов */

article.builtIn.is-visible .wrapper > h2,
article.builtIn.is-visible .wrapper > h3,
article.builtIn.is-visible .wrapper > p.large,
article.builtIn.is-visible .wrapper > p.smaller {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

/* Последовательность */

article.builtIn.is-visible .wrapper > h2 {
    transition-delay: 0s;
}

article.builtIn.is-visible .wrapper > h3 {
    margin-top: 15px;
    transition-delay: var(--built-in-heading-delay);
}

article.builtIn.is-visible .wrapper > p.large {
    transition-delay: calc(
        var(--built-in-heading-delay) +
        var(--built-in-copy-step)
    );
}

article.builtIn.is-visible .wrapper > p.smaller {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 17px;
    transition-delay: calc(
        var(--built-in-heading-delay) +
        var(--built-in-copy-step) +
        var(--built-in-copy-step)
    );
}

/* Built-In slogan */

article.builtIn .sloganBox {
    position: relative;
    left: 0;
    z-index: 4;
    display: block;
    width: fit-content;
    max-width: 1000px;
    margin: 32px auto 24px 0;
    color: #fff;
    pointer-events: none;
}

article.builtIn .sloganBox h3 {
    display: block;
    max-width: 480px;
    margin: 0 0 20px;
    padding: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.15em;
    text-shadow: 0 2px 18px rgb(0 0 0 / 75%);
    overflow: visible;
}

article.builtIn .sloganBox h3 .word {
    display: block;
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 0 100% 0);
    transform: translateY(24px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, clip-path, transform;
}

article.builtIn.is-visible .sloganBox h3 .word {
	height: 36px;
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    overflow: visible;
}

article.builtIn.is-visible .sloganBox h3 .word.one {
    transition-delay: 3.15s;
}

article.builtIn.is-visible .sloganBox h3 .word.two {
    transition-delay: 3.75s;
}

/* Capacities */

article.builtIn .capacities {
    display: block;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 780px;
    margin-top: 14px;
}

article.builtIn .capacity {
    display: inline-block;
    align-items: center;
    width: 245px;
    min-height: 54px;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(20px);
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article.builtIn .sloganBox p.notice {
    max-width: 480px;
    margin: 18px 0 0;
    padding: 0;
    color: rgb(255 255 255 / 52%);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4em;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(20px);
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article.builtIn.is-visible .capacity {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

article.builtIn.is-visible .capacity.one {
    transition-delay: 2.75s;
}

article.builtIn.is-visible .capacity.two {
    transition-delay: 3.05s;
}

/* Up to 8TB */

article.builtIn.is-visible .capacity.three {
    transition-delay: var(--built-in-final-delay);
}

article.builtIn.is-visible .sloganBox p.notice {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition-delay: var(--built-in-final-delay);
}

article.builtIn .capacity i {
    position: relative;
    display: inline-block;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin-right: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

article.builtIn .capacity i::after {
    content: "";
    position: absolute;
    top: 5px;
    right: -10px;
    display: block;
    width: 1px;
    height: 44px;
    background-color: rgb(255 255 255 / 42%);
}

article.builtIn .capacityText {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    width: 162px;
    min-height: 54px;
    padding-left: 4px;
    vertical-align: top;
}

article.builtIn.is-visible .capacity.two {
    width: 250px;
    margin-right: 20px;
}

article.builtIn.is-visible .capacity.two .capacityText {
    width: 170px;
    padding-top: 11px;
    letter-spacing: -0.02em;
}

article.builtIn .capacity.three .capacityText b {
    display: block;
    padding-top: 12px;
}

article.builtIn .capacityText b {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25em;
    text-shadow: 0 2px 14px rgb(0 0 0 / 80%);
}

article.builtIn .capacityText small {
    display: block;
    margin-top: 3px;
    color: rgb(255 255 255 / 65%);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.25em;
}

/* Укажи реальные пути к иконкам */

article.builtIn .capacity i.transferSpeed {
    background-image: url('../img/products/svg/built-in-icons.svg');
    background-size: auto 54px;
    background-position: 0 0;
    background-repeat: no-repeat;
}

article.builtIn .capacity i.pcie {
    background-image: url('../img/products/svg/built-in-icons.svg');
    background-size: auto 54px;
    background-position: -108px 0;
    background-repeat: no-repeat;
}

article.builtIn .capacity i.tb {
    background-image: url('../img/products/svg/built-in-icons.svg');
    background-size: auto 54px;
    background-position: -218px 0;
    background-repeat: no-repeat;
}

@media (max-width: 760px) {
    article.builtIn {
        height: auto;
        min-height: calc(100svh - 70px);
    }

    article.builtIn .wrapper {
        width: calc(100% - 40px);
    }

    article.builtIn h2 {
        padding-top: 36px;
        font-size: 31px;
    }

    article.builtIn .wrapper h3 {
        margin-top: 20px;
        font-size: 25px;
    }

    article.builtIn .wrapper p.large {
        font-size: 16px;
    }

    article.builtIn .wrapper p.smaller {
        font-size: 14px;
    }
    article.builtIn .sloganBox {
        width: calc(100% - 40px);
        margin-top: 28px;
    }

    article.builtIn .sloganBox h3 {
        font-size: 27px;
    }

    article.builtIn .capacities {
        gap: 10px;
        margin-top: 20px;
    }

    article.builtIn .capacity {
        min-height: 48px;
        margin: 0 20px 30px 0;
    }

    article.builtIn .capacity i {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        margin-right: 15px;
    }

    article.builtIn .capacity i::after {
        top: 4px;
        right: -8px;
        height: 40px;
    }

    article.builtIn .capacityText {
        min-height: 48px;
    }

    article.builtIn .capacityText b {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.builtIn h2,
    article.builtIn h3,
    article.builtIn p.large,
    article.builtIn p.smaller {
        opacity: 1;
        filter: none;
        clip-path: none;
        transform: none;
        transition: none;
    }
    article.builtIn::before {
        animation: none;
    }

    article.builtIn::before,
    article.builtIn::after {
        transition: none;
    }

    article.builtIn.is-visible::before {
        opacity: 0.72;
        transform: scale(1.08);
    }

    article.builtIn.is-visible::after {
        opacity: 0.94;
        filter: none;
        transform: translate3d(0, -50%, 0);
    }
    article.builtIn .sloganBox h3 .word,
    article.builtIn .capacity,
    article.builtIn .sloganBox p.notice {
        opacity: 1;
        filter: none;
        clip-path: none;
        transform: none;
        transition: none;
    }   
}

/* Display */

/* /Dual Display */

article.display {
    --display-accent: #128abf;
    --display-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --display-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --display-mac-image: url('../img/products/mac-dual-2k.webp');
    --display-windows-image: url('../img/products/windows-triple-4k.webp');
    --display-mac-preview: url('../img/products/mac-studio.webp');
    --display-windows-preview: url('../img/products/windows-screen-5k-preview.webp');
    --display-mac-compatibility: url('../img/products/mac-os-15.webp');
    --display-windows-compatibility: url('../img/products/windows-11.webp');

    position: relative;
    display: block;
    width: 100%;
    min-height: 620px;
    height: clamp(620px, calc(100svh - 90px), 920px);
    overflow: hidden;
    background: #d9d9d9;
    isolation: isolate;
    contain: layout paint;
}

article.display,
article.display *,
article.display *::before,
article.display *::after {
    box-sizing: border-box;
}

article.display .wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    min-height: inherit;
    height: 100%;
    margin: 0;
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    isolation: isolate;
}

/* --------------------------------------------------------------------------
   Background frames
   -------------------------------------------------------------------------- */

article.display .displayFrames {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #efefef;
    pointer-events: none;
    transform: translateZ(0);
}

article.display .displayFrames::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, transparent 38%),
        linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, transparent 35%, rgb(0 0 0 / 8%) 100%);
    pointer-events: none;
}

article.display > .displayFrames {
    position: absolute;
    inset: 0;
}

article.display .displayFrame {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    /*
     * Фон теперь зависит от высоты блока,
     * а не от постоянно пересчитываемого viewport.
     */
    background-size: auto 100%;

    opacity: 0;
    filter: brightness(0.94) saturate(0.96);

    /*
     * В исходном состоянии масштаб не меняется.
     */
    transform: translateZ(0) scale(1);
    transform-origin: 50% 50%;
    backface-visibility: hidden;

    transition:
        opacity 1s var(--display-ease),
        filter 1.4s var(--display-ease);

    will-change: opacity, filter;
}

article.display .displayFrame.macFrame {
    background-image: var(--display-mac-image);
    background-position: 50% 50%;
}

article.display .displayFrame.windowsFrame {
    background-image: var(--display-windows-image);
    background-position: 50% 50%;
}

article.display .displayFrame.is-active {
    z-index: 2;
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateZ(0) scale(1);
}

article.display.zoomIn .displayFrame.is-active {
    transform: translateZ(0) scale(1.035);
    transition:
        opacity 1s var(--display-ease),
        filter 1.4s var(--display-ease),
        transform 3.2s var(--display-ease);
    will-change: opacity, filter, transform;
}

article.display .displayPlatformSwitcher {
    transform: translate3d(-50%, 14px, 0) scale(0.96);
    backface-visibility: hidden;
}

article.display.is-visible:not(.is-open) .displayPlatformSwitcher,
section.itemCard article.display.is-open .displayPlatformSwitcher {
    transform: translate3d(-50%, 0, 0) scale(1);
}

/* --------------------------------------------------------------------------
   Slogan
   -------------------------------------------------------------------------- */

article.display h2.slogan {
    position: relative;
    z-index: 4;
    display: block;
    width: min(520px, calc(100% - 40px));
    margin: 0;
    padding: 0;
    color: #111;
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.035em;
    text-shadow: 0 1px 1px rgb(255 255 255 / 32%);
    visibility: visible;
    transition:
        visibility 0s linear 0s,
        opacity 0.32s ease,
        filter 0.32s ease,
        transform 0.42s var(--display-ease);
}

article.display h2.slogan .word {
    display: block;
    width: max-content;
    max-width: 100%;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px) scale(0.97);
    transition:
        opacity 0.8s var(--display-ease),
        filter 0.8s var(--display-ease),
        transform 0.85s var(--display-ease-out);
    will-change: opacity, filter, transform;
}

article.display h2.slogan .word.one {
    margin: 0 0 12px 4px;
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing: -0.025em;
    transition-delay: 0s;
}

article.display h2.slogan .word.two {
    margin: 0 0 12px;
    font-size: clamp(48px, 5.2vw, 70px);
    transition-delay: 0.2s;
}

article.display h2.slogan .word.three {
    margin: 0 0 0 2px;
    font-size: clamp(32px, 3.35vw, 46px);
    letter-spacing: -0.025em;
    transition-delay: 0.4s;
}

article.display.is-windows h2.slogan {
    width: min(600px, calc(100% - 40px));
}

article.display.is-windows h2.slogan .word.two {
    font-size: clamp(46px, 5vw, 68px);
}

article.display.is-windows h2.slogan .word.three {
    font-size: clamp(28px, 3vw, 42px);
}

article.display.is-visible:not(.is-open) h2.slogan .word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.display.is-frame-switching h2.slogan {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px);
}

article.display.is-open h2.slogan {
    visibility: hidden;
    transition-delay: 1s, 0s, 0s, 0s;
}

article.display.is-open h2.slogan .word {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-26px) scale(0.98);
}

article.display.is-open h2.slogan .word.three {
    transition-delay: 0s;
}

article.display.is-open h2.slogan .word.two {
    transition-delay: 0.14s;
}

article.display.is-open h2.slogan .word.one {
    transition-delay: 0.28s;
}

/* --------------------------------------------------------------------------
   Plus button
   -------------------------------------------------------------------------- */

article.display button.plus {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 22px 0 0 4px;
    padding: 0 0 3px;
    border: 2px solid #111;
    border-radius: 50%;
    background: rgb(255 255 255 / 42%);
    color: #111;
    font: inherit;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(18px) scale(0.94);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    transition:
        visibility 0s linear 0s,
        opacity 0.75s var(--display-ease),
        filter 0.75s var(--display-ease),
        transform 0.75s var(--display-ease),
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
    will-change: opacity, filter, transform;
}

article.display.is-visible:not(.is-open) button.plus {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 0s, 0.82s, 0.82s, 0.82s, 0s, 0s, 0s;
}

article.display button.plus:hover,
article.display button.plus:focus-visible {
    border-color: var(--display-accent);
    background: var(--display-accent);
    color: #fff;
    outline: none;
}

article.display button.plus:focus-visible {
    box-shadow: 0 0 0 4px rgb(18 138 191 / 22%);
}

article.display.is-open button.plus {
    visibility: hidden;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transform: translateY(-14px) scale(0.88) rotate(45deg);
    transition-delay: 0.65s, 0s, 0s, 0s, 0s, 0s, 0s;
}

/* --------------------------------------------------------------------------
   Mac / Windows switcher
   -------------------------------------------------------------------------- */

article.display .displayPlatformSwitcher {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 64px;
    z-index: 8;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgb(255 255 255 / 56%);
    border-radius: 100px;
    background: rgb(244 246 249 / 56%);
    box-shadow:
        0 14px 34px rgb(0 0 0 / 15%),
        inset 0 1px 0 rgb(255 255 255 / 78%);
    opacity: 0;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transform: translate(-50%, 14px) scale(0.96);
    transition:
        opacity 0.65s var(--display-ease),
        transform 0.75s var(--display-ease),
        visibility 0s linear 0s;
}

article.display.is-visible:not(.is-open) .displayPlatformSwitcher {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0.65s, 0.65s, 0s;
}

section.itemCard article.display.is-open .displayPlatformSwitcher {
    top: auto;
    bottom: 64px;
    z-index: 10;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0.45s, 0.45s, 0s;
}

article.display .displayPlatformSwitcher button {
    min-width: 100px;
    height: 38px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: rgb(0 0 0 / 58%);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s var(--display-ease);
}

article.display .displayPlatformSwitcher button:hover {
    color: #000;
}

article.display .displayPlatformSwitcher button.is-active {
    background: rgb(255 255 255 / 94%);
    box-shadow:
        0 5px 14px rgb(0 0 0 / 14%),
        inset 0 0 0 1px rgb(0 0 0 / 5%);
    color: #000;
    transform: scale(1.015);
}

article.display .displayPlatformSwitcher button:focus-visible {
    outline: 2px solid var(--display-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Opened details
   -------------------------------------------------------------------------- */

article.display .previewText {
    position: absolute;
    top: clamp(24px, 4vw, 48px);
    left: 50%;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(230px, 0.78fr);
    gap: 28px;
    visibility: hidden;
    width: min(860px, calc(100% - 80px));
    max-height: calc(100% - 80px);
    padding: 28px;
    overflow: auto;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 16px;
    background: rgb(236 238 241 / 72%);
    box-shadow:
        0 28px 80px rgb(0 0 0 / 26%),
        inset 0 1px 0 rgb(255 255 255 / 70%);
    opacity: 0;
    filter: blur(11px);
    pointer-events: none;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    transform: translate(-50%, 110%) scale(0.97);
    transition:
        visibility 0s linear 1.15s,
        opacity 0.9s var(--display-ease),
        filter 0.9s var(--display-ease),
        transform 1.15s var(--display-ease-out);
    scrollbar-width: thin;
    will-change: opacity, filter, transform;
}

article.display.is-open .previewText,
article.display.display.is-visible.is-windows.is-open.zoomIn .previewText {
    position: absolute;
    top: 60px;
    visibility: visible;
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0.5s;
}

article.display .previewText > .performance,
article.display .previewText > .compatibility {
    min-width: 0;
    transition:
        opacity 0.42s var(--display-ease),
        filter 0.42s var(--display-ease),
        transform 0.42s var(--display-ease);
}

article.display .performance {
    background: transparent;
    background-image: none;
    color: #111;
}

article.display .performance h2 {
    margin: 0 0 14px;
    padding: 0;
    color: #111;
    font-size: clamp(21px, 2.2vw, 27px);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: -0.025em;
}

article.display .performance .large {
    color: rgb(0 0 0 / 78%);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.58;
}

article.display .performance::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #cfd2d5;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 12px 28px rgb(0 0 0 / 14%);
}

article.display.is-mac .performance::after {
    background-image: var(--display-mac-preview);
    background-size: 90% auto;
    background-position: 50% 15px;
}

article.display.is-windows .performance::after {
    background-image: var(--display-windows-preview);
    background-size: cover;
    background-position: 50% 50%;
}

article.display .compatibility {
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0 20px 20px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 12px;
    background: rgb(255 255 255 / 40%);
    color: #111;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%);
}

article.display .compatibility::before {
    content: "";
    display: block;
    width: calc(100% + 40px);
    height: 180px;
    margin: 0 0 0 -20px;
    background-color: #cfd2d5;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

article.display.is-mac .compatibility::before {
    background-image: var(--display-mac-compatibility);
}

article.display.is-windows .compatibility::before {
    background-image: var(--display-windows-compatibility);
}

article.display .compatibility h4 {
    margin: 18px 0 11px;
    padding: 0;
    color: #111;
    font-size: 18px;
    font-weight: 400;
}

article.display .compatibility ul {
    margin: 0;
    padding: 0 0 0 18px;
    color: #111;
}

article.display .compatibility li {
    margin: 0 0 8px;
    color: rgb(0 0 0 / 76%);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42;
}

article.display button.viewCompatibility {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    padding: 9px 16px;
    border: 1px solid rgb(0 0 0 / 28%);
    border-radius: 100px;
    background: rgb(255 255 255 / 34%);
    color: #555;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s var(--display-ease);
}

article.display button.viewCompatibility:hover,
article.display button.viewCompatibility:focus-visible {
    border-color: var(--display-accent);
    background: rgb(255 255 255 / 70%);
    color: var(--display-accent);
    outline: none;
    transform: translateY(-1px);
}

article.display button.viewCompatibility:disabled {
    cursor: default;
    opacity: 0.5;
}

article.display .previewText.switching > .performance,
article.display .previewText.switching > .compatibility {
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    transform: translateY(-15px);
}

article.display .previewText > .performance.hidden,
article.display .previewText > .compatibility.hidden,
article.display .previewText > .table.hidden {
    display: none;
}

/* --------------------------------------------------------------------------
   Compatibility table
   -------------------------------------------------------------------------- */

article.display .previewText > .table {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    background-color: #111;
    background-image: url('../img/products/vectornate-resolution-compatibility-matrix-2928x1200.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(25px) scale(0.98);
    transition:
        opacity 0.72s var(--display-ease),
        filter 0.72s var(--display-ease),
        transform 0.82s var(--display-ease-out);
}

article.display .previewText > .table.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.display.is-open .previewText.show-table {
    width: min(940px, calc(100% - 80px));
    padding: 20px;
    background: rgb(5 5 5);
}

@media (max-width: 768px) {
    article.display.is-open .displayPlatformSwitcher {
        top: 34px;
    }

    article.display.is-open .previewText.show-table {
        padding: 70px 14px 14px;
    }
}

@media (max-width: 480px) {
    article.display.is-open .displayPlatformSwitcher {
        top: 28px;
    }

    article.display.is-open .displayPlatformSwitcher button {
        min-width: 82px;
        height: 36px;
        padding-right: 15px;
        padding-left: 15px;
        font-size: 13px;
    }

    article.display.is-open .previewText.show-table {
        padding-top: 66px;
    }
}

article.display .table .bottom.panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 36px 20px 18px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 90%) 64%);
}

article.display .table .bottom.panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 9px 17px;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 100px;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        opacity 0.3s ease;
}

article.display .table .bottom.panel button.back {
    padding-left: 28px;
    background-image: url('../img/products/svg/back.svg');
    background-position: 9px center;
    background-repeat: no-repeat;
    background-size: 14px auto;
}

article.display .table .bottom.panel button:hover,
article.display .table .bottom.panel button:focus-visible {
    border-color: var(--display-accent);
    background-color: var(--display-accent);
    outline: none;
}

article.display .table .bottom.panel button:disabled {
    cursor: default;
    opacity: 0.45;
}

article.display .table .bottom.panel button.pdf em {
    font-style: normal;
}

article.display .table .bottom.panel button.pdf::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: 9px;
    background-image: url('../img/products/svg/round-url.svg');
    background-position: center center;
    background-size: 20px auto;
    background-repeat: no-repeat;
    transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
    article.display {
        min-height: 660px;
        height: max(660px, calc(100svh - 76px));
    }

    article.display .wrapper {
        padding: 32px;
    }

    article.display .displayFrame {
        background-position: 58% 50%;
    }

    section.itemCard article.display .previewText,
    section.itemCard article.display.display.is-visible.is-windows.is-open.zoomIn .previewText {
        position: absolute;
        left: 20px;
        right: 20px;
        width: calc(100% - 56px);
        min-height: auto;
        height: fit-content;
        max-height: calc(100% - 100px);
        margin: 0 auto;
        transform: none;
    }
}

@media (max-width: 768px) {
    article.display {
        min-height: 760px;
        height: max(760px, calc(100svh - 70px));
    }

    article.display .wrapper {
        padding: 26px 20px;
    }

    section.itemCard article.display .displayFrame {
        background-position: center center;
        background-size: auto 64%;
    }

    article.display h2.slogan {
        width: calc(100% - 20px);
    }

    article.display h2.slogan .word.two,
    article.display.is-windows h2.slogan .word.two {
        font-size: clamp(42px, 10vw, 58px);
    }

    article.display h2.slogan .word.three,
    article.display.is-windows h2.slogan .word.three {
        font-size: clamp(28px, 7vw, 38px);
    }

    article.display .previewText {
        top: 20px;
        grid-template-columns: 1fr;
        gap: 22px;
        width: calc(100% - 32px);
        max-height: calc(100% - 40px);
        padding: 20px;
    }

    article.display .compatibility::before {
        height: clamp(180px, 42vw, 290px);
    }

    article.display.is-open .previewText.show-table {
        width: calc(100% - 32px);
        padding: 14px;
    }

    article.display .previewText > .table {
        min-height: 340px;
        overflow: auto;
        background-position: top left;
        background-size: auto 270px;
    }
}

@media (min-width:767px) and (max-width:768px) {
    section.itemCard article.display .displayFrame.macFrame {
        background-image: var(--display-mac-image);
        background-position: 50% bottom;
        background-size: auto 106vh;
        background-color: #f0f0f0;
    }
    section.itemCard article.display .displayFrame.windowsFrame {
        background-image: var(--display-windows-image);
        background-position: 50% calc(50% + 20px);
        background-color: #f0f0f0;
    }
}

@media (max-width: 550px) {
    article.display {
        min-height: 720px;
        height: 720px;
    }

    body section.itemCard article.display .displayFrame {
        background-position: center center;
        background-size: auto 50%;
    }

    article.display .displayFrames::after {
        background:
            linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, transparent 42%, rgb(0 0 0 / 8%) 100%);
    }

    article.display h2.slogan .word.one {
        margin-bottom: 9px;
        font-size: 23px;
    }

    article.display h2.slogan .word.two,
    article.display.is-windows h2.slogan .word.two {
        margin-bottom: 10px;
        font-size: clamp(38px, 11.5vw, 50px);
    }

    article.display h2.slogan .word.three,
    article.display.is-windows h2.slogan .word.three {
        font-size: clamp(26px, 8vw, 34px);
    }

    article.display button.plus {
        width: 46px;
        height: 46px;
        margin-top: 18px;
        font-size: 27px;
    }

    article.display .displayPlatformSwitcher {
        bottom: 14px;
    }

    article.display .displayPlatformSwitcher button {
        min-width: 82px;
        height: 36px;
        padding: 0 15px;
        font-size: 13px;
    }

    article.display .previewText {
        width: calc(100% - 24px);
        padding: 16px;
        border-radius: 13px;
    }

    article.display .performance h2 {
        margin-bottom: 10px;
        font-size: 21px;
        line-height: 1.5em;
    }

    article.display .performance .large {
        font-size: 14px;
        line-height: 1.5;
    }

    article.display .compatibility {
        padding-right: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
    }

    article.display .compatibility::before {
        width: calc(100% + 32px);
        margin-left: -16px;
    }

    article.display.is-open .previewText.show-table {
        width: calc(100% - 24px);
    }

    section.itemCard article.display .displayPlatformSwitcher {
        bottom: 64px;
    }

    article.display .table .bottom.panel {
        gap: 8px;
        padding: 34px 12px 12px;
    }

    article.display .table .bottom.panel button {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 11px;
    }

    article.display .table .bottom.panel button.back {
        padding-left: 25px;
        background-position-x: 7px;
    }
    section.itemCard article.display .previewText, 
    section.itemCard article.display.display.is-visible.is-windows.is-open.zoomIn .previewText {
        top: 20px;
        min-height: fit-content;
        height: fit-content;
    }
    section.itemCard article.display div.previewText {
        max-height: 800px;
        min-height: 800px;
    }
}

@media (max-width: 360px) {
    article.display .wrapper {
        padding-right: 16px;
        padding-left: 16px;
    }

    article.display h2.slogan .word.two,
    article.display.is-windows h2.slogan .word.two {
        font-size: 38px;
    }

    article.display h2.slogan .word.three,
    article.display.is-windows h2.slogan .word.three {
        font-size: 26px;
    }

    article.display .displayPlatformSwitcher button {
        min-width: 76px;
        padding: 0 12px;
    }

    article.display .table .bottom.panel button.pdf em {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    article.display .displayFrame,
    article.display h2.slogan,
    article.display h2.slogan .word,
    article.display button.plus,
    article.display .displayPlatformSwitcher,
    article.display .displayPlatformSwitcher button,
    article.display .previewText,
    article.display .previewText > .performance,
    article.display .previewText > .compatibility,
    article.display .previewText > .table {
        transition: none;
    }

    article.display.is-visible:not(.is-open) h2.slogan .word,
    article.display.is-visible:not(.is-open) button.plus,
    article.display.is-visible:not(.is-open) .displayPlatformSwitcher {
        opacity: 1;
        filter: none;
    }

    article.display.is-visible:not(.is-open) h2.slogan .word,
    article.display.is-visible:not(.is-open) button.plus {
        transform: none;
    }

    article.display.is-visible:not(.is-open) .displayPlatformSwitcher {
        transform: translate(-50%, 0);
    }

    article.display.is-open .previewText {
        opacity: 1;
        filter: none;
        transform: translate(-50%, 0);
    }
}

/* Thunderbolt */

article.thunderbolt {
	position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 800px;
    height: calc(100vh - 80px);
    aspect-ratio: 2139 / 1682;
    margin: 0 auto;
    background: linear-gradient(to bottom, rgb(238 238 238) 4%, rgba(244, 244, 244, 1) 25%, rgb(218 218 218) 50%, rgb(219 219 219) 100%);
    isolation: isolate;
}

article.thunderbolt .wrapper,
.display .wrapper,
article.builtIn .wrapper,
article.whatsInside .wrapper {
    max-width: 960px;
    margin: 0 auto;
}

article.thunderbolt::before {
	content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background-color: transparent;
    background-image: url('../img/products/thunderbolt-stage-new.webp');
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-size: 800px auto;
    filter: brightness(0.9);
    transform: scale(1);
    transform-origin: center;
    transition: filter 2.5s cubic-bezier(0.22, 1, 0.36, 1), transform 2.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: filter, transform;
}

@media (max-width:319px) {
	article.thunderbolt::before {
		content: "";
    	background-size: 300px auto;	
	    background-position: 50% 75%;    	
	}
}

article.thunderbolt.zoomIn::before {
    filter: brightness(1);
    transform: scale(1.12);
}

/* Slogan */

article.thunderbolt h2.slogan {
	position: relative;
    z-index: 3;
    display: block;
    max-width: 700px;
    margin: 0 40px 0 0;
    padding: 40px 0 0;
    color: #000;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.08em;
    text-shadow: none;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

article.thunderbolt h2.slogan .word {
    display: block;
    min-height: 46px;
    margin-bottom: 8px;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(28px) scale(0.97);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article.thunderbolt.is-visible:not(.is-open) h2.slogan .word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.thunderbolt.is-visible h2.slogan .word.one {
    transition-delay: 0s;
}

article.thunderbolt.is-visible h2.slogan .word.two {
    transition-delay: 0.28s;
}

/* Скрытие в обратном порядке */

article.thunderbolt.is-open h2.slogan {
    visibility: hidden;
    transition-delay: 0.9s;
}

article.thunderbolt.is-open h2.slogan .word {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-26px) scale(0.98);
}

article.thunderbolt.is-open h2.slogan .word.two {
    transition-delay: 0s;
}

article.thunderbolt.is-open h2.slogan .word.one {
    transition-delay: 0.18s;
}

/* Plus */

article.thunderbolt.is-visible:not(.is-open) button.plus {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 0s, 0.8s, 0.8s, 0.8s, 0s, 0s, 0s;
    display: none;
}

article.thunderbolt button.plus:hover,
article.thunderbolt button.plus:focus-visible {
    border-color: #128abf;
    background-color: #128abf;
    color: #fff;
    outline: none;
}

article.thunderbolt.is-open button.plus {
    visibility: hidden;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transform: translateY(-14px) scale(0.88) rotate(45deg);
    transition-delay: 0.65s, 0s, 0s, 0s, 0s, 0s, 0s;
}

/* Cooling card */

article.thunderbolt .sloganBox {
	position: absolute;
    top: 50px;
    right: 50%;
    z-index: 4;
    display: block;
    visibility: hidden;
    width: calc(100% - 80px);
    max-width: 480px;
    margin: 0;
    padding: 0;
    opacity: 0;
    filter: blur(11px);
    pointer-events: none;
    transform: translateY(130%) scale(0.97);
    transition: visibility 0s linear 1.2s, opacity 1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

article.thunderbolt.is-open .sloganBox {
    visibility: visible;
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0.5s;
    backdrop-filter: blur(12px);
}

article.thunderbolt .cooling {
	display: block;
    padding: 22px 25px;
    box-sizing: border-box;
    border: none;
    border-radius: 12px;
    background-color: rgb(255 255 255 / 92%);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 70px rgb(0 0 0 / 20%);
}

article.thunderbolt .cooling h3 {
    margin: 0 0 14px;
    padding: 0;
    color: #000000;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2em;
}

article.thunderbolt .cooling p {
    margin: 0;
    padding: 0;
    color: rgb(0 0 0 / 78%);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6em;
}

article.thunderbolt .previewCooler {
    display: block;
    width: calc(100% + 15px);
    height: 320px;
    margin: 22px -25px -25px -25px;
    padding: 18px;
    border-top: 1px solid rgb(255 255 255 / 18%);
    background-image: url('../img/products/cooling-preview.webp');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 0 0 8px 8px;
}

article.thunderbolt .previewCooler .word {
	display: block;
    padding-left: 6px;
    color: #000000;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.15em;
    text-shadow: none;
    opacity: 0;
    filter: blur(7px);
    clip-path: inset(0 0 100% 0);
    transform: translateY(22px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, clip-path, transform;
}

article.thunderbolt .previewCooler .word + .word {
    margin-top: 4px;
}

article.thunderbolt.is-open .previewCooler .word {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

article.thunderbolt.is-open .previewCooler .word.one {
    transition-delay: 1.4s;
}

article.thunderbolt.is-open .previewCooler .word.two {
    transition-delay: 1.85s;
}

/* Mobile */

@media (max-width: 640px) {
    article.thunderbolt h2.slogan {
        margin-right: 20px;
        margin-left: 20px;
        padding-top: 24px;
        font-size: 29px;
    }

    article.thunderbolt h2.slogan .word {
        min-height: 32px;
        margin-bottom: 5px;
    }

    article.thunderbolt button.plus {
        width: 46px;
        height: 46px;
        margin-top: 18px;
        margin-left: 20px;
        font-size: 28px;
    }

    article.thunderbolt .sloganBox {
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
    }

    article.thunderbolt .cooling {
        padding: 17px 20px;
        overflow: hidden;
    }

    article.thunderbolt .cooling h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }

    article.thunderbolt .cooling p {
        font-size: 13px;
        line-height: 1.45em;
    }
    article.thunderbolt .previewCooler {
        margin-top: 15px;
        padding-top: 13px;
    }
    article.thunderbolt .previewCooler .word {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.thunderbolt::before,
    article.thunderbolt h2.slogan,
    article.thunderbolt h2.slogan .word,
    article.thunderbolt button.plus,
    article.thunderbolt .sloganBox {
        transition: none;
    }

    article.thunderbolt.is-visible:not(.is-open) h2.slogan .word,
    article.thunderbolt.is-visible:not(.is-open) button.plus {
        opacity: 1;
        filter: none;
        transform: none;
    }

    article.thunderbolt.is-open .sloganBox {
        opacity: 1;
        filter: none;
        transform: none;
    }
    article.thunderbolt .previewCooler .word {
        opacity: 1;
        filter: none;
        clip-path: none;
        transform: none;
        transition: none;
    }
}

/* /Thunderbolt */

/* What is included */

article.whatsInside {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(100vh - 100px);
    overflow: hidden;
    background: linear-gradient(90deg, #071a2d 0%, #071a2d 50%, #fcfcfc 50%, #fcfcfc 100%);
    isolation: isolate;
}

/* Изображение только на левой половине */

article.whatsInside {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(100vh - 100px);
    overflow: hidden;
    background-color: #1f232b;
    isolation: isolate;
}

/* Левый фон */

article.whatsInside::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    background-color: #071a2d;
    background-image: url('../img/products/inside_bg.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Правый фон */

article.whatsInside::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    z-index: 0;
    display: block;
    pointer-events: none;
    background-color: #d8d8d8;
    background-image: url('../img/products/gray-device-bg.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Общий слой двух девайсов */

article.whatsInside .deviceLayer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

/* Левый девайс */

article.whatsInside .deviceLayer::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    display: block;
    background-image: url('../img/products/inside_device.webp');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 72% auto;
}

/* Правый девайс */

article.whatsInside .deviceLayer::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    display: block;
    background-image: url('../img/products/black-device.webp');
    background-position: 50% 90%;
    background-repeat: no-repeat;
    background-size: 82% auto;
}

/* Контент над изображениями */

article.whatsInside .wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    max-width: 1000px;
    min-height: calc(100vh - 100px);
    margin: 0 auto;
    padding: 0;
}

article.whatsInside .wrapper h2 {
    margin: 0;
    padding: 0 0 15px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2em;
}

article.whatsInside .column {
    position: relative;
    min-width: 0;
    box-sizing: border-box;
}

article.whatsInside .column.left {
    padding: 60px 44px 360px 20px;
    color: #fff;
}

article.whatsInside .column.right {
    padding: 60px 20px 260px 44px;
    color: #222;
}

article.whatsInside .column.right p {
    font-size: 16px;
    font-weight: 300;
}

article.whatsInside .column.left h2 {
    color: #fff;
    text-shadow: 0 2px 18px rgb(0 0 0 / 35%);
}

article.whatsInside .column.left > ul {
    max-width: 390px;
    margin: 0;
    padding: 12px 0 0 0;
}

article.whatsInside .column.left > ul li {
    margin-bottom: 10px;
    padding-left: 3px;
    color: rgb(255 255 255 / 82%);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
}

article.whatsInside .column.left > ul li {
    list-style: none;
}

article.whatsInside .column.left ul li:before {
	content: "";
    position: relative;
    top: 2px;
    left: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url('../img/products/svg/ok-list.svg');
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Where to buy */

article.whatsInside .whereToBuy {
width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 0;
    text-align: left;
}

article.whatsInside .whereToBuy h2 {
    margin: 0;
    padding: 0 0 20px;
    color: #222;
    font-size: 30px;
    font-weight: 300;
}

article.whatsInside ul.sales {
	display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 15px 0;
    padding: 0;
    list-style: none;
}

article.whatsInside ul.sales li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

article.whatsInside ul.sales li a {
	display: block;
    width: 320px;
    min-height: 94px;
    border: 1px solid #e2e2e2;
    border-radius: 9px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 34px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.95;    
}

article.whatsInside ul.sales li a:hover,
article.whatsInside ul.sales li a:focus-visible {
    border-color: #128abf;
    box-shadow: 0 12px 30px rgb(0 0 0 / 9%);
    outline: none;
    transform: translateY(-3px);
    opacity: 1;       
}

/* Укажи актуальные файлы логотипов */

article.whatsInside ul.sales a.HardDrivesForSale {
    background-image: url('https://vectotech.com/img/wherebuy/hard-drives.svg');
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center center;
}

article.whatsInside ul.sales a.Amazon {
    background-image: url('https://vectotech.com/img/wherebuy/amazon.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center; 
}

/* PC */
@media (min-width:1000px) {
    article.display.is-visible {
        min-height: 900px;
    }    
    section.itemCard article.display.is-visible.is-windows {
        background-size: auto 90vh;
        background-position: 50% 45% !important;
    }
    article.display .displayFrame.windowsFrame {
        background-image: var(--display-windows-image);
        background-position: 50% calc(50% + 30px);
        background-size: auto calc(100% - 80px);
        background-repeat: repeat-x;
    }
    article.display .wrapper,
    article.compatibility .wrapper {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px 10px;
    }
    article.whereToBuy {
        height: 640px;
    }
    article.whereToBuy:after {
        margin: 60px auto 20px auto;
    }

}

@media (min-width:600px) and (max-width:640px) and (min-height:840px) and (max-height:900px) {
	section.itemCard article#vcore.intro {
        height: calc(100svh - 76px);
        min-height: 520px;
        height: 520px;
    }
	section.itemCard article#vcore.intro .vCoreDevice {
        max-height: 540px;
    }
	section.itemCard article.display.is-visible.is-mac,
	section.itemCard article.display.is-visible.is-windows {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
        background-size: auto 100vh;
        background-position: 50% 45% !important;
    }
    body section.itemCard article.thunderbolt {
        min-height: 680px;
        height: 680px;
        max-height: 680px;
        padding-bottom: 0;        
    }
	section.itemCard article.thunderbolt::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        display: block;
        height: 720px;
        background-color: transparent;
        background-image: url('../img/products/thunderbolt-stage-new.webp');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: calc(100% - 40px) auto;
        filter: brightness(0.9);
        transform: scale(1);
        transform-origin: center;
        transition: filter 2.5s cubic-bezier(0.22, 1, 0.36, 1), transform 2.8s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: filter, transform;
    }
    body section.itemCard article.included {
        min-height: 720px;
        height: 720px;
        padding-bottom: 40px;
    }
    article.included.is-visible .whatsIncluded {
        max-width: 420px;
        margin: 40px auto;
    }
    body section.itemCard article.whereToBuy {
        height: 700px;
        padding-bottom: 40px;
    }
}

@media (min-width:960px) and (max-width:980px) and (min-height:480px) and (max-height:550px) {
	section.itemCard article#vcore.intro h1 {
        padding: 50px 0 0;
    }
	section.itemCard article#vcore.intro {
        min-height: 440px;
    }
	section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 160px;
        background-position: 50% 92%;
    }
	section.itemCard article.builtIn {
        height: auto;
        min-height: 500px;
        padding-bottom: 40px;
    }
    body section.itemCard article.whereToBuy {
        height: 620px;
    }
}
@media (min-width:1000px) and (max-width:1280px) and (min-height:1200px) and (max-height:1290px) {
	section.itemCard article.display.is-visible.is-mac,
	section.itemCard article.display.is-visible.is-windows {
		width: calc(100% - 40px);
		max-width: 960px;
		margin: 0 auto;
        background-size: auto 80vh;
        background-position: 50% 45% !important;
    }
}

/* Mobile */

@media (max-width: 719px) {
    article.whatsInside {
        min-height: 0;
        overflow: hidden;
        background: #fcfcfc;
    }

    article.whatsInside::before {
        inset: 0 0 auto;
        width: 100%;
        height: 430px;
        background-image:
            linear-gradient(90deg, rgb(7 26 45 / 45%), rgb(7 26 45 / 82%)),
            url('../img/products/whats-inside.webp');
    }

    article.whatsInside .wrapper {
        display: block;
        min-height: 0;
    }

    article.whatsInside .column.left {
        min-height: 430px;
        padding: 40px 20px;
    }

    article.whatsInside .column.right {
        padding: 36px 20px 50px;
    }

    article.whatsInside .wrapper h2 {
        font-size: 27px;
    }

    article.whatsInside .wrapper h2,
    article.whatsInside .column.right p {
        text-align: center;
    }

    article.whatsInside .column.right p {
        margin: 0 0 20px 0;
        padding: 0;
    }    

    article.whatsInside .whereToBuy {
        min-height: 0;
    }

    article.whatsInside .whereToBuy h2 {
        font-size: 25px;
    }
}

/* /What is included */

/* FAQ */

article.faq {
    position: relative;
    display: block;
    width: 100%;
    padding: 50px 0;
    background: transparent;
}

article.faq .wrapper {
    width: calc(100% - 40px);
    max-width: 920px;
    margin: 0 auto;
}

article.faq .faqHeader {
    margin-bottom: 36px;
    text-align: center;
}

article.faq .faqHeader small {
    display: block;
    margin-bottom: 8px;
    color: #128abf;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
}

article.faq .faqHeader h2 {
    margin: 0;
    padding: 0;
    color: #181818;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2em;
}

article.faq .faqList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

article.faq .faqItem {
    display: block;
    overflow: hidden;
    border: 1px solid #e1e1e4;
    border-radius: 13px;
    background-color: rgb(255 255 255 / 82%);
    box-shadow: 0 8px 28px rgb(0 0 0 / 3%);
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

article.faq .faqItem:hover {
    border-color: #c8c8cd;
    box-shadow: 0 12px 34px rgb(0 0 0 / 6%);
}

article.faq .faqItem[open] {
    border-color: rgb(18 138 191 / 38%);
    box-shadow: 0 16px 42px rgb(0 0 0 / 7%);
}

article.faq .faqItem summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 0 22px;
    box-sizing: border-box;
    color: #222;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35em;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

article.faq .faqItem summary::-webkit-details-marker {
    display: none;
}

article.faq .faqItem summary i {
    position: relative;
    display: block;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid #d4d4d8;
    border-radius: 50%;
    transition:
        border-color 0.35s ease,
        background-color 0.35s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

article.faq .faqItem summary i::before,
article.faq .faqItem summary i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 11px;
    height: 1px;
    background-color: #333;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease;
}

article.faq .faqItem summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

article.faq .faqItem[open] summary i {
    border-color: #e2e2e2;
    background-color: #e1e1e1;
    color: #111;
    transform: rotate(45deg);
}

article.faq .faqItem[open] summary i::before, 
article.faq .faqItem[open] summary i::after {
    background-color: #333333;
}

article.faq .faqAnswer {
    padding: 0 70px 22px 22px;
    color: #56565c;
}

article.faq .faqAnswer p {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65em;
}

article.faq .faqAnswer p a {
    color: #111;
    border-bottom: 1px dotted #111;
    text-decoration: none;
}

article.faq .faqAnswer p a:hover,
article.faq .faqAnswer p a:target {
    color: #3399CC;
    border-bottom: 1px dotted #3399CC;
}

article.faq .faqAnswer p:last-child {
    margin-bottom: 0;
}

article.faq .faqAnswer ul {
    margin: 8px 0 16px;
    padding-left: 21px;
}

article.faq .faqAnswer li {
    margin-bottom: 7px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5em;
}

article.faq .faqItem.faqHidden {
    display: none;
}

article.faq .faqAnswer p,
article.faq .faqAnswer ul,
article.faq .faqAnswer ul li {
    color: #000;
}

article.faq .faqItem.faqReveal {
    animation: faqReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--faq-index) * 70ms);
}

@media (min-width:980px) {
    article.faq .faqHeader h2.pc {
        display: block;
    }
    article.faq .faqHeader h2.mobile {
        display: none;
    }    
}

@media (max-width:979px) {
    article.faq .faqHeader h2.pc {
        display: none;
    }
    article.faq .faqHeader h2.mobile {
        display: block;
    }    
}

@keyframes faqReveal {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Show more */

article.faq button.faqShowMore {
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
    height: 36px;
    margin: 28px auto 0;
    padding: 0 10px;
    border: 1px solid #cccdd1;
    border-radius: 100px;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

article.faq button.faqShowMore i {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.4s ease;
}

article.faq button.faqShowMore:hover,
article.faq button.faqShowMore:focus-visible {
    border-color: #128abf;
    background-color: #128abf;
    color: #fff;
    outline: none;
    transform: translateY(-2px);
}

article.faq button.faqShowMore[aria-expanded="true"] i {
    transform: translateY(2px) rotate(225deg);
}

@media (max-width: 640px) {
    article.faq {
        padding: 55px 0;
    }

    article.faq .faqHeader h2 {
        font-size: 29px;
    }

    article.faq .faqItem summary {
        min-height: 62px;
        padding: 13px 16px;
        font-size: 15px;
    }

    article.faq .faqAnswer {
        padding: 0 16px 19px;
    }

    article.faq .faqAnswer p,
    article.faq .faqAnswer li {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.faq .faqItem,
    article.faq .faqItem summary i,
    article.faq button.faqShowMore {
        transition: none;
    }

    article.faq .faqItem.faqReveal {
        animation: none;
    }
}

/* /FAQ */

/* =========================================================
   Responsive layout: 320px → 1280px+
   These rules intentionally live at the end of the file.
   ========================================================= */

html {
    overflow-x: hidden;
}

article.intro *,
article.keyFeatures *,
article.dock *,
article.builtIn *,
article.display *,
article.thunderbolt *,
article.whatsInside *,
article.faq * {
    box-sizing: border-box;
}

article img {
    max-width: 100%;
}

article h1,
article h2,
article h3,
article h4,
article p,
article li,
article summary,
article .featureName {
    overflow-wrap: break-word;
}

/* 320px–359px */

@media (min-width: 320px) and (max-width: 359px) {
    section.itemCard article#vcore.intro .vCoreDevice {
        min-height: 420px;
        height: 420px;
        max-height: 420px;
    }

    html body section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 90px;
        background-position: 50% 280px;
    }

    article[id] {
        scroll-margin-top: 64px;
    }

    section.itemCard article#vcore.intro {
        top: 24px;
        height: 420px;
        min-height: 420px;
    }

    article#vcore.intro .introText {
        width: calc(100% - 28px);
    }

    section.itemCard article#vcore.intro h1 {
        margin-bottom: 12px;
        padding-top: 0;
        font-size: 18px;
    }

    article#vcore.intro h2 {
        font-size: 14px;
    }

    article#vcore.intro a.readMore {
        width: fit-content;
        margin-top: 16px;
    }

    article#vcore.intro .vCoreDevice::after {
        background-size: auto 142px;
        background-position: 50% 78%;
    }

    article.keyFeatures {
        min-height: 840px;
    }

    article.keyFeatures .wrapper {
        display: block;
        width: 100%;
        padding: 24px 16px 8px;
    }

    section.itemCard article.thunderbolt .wrapper, 
    section.itemCard .display .wrapper, 
    section.itemCard article.builtIn .wrapper, 
    section.itemCard article.whatsInside .wrapper {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    article.keyFeatures .column,
    article.keyFeatures .column.left,
    article.keyFeatures .column.right {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    article.keyFeatures .column.right {
        min-height: 0;
    }

    article.keyFeatures .wrapper h2 {
        margin: 12px 0 16px;
        font-size: 24px;
        text-align: center;
    }

    article.keyFeatures .column.left ul {
        padding: 0 0 18px 17px;
    }

    article.keyFeatures .column.left ul li {
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 1.45em;
    }

    article.keyFeatures .featureIconsSlider {
        width: 100%;
        height: 184px;
        margin: 0 auto 26px;
        padding: 14px 34px 30px;
    }

    article.keyFeatures .featureIconCard {
        width: 116px;
        padding-right: 7px;
        padding-left: 7px;
    }

    article.keyFeatures .featureIconCard.is-prev {
        transform: translateX(calc(-50% - 88px)) scale(0.62);
    }

    article.keyFeatures .featureIconCard.is-next {
        transform: translateX(calc(-50% + 88px)) scale(0.62);
    }

    article.keyFeatures .featureSliderArrow.prev {
        left: 2px;
    }

    article.keyFeatures .featureSliderArrow.next {
        right: 2px;
    }

    .fadeBorders .wrapper,
    article.builtIn .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper,
    article.faq .wrapper {
        width: calc(100% - 28px);
    }

    article.dock {
        min-height: 520px;
    }

    article.dock::before {
        background-position: 50% top;
        background-size: cover;
    }

    article.dock.zoomIn::before {
        transform: scale(1.1);
    }

    article.dock h2.slogan {
        margin: 0;
        font-size: 27px;
    }

    article.dock h2.slogan > span {
        min-height: 31px;
        margin-bottom: 4px;
        line-height: 31px;
    }

    article.dock .advertText {
        left: 0;
        width: 100%;
        padding: 15px 16px 18px;
    }

    article.dock .advertText p {
        font-size: 13px;
        line-height: 1.42em;
    }

    article.dock button.plus,
    article.display button.plus,
    article.thunderbolt button.plus {
        width: 42px;
        height: 42px;
        margin-left: 0;
        border-width: 2px;
        font-size: 26px;
    }

    section.itemCard article.builtIn {
        height: auto;
        min-height: 600px;
        padding-bottom: 250px;
    }

    article.builtIn h2 {
        padding-top: 28px;
        font-size: 27px;
    }

    article.builtIn .wrapper > h3 {
        font-size: 21px;
    }

    article.builtIn .wrapper p.large {
        font-size: 14px;
        line-height: 1.5em;
    }

    article.builtIn .wrapper p.smaller {
        font-size: 13px;
        line-height: 1.5em;
    }

    article.builtIn .sloganBox {
        width: 100%;
        margin-top: 22px;
    }

    article.builtIn .sloganBox h3 {
        font-size: 23px;
    }

    article.builtIn .capacity,
    article.builtIn.is-visible .capacity.two {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }

    article.builtIn::after {
        left: -20px;
        right: auto;
        bottom: -3%;
        width: 100vw;
    }

    section.itemCard article button.plus {
        width: 42px;
        height: 42px;
    }

    article.compatibility.is-visible button.plus {
        margin-top: 30px;
    }

    article.display {
        height: 580px;
        min-height: 580px;
    }

    article.compatibility h2 {
        max-width: 100%;
    }

    article.display.is-open {
        height: auto;
        min-height: 1030px;
    }

    article.display h2.slogan {
        margin: 0 14px 20px 0;
        padding-top: 24px;
    }

    article.display.is-visible h2.slogan .word.one {
        font-size: 25px;
    }

    article.display.is-visible h2.slogan .word.two {
        margin: 7px 0 10px;
        font-size: 48px;
    }

    article.display.is-visible h2.slogan .word.three {
        margin-top: 10px;
        font-size: 34px;
    }

    article.display button.plus {
        margin-left: 14px;
    }

    article.display .previewText {
        top: 14px;
        left: 14px;
        grid-template-columns: 1fr;
        gap: 16px;
        width: calc(100% - 28px);
        padding: 16px 14px;
    }

    article.display .performance h2 {
        font-size: 19px;
    }

    article.display .performance .large,
    article.display .compatibility li {
        font-size: 13px;
    }

    article.display .previewText .performance::after {
        height: 176px;
    }

    article.display .compatibility {
        width: 100%;
        margin: 0;
        padding: 14px;
    }

    article.display .compatibility::before {
        width: calc(100% + 28px);
        height: 140px;
        margin: -14px -14px 0;
    }

    article.display.is-open .previewText.show-table {
        left: 14px;
        width: calc(100% - 28px);
    }

    article.display .table .bottom.panel {
        flex-wrap: wrap;
        padding: 10px;
    }

    article.display .table .bottom.panel button.pdf em {
        max-width: 132px;
    }

    body section.itemCard article.thunderbolt {
        min-height: 480px;
        height: 480px;
        padding-bottom: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    article.thunderbolt::before {
        background-position: 50% 120px;
        background-size: 340px auto;
    }

    section.itemCard article.whereToBuy h2,
    section.itemCard article.thunderbolt h2.slogan {
        margin: 0;
        padding-top: 22px;
        font-size: 22px;
    }

    section.itemCard article.whereToBuy h2 {
        padding-top: 0;
    }

    article.thunderbolt .sloganBox {
        top: 14px;
        left: 14px;
        width: calc(100% - 28px);
    }

    article.thunderbolt .cooling {
        padding: 15px;
    }

    article.thunderbolt .previewCooler {
        width: calc(100% + 30px);
        height: 250px;
        margin: 14px -15px -15px;
        background-size: cover;
    }

    article.whatsInside {
        min-height: 0;
    }

    article.whatsInside::before {
        inset: 0 0 auto;
        height: 570px;
    }

    article.whatsInside::after {
        inset: 570px 0 0;
    }

    article.whatsInside .deviceLayer::before {
        inset: 0 0 auto;
        height: 570px;
        background-size: 92% auto;
    }

    article.whatsInside .deviceLayer::after {
        inset: 570px 0 0;
        background-position: 50% 92%;
        background-size: 94% auto;
    }

    article.whatsInside .wrapper {
        display: block;
        min-height: 1050px;
    }

    article.whatsInside .column.left {
        min-height: 570px;
        padding: 34px 0 240px;
    }

    article.whatsInside .column.right {
        min-height: 480px;
        padding: 34px 0 220px;
    }

    html body section.itemCard article.whereToBuy {
        height: 750px;
    }
    
    html body section.itemCard article.whereToBuy i.whereToBuy {
        margin-top: 0;
    }

    article.whatsInside .wrapper h2,
    article.whatsInside .whereToBuy h2 {
        font-size: 24px;
    }

    article.whatsInside .column.left > ul li {
        font-size: 13px;
    }

    article.whatsInside ul.sales li a {
        width: 100%;
        min-height: 76px;
    }

    article.faq {
        padding: 42px 0;
    }

    article.faq .faqHeader {
        margin-bottom: 24px;
    }

    article.faq .faqHeader h2 {
        font-size: 25px;
    }

    article.faq .faqItem summary {
        gap: 10px;
        min-height: 58px;
        padding: 12px;
        font-size: 14px;
    }

    article.faq .faqItem summary i {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
    }

    article.faq .faqAnswer {
        padding: 0 12px 16px;
    }

    article.faq .faqAnswer p,
    article.faq .faqAnswer li {
        font-size: 13px;
    }
}

/* Less 320px */

@media(max-width:319px) {
    body section.itemCard article#vcore.intro {
        height: 400px;
        min-height: 400px;
    }    
    body section.itemCard article#vcore.intro.is-visible .introText {
        top: 60px;
    }
    body section.itemCard article#vcore.intro h1 {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px;
        padding: 0;
        font-size: 18px;
    }
    html body section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 90px;
        background-position: 50% 260px;
    }
    html body section.itemCard article.dock h2.slogan > span {
        min-height: 24px;
        margin-bottom: 6px;
        line-height: 24px;
        font-size: 24px;
    }
    html body section.itemCard article.builtIn.is-visible .wrapper > h2 {
    	margin-top: 0;
    	padding-top: 20px;
    	font-size: 24px;
    	transition-delay: 0s;
	}
    html body section.itemCard article.builtIn.is-visible .wrapper > h3 {
    	margin-top: 15px;
    	font-size: 20px;
    	transition-delay: var(--built-in-heading-delay);
	}
    html body section.itemCard article.builtIn {
        height: auto;
        min-height: fit-content;
        padding-bottom: 180px;
    }
}

/* Less 440px */

@media(max-width:440px) {
    section.itemCard article.included {
        min-height: auto;
        height: 740px;
        padding-bottom: 40px;
    }
}

/* 360px–479px */

@media (min-width: 360px) and (max-width: 479px) {
    article#vcore.intro {
        top: 68px;
        height: 550px;
        min-height: 550px;
    }

    article#vcore.intro h1 {
        width: 320px;
        margin: 0 auto 20px auto;
        padding: 60px 0 0 0;
        font-size: 21px;
        line-height: 1.4em;
        letter-spacing: -0.02em;
        text-align: center;
    }

    article#vcore.intro h2 {
        font-size: 15px;
    }

    article#vcore.intro .vCoreDevice::after {
        background-size: calc(100% - 80px) auto;
    }

    article.keyFeatures {
        min-height: 860px;
    }

    article.keyFeatures .wrapper {
        display: block;
        width: 100%;
        min-height: 700px;
        padding: 26px 20px 10px;
    }

    article.keyFeatures .column,
    article.keyFeatures .column.left,
    article.keyFeatures .column.right {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    article.keyFeatures .column.right {
        min-height: 0;
    }

    article.keyFeatures .wrapper h2 {
        font-size: 25px;
        text-align: center;
    }

    article.keyFeatures .column.left h2 {
        margin-bottom: 0;
    }

    article.keyFeatures .column.left ul {
        padding-bottom: 18px;
    }

    article.keyFeatures .column.left ul li {
        font-size: 14px;
    }

    article.keyFeatures .featureIconsSlider {
        width: 100%;
        margin: 0 auto 28px;
        padding-top: 0px;
        padding-right: 38px;
        padding-left: 38px;
    }

    article.keyFeatures .featureIconCard.is-prev {
        transform: translateX(calc(-50% - 102px)) scale(0.66);
    }

    article.keyFeatures .featureIconCard.is-next {
        transform: translateX(calc(-50% + 102px)) scale(0.66);
    }

    .fadeBorders .wrapper,
    article.builtIn .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper,
    article.faq .wrapper {
        width: calc(100% - 36px);
    }

    section.itemCard article.dock {
        min-height: 540px;
        height: 640px;
    }

    article.dock::before {
        background-size: auto 108%;
    }

    article.dock.zoomIn::before {
        transform: scale(2);
        background-size: cover;
    }

    article.dock h2.slogan {
        margin: 0;
        font-size: 30px;
    }

    article.dock .advertText {
        left: 0;
        width: 100%;
    }

    article.dock button.plus,
    article.display button.plus,
    article.thunderbolt button.plus {
        margin-left: 0;
    }
    
    section.itemCard .compatibilityResult h3 {
    	width: 100%;
    	margin: 0 0 15px;
    	padding: 0;
    	font-size: 18px;
    	font-weight: 400;
    	letter-spacing: -.025em;
    	text-align: center;
    	text-transform: none;
	}

    article.builtIn {
        height: auto;
        min-height: 500px;
        padding-bottom: 370px;
    }

    article.builtIn h2 {
        font-size: 26px;
    }

    section.itemCard article.builtIn .wrapper > h3 {
        font-size: 20px;
    }

    article.builtIn .wrapper p.large {
        font-size: 15px;
    }

    article.builtIn .sloganBox {
        width: 100%;
    }

    article.builtIn .capacity,
    article.builtIn.is-visible .capacity.two {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    article.builtIn::after {
        left: auto;
        right: 40px;
        bottom: 0;
        width: 360px;
    }

    body section.itemCard article.display {
        height: fit-content;
        min-height: 520px;
    }

    article.display.is-open {
        height: 860px;
        min-height: 860px;
    }
    
    section.itemCard article.display.is-visible.is-open.zoomIn {
        min-height: 960px;
    }    

    article.display h2.slogan {
        margin: 0 18px;
    }

    article.display.is-visible h2.slogan .word.two {
        font-size: 54px;
    }

    section.itemCard article.display button.plus {
        margin-top: 30px;
        margin-left: 40px;
    }

    article.display .previewText {
        top: 18px;
        left: 18px;
        grid-template-columns: 1fr;
        width: calc(100% - 36px);
        min-height: 800px;
        padding: 18px;
    }

    article.display .previewText .performance::after {
        height: 200px;
    }

    article.display .compatibility {
        width: 100%;
        min-height: auto;
        height: fit-content;
        margin: 0;
        padding: 16px;
    }

    article.display .compatibility::before {
        width: calc(100% + 16px);
        height: 150px;
        margin: 0 -16px 0 0;
    }

    article.display.is-open .previewText.show-table {
        left: 18px;
        width: calc(100% - 36px);
        min-height: 300px;
        height: fit-content;
    }

    article.thunderbolt {
        min-height: 540px;
        height: auto;
        aspect-ratio: auto;
        overflow: hidden;
    }

    article.thunderbolt::before {
        background-position: 50% 50%;
        background-size: contain;
    }

    article.thunderbolt h2.slogan {
        margin: 0;
        font-size: 27px;
    }

    article.thunderbolt .sloganBox {
        left: 18px;
        width: calc(100% - 36px);
    }

    article.thunderbolt .previewCooler {
        width: calc(100% + 50px);
        height: 275px;
        background-size: cover;
    }

    article.whatsInside::before {
        inset: 0 0 auto;
        height: 590px;
    }

    article.whatsInside::after {
        inset: 590px 0 0;
    }

    article.whatsInside .deviceLayer::before {
        inset: 0 0 auto;
        height: 590px;
        background-size: 88% auto;
    }

    article.whatsInside .deviceLayer::after {
        inset: 590px 0 0;
        background-size: 90% auto;
    }

    article.whatsInside .wrapper {
        display: block;
        min-height: 1090px;
    }

    article.whatsInside .column.left {
        min-height: 590px;
        padding: 38px 0 250px;
    }

    article.whatsInside .column.right {
        min-height: 500px;
        padding: 38px 0 230px;
    }

    article.whatsInside ul.sales li a {
        width: calc(100% - 40px);
        min-height: 104px;
        margin: 0 auto 10px;
    }

    article.faq .faqItem summary {
        padding: 13px 15px;
        font-size: 15px;
    }

    article.faq .faqAnswer {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* Between 360px - 420px */

@media (min-width: 360px) and (max-width:420px) {
	body section.itemCard article#vcore.intro.is-visible .introText {
        top: 60px;
    }
}

/* Less 550px */

@media (max-width: 550px) {
    body section.itemCard article.included {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        height: 800px;
        margin: 0;
        background: rgb(242 242 242);
        padding: 20px 0 0 0;
        border-radius: 0;
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 2px 8px #e8e8e8;
        color: #111;
        text-align: center;
        transition-delay: 0.3s;
    }
    body section.itemCard article.included div.wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }    
    section.itemCard  .whatsIncluded {
        position: relative;
        z-index: 2;
        display: block;
        width: calc(100% - 40px);
        max-width: 640px;
        height: fit-content;
        margin: 40px auto;
        background: #fff;
        padding: 20px 20px 0 20px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 2px 8px #e8e8e8;
        color: #111;
        text-align: center;
        transition-delay: 0.3s;
    }
    section.itemCard  .whatsIncluded ul li {
        display: block;
        width: 100%;
    }
}

/* 480px–549px */

@media (min-width: 480px) and (max-width: 549px) {
    article#vcore.intro {
        height: 500px;
        min-height: 500px;
    }

    article#vcore.intro .vCoreDevice::after {
        background-size: auto 190px;
    }

    article.keyFeatures {
        min-height: 860px;
    }

    article.keyFeatures .wrapper {
        display: block;
        width: 100%;
        padding: 30px 28px 0;
    }

    article.keyFeatures .column,
    article.keyFeatures .column.left,
    article.keyFeatures .column.right {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    article.keyFeatures .column.right {
        min-height: 0;
    }

    article.keyFeatures .wrapper h2 {
        text-align: center;
    }

    article.keyFeatures .featureIconsSlider {
        width: 100%;
        margin-top: -10px;
        margin-bottom: 20px;
    }

    article.keyFeatures .featureIconCard.is-prev {
        transform: translateX(calc(-50% - 128px)) scale(0.72);
    }

    article.keyFeatures .featureIconCard.is-next {
        transform: translateX(calc(-50% + 128px)) scale(0.72);
    }

    .fadeBorders .wrapper,
    article.builtIn .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper,
    article.faq .wrapper {
        width: calc(100% - 48px);
    }

    article.dock::before {
        background-size: auto 108%;
    }

    article.dock h2.slogan {
        margin: 0;
        font-size: 34px;
    }

    article.dock .advertText {
        left: 0;
        width: 100%;
    }

    article.dock button.plus,
    article.display button.plus,
    article.thunderbolt button.plus {
        margin-left: 0;
    }

    article.builtIn {
        height: auto;
        min-height: 640px;
        padding-bottom: 360px;
    }

    article.builtIn h2 {
        font-size: 32px;
    }

    article.builtIn .wrapper > h3 {
        font-size: 25px;
    }

    article.builtIn .sloganBox {
        width: 100%;
    }

    article.builtIn .capacity {
        width: 100%;
    }

    article.builtIn::after {
        left: calc(50% - 320px);
        bottom: -8%;
        width: 112vw;
    }

    article.display {
        min-height: 650px;
    }

    article.display.is-open {
        height: auto;
        min-height: 1100px;
    }

    article.display h2.slogan {
        margin-right: 20px;
        margin-left: 20px;
    }

    article.display button.plus {
        margin-left: 24px;
    }

    article.display .previewText {
        top: 24px;
        left: 24px;
        grid-template-columns: 1fr;
        width: calc(100% - 48px);
    }

    article.display .compatibility {
        width: 100%;
        min-height: auto;
        height: fit-content;
        margin: 0;
    }

    article.display.is-open .previewText.show-table {
        left: 24px;
        width: calc(100% - 48px);
    }

    article.thunderbolt {
        min-height: 500px;
        height: auto;
        aspect-ratio: auto;
        overflow: hidden;
    }

    article.thunderbolt::before {
        background-size: 90% auto;
        background-position: 50% 70%;
    }

    article.thunderbolt h2.slogan {
        margin: 0;
        font-size: 31px;
    }

    article.thunderbolt .sloganBox {
        left: 24px;
        width: calc(100% - 48px);
    }

    article.thunderbolt .previewCooler {
        height: 300px;
    }

    article.whatsInside::before {
        inset: 0 0 auto;
        height: 610px;
    }

    article.whatsInside::after {
        inset: 610px 0 0;
    }

    article.whatsInside .deviceLayer::before {
        inset: 0 0 auto;
        height: 610px;
        background-size: 82% auto;
    }

    article.whatsInside .deviceLayer::after {
        inset: 610px 0 0;
        background-size: 84% auto;
    }

    article.whatsInside .wrapper {
        display: block;
        min-height: 1130px;
    }

    article.whatsInside .column.left {
        min-height: 610px;
        padding: 42px 0 270px;
    }

    article.whatsInside .column.right {
        min-height: 520px;
        padding: 42px 0 245px;
    }

    article.whatsInside ul.sales li a {
        width: 100%;
    }
}

/* 550px–767px */

@media (min-width: 550px) and (max-width: 767px) {
    article#vcore.intro {
        height: 620px;
        min-height: 620px;
    }

    section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 180px;
        background-position: 50% 320px
    }

    article.keyFeatures {
        min-height: 780px;
        height: calc(100% - 80vh);
        padding-bottom: 40px;
    }

    article.keyFeatures .wrapper {
        display: block;
        width: 100%;
        min-height: 730px;
        padding: 32px 32px 12px;
    }

    article.keyFeatures .column,
    article.keyFeatures .column.left,
    article.keyFeatures .column.right {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    article.keyFeatures .column.right {
        min-height: 0;
    }

    article.keyFeatures .wrapper h2 {
        margin-bottom: 0;
        text-align: center;
    }
    article.keyFeatures .wrapper .column.left h2 {
        margin-bottom: 15px;
    }

    article.keyFeatures .column.left ul {
        max-width: 520px;
    }

    article.keyFeatures .featureIconsSlider {
        width: min(100%, 600px);
        margin-top: 0;
        margin-bottom: 34px;
    }

    article.keyFeatures .featureIconCard.is-prev {
        transform: translateX(calc(-50% - 146px)) scale(0.76);
    }

    article.keyFeatures .featureIconCard.is-next {
        transform: translateX(calc(-50% + 146px)) scale(0.76);
    }

    .fadeBorders .wrapper,
    article.builtIn .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper,
    article.faq .wrapper {
        width: calc(100% - 64px);
    }

    article.dock::before {
        background-size: auto 108%;
    }

    article.dock h2.slogan,
    article.dock .advertText {
        margin-left: 0;
    }

    article.dock .advertText {
        left: 0;
        width: min(100%, 480px);
    }

    article.dock button.plus,
    article.display button.plus,
    article.thunderbolt button.plus {
        margin-left: 0;
    }

    article.builtIn {
        height: auto;
        min-height: fit-content;
        padding-bottom: 400px;
    }

    article.builtIn .sloganBox {
        width: 100%;
    }

    article.builtIn::after {
        left: calc(50% - 320px);
        bottom: -2%;
        width: 100vw;
    }
    article.display {
        min-height: 680px;
    }

    article.display.is-open {
        height: auto;
        min-height: 1120px;
    }

    article.display h2.slogan {
        margin: 0 15px;
    }

    article.display button.plus {
        margin-left: 20px;
    }

    article.display .previewText {
        top: 28px;
        left: 32px;
        grid-template-columns: 1fr;
        width: calc(100% - 64px);
    }

    article.display .compatibility {
        width: 100%;
        min-height: fit-content;
        height: fit-content;
        margin: 0;
    }

    article.display.is-open .previewText.show-table {
        left: 32px;
        width: calc(100% - 64px);
    }

    article.thunderbolt {
        min-height: 820px;
        height: auto;
        aspect-ratio: auto;
        overflow: hidden;
    }

    article.thunderbolt::before {
        background-size: 720px auto;
    }

    article.thunderbolt h2.slogan {
        margin: 0;
    }

    article.thunderbolt .sloganBox {
        left: calc(50% - 240px);
        width: calc(100% - 64px);
        max-width: 480px;
    }

    article.thunderbolt .previewCooler {
        display: block;
        width: calc(100% + 52px);
        height: 320px;
        margin: 22px -25px -25px -26px;
    }

    article.whatsInside::before {
        inset: 0 0 auto;
        height: 630px;
    }

    article.whatsInside::after {
        inset: 630px 0 0;
    }

    article.whatsInside .deviceLayer::before {
        inset: 0 0 auto;
        height: 630px;
        background-size: 74% auto;
    }

    article.whatsInside .deviceLayer::after {
        inset: 630px 0 0;
        background-size: 78% auto;
    }

    article.whatsInside .wrapper {
        display: block;
        min-height: 1170px;
    }

    article.whatsInside .column.left {
        min-height: 630px;
        padding: 46px 0 290px;
    }

    article.whatsInside .column.right {
        min-height: 540px;
        padding: 46px 0 260px;
    }

    article.whatsInside ul.sales li a {
        width: min(100%, 360px);
    }
}

/* 768px–999px */

@media (min-width: 768px) and (max-width: 999px) {
    section.itemCard article#vcore.intro {
        min-height: 420px;
        height: 550px;
    }

    article#vcore.intro .vCoreDevice::after {
        background-size: auto 220px;
        background-position: 50% 300px;
    }

    article.keyFeatures .wrapper {
        gap: 24px;
        width: calc(100% - 48px);
        padding-right: 24px;
        padding-left: 24px;
    }

    article.keyFeatures .column.left {
        flex-basis: 340px;
    }

    article.keyFeatures .column.right {
        margin-left: 0;
    }

    article.keyFeatures .featureIconsSlider {
        width: calc(100% - 48px);
    }

    .fadeBorders .wrapper,
    article.builtIn .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper,
    article.faq .wrapper {
        width: calc(100% - 64px);
    }

    article.dock::before {
        background-size: auto 108%;
    }

    article.builtIn {
        height: fit-content;
        min-height: fit-content;
        padding-bottom: 40px;
    }

    article.builtIn::after {
        right: 30px;
        bottom: -40px;
        width: 80vw;
    }

    article.display {
        height: auto;
        min-height: 720px;
    }

    article.display .previewText {
        right: 32px;
        left: 32px;
        width: calc(100% - 64px);
        max-width: none;
    }

    article.display.is-open .previewText.show-table {
        left: 32px;
        width: calc(100% - 64px);
        max-width: none;
    }

    article.thunderbolt {
        min-height: 760px;
        height: auto;
        overflow: hidden;
    }

    article.thunderbolt::before {
        background-size: min(82vw, 720px) auto;
    }

    article.thunderbolt .sloganBox {
        right: auto;
        left: 32px;
    }

    article.whatsInside .wrapper {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 48px);
    }

    article.whatsInside .column.left {
        padding-right: 28px;
        padding-left: 0;
    }

    article.whatsInside .column.right {
        padding-right: 0;
        padding-left: 28px;
    }

    article.whatsInside ul.sales li a {
        width: 100%;
    }
}

/* Less 999px */

@media (max-width:999px) {
    article.thunderbolt .wrapper, 
    .display .wrapper, 
    article.builtIn .wrapper, 
    article.whatsInside .wrapper {
        width: calc(100% - 40px);
        padding-left: 20px;
        padding-right: 20px;
    }
    section.itemCard article.thunderbolt {
        padding-bottom: 40px;
    }
    section.itemCard article.included {
        min-height: auto;
        height: 540px;
        padding-bottom: 40px;
    }
    section.itemCard article.whereToBuy {
        position: relative;
        z-index: 2;
        padding-top: 40px;
        height: fit-content;
    }
}

@media (min-width:360px) and (max-width:400px) and (min-height:720px) and (max-height:800px) {
    body section.itemCard article#vcore.intro {
        top: 68px;
        height: 420px;
        min-height: 420px;
    }     
    body section.itemCard article#vcore.intro .vCoreDevice {
        max-height: 480px;
    }
    body section.itemCard article#vcore.intro .vCoreDevice::after {
        background-size: auto 120px;
        background-position: 50% 85%;
    }
    body section.itemCard .fadeBorders:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        content: "";
        display: block;
        width: 100%;
        height: 240px;
        background: linear-gradient(rgb(41 41 41 / 40%), rgba(255, 255, 255, 0));
        border: none;
    }
    body section.itemCard article.thunderbolt .wrapper, 
    body section.itemCard article.display .wrapper, 
    body section.itemCard article.builtIn .wrapper, 
    body section.itemCard article.whatsInside .wrapper {
        width: calc(100% - 40px);
        padding-left: 0;
        padding-right: 0;
    }
    body section.itemCard article.builtIn.is-visible .wrapper > h2 {
        margin-top: 15px;
        padding-top: 0;
    }
    body section.itemCard article.builtIn.is-visible .capacity {
        margin-bottom: 20px;
    }
    article.builtIn .capacity i.transferSpeed {
        background-size: auto 48px;
    }
    article.builtIn .capacity i.pcie {
        background-size: auto 48px;
        background-position: -96px 0;        
    }
    article.builtIn .capacity i.tb {
        background-size: auto 48px;
        background-position: -192px 0;        
    }
    body section.itemCard article.builtIn {
        height: auto;
        min-height: 400px;
        padding-bottom: 260px;
    }
    body section.itemCard article.builtIn::after {
        left: calc(50% - 240px);
        bottom: -4%;
        width: 110vw;
    }
    html body section.itemCard article.display .wrapper {
        width: 100%;
        height: fit-content;
        max-height: 940px;
        padding-bottom: 60px;
    }
    html body section.itemCard article.display .previewText {
        max-height: calc(100% - 40px);
    }
    html body section.itemCard article.display.is-open .displayPlatformSwitcher {
        bottom: 24px;
    }
    html body section.itemCard article.thunderbolt::before {
        background-position: 50% 50%;
        background-size: calc(100% - 40px) auto;
    }
    html body section.itemCard article.thunderbolt {
        min-height: 480px;
        padding-bottom: 0;
    }
    html body section.itemCard article.included {
        height: 740px;        
    }
    html body section.itemCard article.whereToBuy {
        padding-top: 10px;
        padding-bottom: 40px;
    }
}
@media (min-width:900px) and (max-width:999px) {
    body section.itemCard article.builtIn::after {
        left: 50%;
        top: 20px;
        bottom: auto;
        width: 50vw;
    }
}
@media (max-width: 500px) {
    body section.itemCard article.included h2.promoHeader em {
        font-size: 32px;
    }
    body section.itemCard article.faq {
        padding: 40px 0;
    }
    body section.itemCard article.faq .faqHeader {
        margin-bottom: 30px;
    }
}

@media (min-width:960px) and (max-width:980px) and (min-height:480px) and (max-height:550px) { 
    body section.itemCard article.whereToBuy {
        height: 620px;
    }
}

/* More 1000px */


@media (min-width: 1000px) {
    section.itemCard article.compatibility {
        min-height: fit-content;
        height: 900px;
        max-height: 900px;
        padding-bottom: 40px;
        overflow: hidden;
    }
}    

/* 1000px–1279px */

@media (min-width: 1000px) and (max-width: 1279px) {
    article.keyFeatures .wrapper,
    article.builtIn .wrapper,
    .fadeBorders .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper {
        width: calc(100% - 80px);
    }

    article.dock::before {
        background-size: auto 120%;
    }

    article.display .previewText {
        right: 40px;
    }

    article.thunderbolt {
        min-height: 780px;
        height: 780px;
        overflow: hidden;
    }

    article.whatsInside ul.sales li a {
        max-width: 100%;
    }
}

/* 1280px and wider */

@media (min-width: 1280px) {
    article#vcore.intro .introText,
    article#vcore.intro .vCoreDevice::after,
    article#vcore.intro .topShadow {
        max-width: none;
    }

    article.keyFeatures .wrapper,
    article.builtIn .wrapper,
    .fadeBorders .wrapper,
    article.thunderbolt .wrapper,
    article.whatsInside .wrapper {
        width: 100%;
    }

    article.dock::before {
        top: -10%;
        background-size: auto 120%;
    }

    article.display .previewText {
        right: calc(50% - 400px);
    }

    article.compatibility,
    article.included,
    article.thunderbolt,
    article.whereToBuy {
        max-width: 100%;
        height: 800px;
        max-height: 800px;
    }

    section.itemCard article.whereToBuy:after {
        content: "";
        position: relative;
        z-index: 2;
        display: block;
        width: 800px;
        height: 280px;
        margin: 90px auto 20px auto;
    }
}

@media (min-width:2601px) {
	section.itemCard article.thunderbolt,
	section.itemCard article.thunderbolt.is-visible {
		height: 800px;
	}
}

@media (min-width:2601px) {
	body section.itemCard article#vcore.intro {
    	position: relative;
    	top: 80px;
    	z-index: 1;
    	width: 100%;
    	height: 560px;
    	min-height: 560px;
	}
	body section.itemCard article#vcore.intro h1 {
		padding: 0;
	}
}

button.compatibilityToolbarButton {
    width: 100px;
}

.compatibilityMatrix > h2 {
    font-weight: 400;
}

.compatibilityFullDialog {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: #050607;
        overflow: hidden;
    }

    .compatibilityFullDialog[open] {
        display: block;
        animation: compatibilityDialogIn .35s cubic-bezier(.22, 1, .36, 1) both;
    }

    .compatibilityFullDialog::backdrop {
        background: rgb(0 0 0 / 72%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .compatibilityFullDialog iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
    }

    @keyframes compatibilityDialogIn {
        from {
            opacity: 0;
            transform: translateY(12px) scale(.995);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .compatibilityFullDialog[open] {
            animation: none;
        }
    }

/* Included */

article.included {
    display: block;
    width: 100%;
    min-height: 540px;
    height: auto;
    margin: 0;
    padding: 30px 0;
    background-color: #f4f4f4;
}

@media (min-width:1000px) {
    article.included {
        height: 580px;
    }
}

h2.promoHeader {
    display: block;
    margin: 20px auto;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #111;
}

h2.promoHeader * {
    display: block;
    line-height: 1.8em;
}

h2.promoHeader small.gradient {
    font-size: 22px;    
    letter-spacing: 0.05em;
    text-transform: none;
}

h2.promoHeader em {
    margin: 10px auto;
    font-size: 42px;
    line-height: 42px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
}

h2.promoHeader i.gradient {
    height: 32px;
    line-height: 32px;
    font-style: normal;
    letter-spacing: 0.2em;
    color: #777;
    text-shadow: none;
}

/* Included */

/* Included */

.whatsIncluded {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    width: calc(100% - 40px);
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    box-shadow:
        0 2px 8px #e8e8e8,
        0 30px 70px rgb(25 38 55 / 0%);
    color: #111;
    text-align: center;

    /*
     * Начальное состояние карточки:
     * находится ниже, немного уменьшена и размыта.
     */
    visibility: hidden;
    opacity: 0;
    filter: blur(14px);
    clip-path: inset(42% 3% 0 round 14px);
    transform:
        perspective(1000px)
        translateY(100px)
        rotateX(6deg)
        scale(0.95);
    transform-origin: 50% 100%;

    transition:
        visibility 0s linear 1.1s,
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s ease;

    will-change: opacity, filter, clip-path, transform;
}

/*
 * Карточка появляется после добавления классу article.included
 * состояния is-visible.
 */
article.included.is-visible .whatsIncluded {
    visibility: visible;
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 round 8px);
    transform:
        perspective(1000px)
        translateY(0)
        rotateX(0)
        scale(1);

    box-shadow:
        0 2px 8px #e8e8e8,
        0 30px 70px rgb(25 38 55 / 14%);

    transition-delay: 0s;
}

.whatsIncluded:hover,
.whatsIncluded:target {
    background: #fff;
    box-shadow:
        0 4px 12px #d9d9d9,
        0 34px 80px rgb(25 38 55 / 18%);
}

/*
 * Световой блик, проходящий по карточке после появления.
 */
.whatsIncluded::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -45%;
    z-index: 0;
    display: block;
    width: 25%;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 78%),
        transparent
    );

    opacity: 0;
    transform: translateX(-150%) skewX(-18deg);
}

article.included.is-visible .whatsIncluded::after {
    opacity: 1;
    transform: translateX(650%) skewX(-18deg);

    transition:
        transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
        opacity 0.35s ease 0.7s;
}

/*
 * Содержимое располагается выше светового блика.
 */
.whatsIncluded h3,
.whatsIncluded ul {
    position: relative;
    z-index: 1;
}

.whatsIncluded h3 {
    margin: 0 0 30px;
    padding: 0;
    color: #545454;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    opacity: 0;
    filter: blur(7px);
    transform: translateY(18px);

    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.45s,
        filter 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.45s,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

article.included.is-visible .whatsIncluded h3 {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.whatsIncluded ul,
.whatsIncluded ul li {
    margin: 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.whatsIncluded ul li {
    --item-index: 0;

    display: inline-block;
    width: calc(50% - 40px);
    height: 40px;
    margin: 0 0 30px 0;
    vertical-align: top;

    /*
     * Каждый пункт начинает появление чуть позже предыдущего.
     */
    opacity: 0;
    filter: blur(6px);
    transform: translateY(24px) scale(0.97);

    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1)
            calc(0.62s + var(--item-index) * 110ms),
        filter 0.7s cubic-bezier(0.16, 1, 0.3, 1)
            calc(0.62s + var(--item-index) * 110ms),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1)
            calc(0.62s + var(--item-index) * 110ms);
}

.whatsIncluded ul li:nth-child(1) {
    --item-index: 0;
}

.whatsIncluded ul li:nth-child(2) {
    --item-index: 1;
}

.whatsIncluded ul li:nth-child(3) {
    --item-index: 2;
}

.whatsIncluded ul li:nth-child(4) {
    --item-index: 3;
}

.whatsIncluded ul li:nth-child(5) {
    --item-index: 4;
}

.whatsIncluded ul li:nth-child(6) {
    --item-index: 5;
}

article.included.is-visible .whatsIncluded ul li {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

@media (min-width: 660px) {
    .whatsIncluded {
        max-width: 640px;
    }
}

@media (max-width: 659px) {
    section.itemCard article.included {
        min-height: 720px;
        height: 720px;
        padding-bottom: 20px;
    }

    .whatsIncluded {
        max-width: calc(100% - 40px);
        min-height: fit-content;
        height: fit-content;
        max-height: fit-content;
        margin: 0 20px;
        background: #fff;

        clip-path: inset(35% 3% 0 round 12px);
        transform:
            perspective(800px)
            translateY(70px)
            rotateX(5deg)
            scale(0.96);
    }

    article.included.is-visible .whatsIncluded {
        clip-path: inset(0 round 8px);
        transform:
            perspective(800px)
            translateY(0)
            rotateX(0)
            scale(1);
    }

    .whatsIncluded,
    .whatsIncluded ul {
        height: fit-content;
    }

    .whatsIncluded ul li {
        display: block;
        width: 100%;
    }

    article.included::after {
        display: none;
    }
}

.whatsIncluded ul li::before {
    content: "";
    position: relative;
    top: 0;
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-right: 10px;
    background-color: transparent;
    border: 1px solid #c1c1c1;
    border-radius: 9px;

    /*
     * Иконка появляется чуть выразительнее текста.
     */
    opacity: 0;
    transform: rotate(-8deg) scale(0.72);

    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1)
            calc(0.68s + var(--item-index) * 110ms),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)
            calc(0.68s + var(--item-index) * 110ms),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

article.included.is-visible .whatsIncluded ul li::before {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.whatsIncluded ul li:hover::before {
    border-color: rgb(18 138 191 / 55%);
    box-shadow: 0 8px 20px rgb(18 138 191 / 15%);
    transform: translateY(-2px) scale(1.04);
}

.whatsIncluded ul li.thunderbolt::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/thunderbolt.svg');
    background-size: 38px 38px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li.powerAdapter::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/power.svg');
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li.acPower::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/ac-power-cable.svg');
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li.cable::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/cable.svg');
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li.screwDriver::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/screwdriver.svg');
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li.userManual::before {
    background-color: #f1f1f100;
    background-image: url('../img/products/svg/manual.svg');
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
}

.whatsIncluded ul li span {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 4px 0 0 0;
    font-size: 14px;
    vertical-align: top;
}

.whatsIncluded ul li:not(:first-child) span {
    padding-top: 15px;
}

i.includedVcore {
    display: none;
    width: auto;
    max-width: 580px;
    min-height: 240px;
    margin: 60px auto 0 auto;
    background-image: url('../img/products/v-core-device-blue-reflection.webp');
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}

article.included::after {
    content: "";
    position: relative;
    z-index: 1;
    left: 0;
    top: -360px;
    bottom: 0;
    display: block;
    width: 100%;
    height: 400px;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 1, 2, 0) 1%,
        rgb(218 218 218 / 40%) 47%,
        rgb(246 246 246 / 65%) 76%
    );
}

@media (min-width: 640px) {
    .whatsIncluded ul li:nth-child(1),
    .whatsIncluded ul li:nth-child(3),
    .whatsIncluded ul li:nth-child(5) {
        margin-right: 20px;
    }

    .whatsIncluded ul li:nth-child(5),
    .whatsIncluded ul li:nth-child(6) {
        margin-bottom: 10px;
    }
}

/*
 * Отключение движения в системном режиме Reduced Motion.
 */
@media (prefers-reduced-motion: reduce) {
    .whatsIncluded,
    .whatsIncluded::after,
    .whatsIncluded h3,
    .whatsIncluded ul li,
    .whatsIncluded ul li::before {
        transition: none !important;
    }

    .whatsIncluded {
        visibility: visible;
        opacity: 1;
        filter: none;
        clip-path: none;
        transform: none;
    }

    .whatsIncluded::after {
        display: none;
    }

    .whatsIncluded h3,
    .whatsIncluded ul li,
    .whatsIncluded ul li::before {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* Included */

/* Compatibility chart */

article.compatibility {
    --compatibility-accent: #41bfff;
    --compatibility-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --compatibility-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    min-height: fit-content;
    height: fit-content;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%, rgb(50 84 112 / 38%), transparent 34%),
        linear-gradient(145deg, #171a1e 0%, #090a0c 58%, #111419 100%);
    isolation: isolate;
}

article.compatibility,
article.compatibility *,
article.compatibility *::before,
article.compatibility *::after {
    box-sizing: border-box;
}

article.compatibility .charts {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

article.compatibility .chart {
    position: absolute;
    inset: -2%;
    z-index: 1;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    filter: blur(10px) brightness(0.58) saturate(0.82);
    transform: translate3d(0, 28px, 0) scale(1.055);
    transform-origin: center;
    transition:
        opacity 1.5s var(--compatibility-ease),
        filter 1.9s var(--compatibility-ease),
        transform 2.4s var(--compatibility-ease-out);
    will-change: opacity, filter, transform;
}

article.compatibility .chart.pc {
    position: relative;
    top: 20px;
    display: block;
    width: 100%;
    max-width: calc(100% - 40px);
    height: 640px;
    margin: 0 auto;
    background-image: url('../img/products/vectornate-resolution-compatibility-matrix-2928x1200.webp');
    background-position: 50% 85%;
    background-size: calc(100% - 40px) auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 17;
    opacity: 1;
    inset: 1;
    filter: none;
    transform: none;
    transition: none;
}

article.compatibility .chart.mobile {
    position: relative;
    top: 20px;
    display: none;
    width: 100%;
    max-width: calc(100% - 40px);
    height: 640px;
    margin: 0 auto;
    background-image: url('../img/products/vectornate-resolution-compatibility-matrix-1200x900.webp');
    background-position: 50% 85%;
    background-size: calc(100% - 40px) auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 17;
    opacity: 1;
    inset: 1;
    filter: none;
    transform: none;
    transition: none;    
}

/*article.compatibility.is-visible .chart {
    opacity: 0.88;
    filter: blur(0) brightness(0.76) saturate(0.94);
    transform: translate3d(0, 0, 0) scale(1);
}*/

article.compatibility.is-open .chart {
    opacity: 0.28;
    filter: blur(3px) brightness(0.42) saturate(0.76);
    transform: translate3d(0, 0, 0) scale(1.035);
}

article.compatibility .wrapper {
    position: relative;
    z-index: 4;
    width: calc(100% - 48px);
    max-width: 1000px;
    height: 100%;
    min-height: inherit;
    margin: 0 auto;
    padding: 40px 20px;
}

article.compatibility h2 {
    position: relative;
    z-index: 5;
    display: block;
    max-width: 760px;
    max-height: 220px;
    margin: 0;
    padding: 0;
    color: #fff;
    text-shadow: 0 4px 26px rgb(0 0 0 / 72%);
    transition:
        opacity 0.55s var(--compatibility-ease),
        filter 0.55s var(--compatibility-ease),
        transform 0.65s var(--compatibility-ease-out),
        max-height 0.65s var(--compatibility-ease-out),
        visibility 0s linear 0s;
}

article.compatibility h2 .word {
    display: block;
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    filter: blur(10px);
    clip-path: inset(0 0 100% 0);
    transform: translateY(34px) scale(0.97);
    transition:
        opacity 0.9s var(--compatibility-ease),
        filter 0.9s var(--compatibility-ease),
        clip-path 1s var(--compatibility-ease),
        transform 1s var(--compatibility-ease-out);
    will-change: opacity, filter, clip-path, transform;
}

article.compatibility h2 .word.one {
    font-size: 42px;
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: 0.01em;
}

article.compatibility h2 .word.two {
    margin-top: 14px;
    background: linear-gradient(90deg, #fff 0%, #a9dfff 48%, #43bfff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: clamp(23px, 2.8vw, 36px);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: -0.02em;
}

article.compatibility.is-visible h2 .word {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0);
    transform: translateY(0) scale(1);
}

article.compatibility.is-visible h2 .word.one {
    transition-delay: 0.12s;
}

article.compatibility.is-visible h2 .word.two {
    transition-delay: 0.38s;
}

article.compatibility.is-open h2 {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-34px) scale(0.98);
    transition-delay: 0s, 0s, 0s, 0s, 0.65s;
}

article.compatibility button.plus {
    background-color: rgba(0,0,0,0.5);
}

article.compatibility button.plus::before,
article.compatibility button.plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

article.compatibility button.plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

article.compatibility.is-visible button.plus {
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0.72s, 0.72s, 0.72s, 0s, 0s;
}

article.compatibility button.plus:focus-visible {
    box-shadow:
        0 0 0 4px rgb(65 191 255 / 20%),
        0 14px 32px rgb(0 0 0 / 30%);
}

article.compatibility.is-open button.plus {
    border-color: rgb(255 255 255 / 62%);
    background: rgba(14, 18, 23, 0.5);
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

article.compatibility .deskHeader {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 22px;
}

article.compatibility button.plus.is-back {
    flex: 0 0 auto;
    width: auto;
    min-width: 66px;
    height: 30px;
    margin: 0;
    padding: 0 18px;
    border-radius: 100px;
    border: 1px solid #888888;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #ebebeb;
}

article.compatibility button.plus.is-back:hover,
article.compatibility button.plus.is-back:target {
    color: #fff;
    background: #3399CC; 
    border: 1px solid #3399CC;
}

article.compatibility button.plus.is-back::before,
article.compatibility button.plus.is-back::after {
    display: none;
}

article.compatibility .desk {
    position: relative;
    top: auto;
    left: auto;
    z-index: 7;
    display: block;
    visibility: hidden;
    width: min(1040px, calc(100% - 24px));
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 34px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgb(35 39 45 / 96%), rgb(9 11 14 / 94%));
    color: #fff;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 13%) inset,
        0 38px 110px rgb(0 0 0 / 58%);
    opacity: 0;
    filter: blur(16px);
    clip-path: inset(44% 4% 0 round 24px);
    pointer-events: none;
    scrollbar-color: rgb(255 255 255 / 25%) transparent;
    scrollbar-width: thin;
    transform: perspective(1100px) translate3d(0, 110px, 0) rotateX(7deg) scale(0.94);
    transition:
        visibility 0s linear 1.15s,
        opacity 0.9s var(--compatibility-ease),
        filter 1s var(--compatibility-ease),
        clip-path 1.1s var(--compatibility-ease),
        transform 1.15s var(--compatibility-ease-out);
    will-change: opacity, filter, clip-path, transform;
}

article.compatibility .desk[aria-hidden="true"] {
	display: none;
}

article.compatibility .desk[aria-hidden="false"] {
	display: block;
}

article.compatibility .desk::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 0%, rgb(65 191 255 / 12%), transparent 34%),
        linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 26%);
}

article.compatibility .desk::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -38%;
    z-index: 0;
    display: block;
    width: 20%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 15%), transparent);
    opacity: 0;
    transform: translateX(-180%) skewX(-18deg);
}

article.compatibility.is-open .desk {
    position: absolute;
    top: 30px;
    width: calc(100% - 40px);    
    visibility: visible;
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 round 20px);
    pointer-events: auto;
    transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0) scale(1);
    transition-delay: 0.28s;
}

article.compatibility.is-open .desk::after {
    opacity: 1;
    transform: translateX(760%) skewX(-18deg);
    transition:
        transform 1.35s var(--compatibility-ease) 0.72s,
        opacity 0.35s ease 0.72s;
}

article.compatibility .desk h3,
article.compatibility .desk ol {
    position: relative;
    z-index: 1;
}

article.compatibility .desk h3 {
    margin: 0;
    padding: 0;
    color: rgb(255 255 255 / 76%);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(16px);
    transition:
        opacity 0.65s var(--compatibility-ease) 0.52s,
        filter 0.65s var(--compatibility-ease) 0.52s,
        transform 0.7s var(--compatibility-ease-out) 0.52s;
}

article.compatibility.is-open .desk h3 {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

article.compatibility .desk ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: compatibility-note;
}

article.compatibility .desk li {
    --item-index: 0;

    position: relative;
    display: block;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 15px 16px 15px 54px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 13px;
    background: rgb(255 255 255 / 4%);
    counter-increment: compatibility-note;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(24px) scale(0.98);
    transition:
        opacity 0.55s var(--compatibility-ease)
            calc(0.58s + var(--item-index) * 75ms),
        filter 0.55s var(--compatibility-ease)
            calc(0.58s + var(--item-index) * 75ms),
        transform 0.62s var(--compatibility-ease-out)
            calc(0.58s + var(--item-index) * 75ms),
        border-color 0.3s ease,
        background-color 0.3s ease;
}

article.compatibility .desk li:nth-child(1) { --item-index: 0; }
article.compatibility .desk li:nth-child(2) { --item-index: 1; }
article.compatibility .desk li:nth-child(3) { --item-index: 2; }
article.compatibility .desk li:nth-child(4) { --item-index: 3; }
article.compatibility .desk li:nth-child(5) { --item-index: 4; }
article.compatibility .desk li:nth-child(6) { --item-index: 5; }
article.compatibility .desk li:nth-child(7) { --item-index: 6; }
article.compatibility .desk li:nth-child(8) { --item-index: 7; }
article.compatibility .desk li:nth-child(9) { --item-index: 8; }

article.compatibility.is-open .desk li {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

article.compatibility .desk li::before {
    content: counter(compatibility-note, decimal-leading-zero);
    position: absolute;
    top: 15px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgb(65 191 255 / 34%);
    border-radius: 9px;
    background: rgb(65 191 255 / 8%);
    color: #8ed6ff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

article.compatibility .desk li:hover {
    border-color: rgb(65 191 255 / 28%);
    background: rgb(65 191 255 / 7%);
}

article.compatibility .desk p {
    margin: 0;
    padding: 0;
    color: rgb(255 255 255 / 78%);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.48;
}

article.compatibility .desk p + p {
    margin-top: 7px;
    color: rgb(255 255 255 / 58%);
}

@media (max-width: 760px) {
    article.compatibility {
        min-height: 760px;
        height: max(760px, calc(100svh - 60px));
    }

    article.compatibility .chart.pc {
        display: none;
    }

    article.compatibility .chart.mobile {
        display: block;
    }

    article.compatibility .wrapper {
        width: calc(100% - 32px);
        padding-top: 36px;
        padding-bottom: 36px;
    }

    article.compatibility h2 {
        max-width: 100%;
    }

    article.compatibility h2 .word.one {
        font-size: 42px;
    }

    article.compatibility h2 .word.two {
        margin-top: 10px;
        font-size: clamp(21px, 6vw, 30px);
    }

    article.compatibility button.plus {
        width: 48px;
        height: 48px;
    }

    article.compatibility .deskHeader {
        gap: 12px;
        margin-bottom: 16px;
    }

    article.compatibility button.plus.is-back {
        width: auto;
        min-width: 76px;
        height: 36px;
        padding: 0 14px;
    }

    article.compatibility .desk {
        width: 100%;
        max-height: calc(100% - 40px);
        padding: 22px 16px;
        border-radius: 16px;
    }

    article.compatibility.is-open .desk {
        clip-path: inset(0 round 16px);
    }

    article.compatibility .desk ol {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    article.compatibility .desk li {
        min-height: 0;
        padding: 13px 13px 13px 49px;
    }

    article.compatibility .desk li::before {
        top: 13px;
        left: 11px;
    }
}

@media (max-width: 550px) {
    section.itemCard article.compatibility h2 .word.one {
        font-size: 20px;
    }
    article.compatibility .chart.mobile {
        background-position: 50% 50%;
    }
}

@media (max-width: 420px) {
    section.itemCard article.compatibility {
        min-height: 720px;
        height: fit-content;
    }
    section.itemCard article.compatibility,
    section.itemCard article.compatibility .wrapper {
        height: fit-content;
    }

    section.itemCard article.compatibility .wrapper {
        width: calc(100% - 24px);
        height: fit-content;
    }

    article.compatibility .desk h3 {
        font-size: 14px;
    }

    article.compatibility .desk p {
        font-size: 12px;
    }
    section.itemCard article button.plus {
        zoom: 60%;
    }
    section.itemCard article.compatibility .desk {
        display: none;
        width: 100%;
        max-height: calc(100% - 40px);
        padding: 22px 16px;
        border-radius: 16px;
    }
    section.itemCard article.compatibility .desk[aria-hidden=false] {
        display: block;
        width: calc(100% - 40px);
    }
    html body section.itemCard article.thunderbolt {
        min-height: 500px;
        height: 500px;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    article.compatibility .chart,
    article.compatibility h2,
    article.compatibility h2 .word,
    article.compatibility button.plus,
    article.compatibility .desk,
    article.compatibility .desk::after,
    article.compatibility .desk h3,
    article.compatibility .desk li {
        transition: none;
    }

    article.compatibility .chart {
        opacity: 0.88;
        filter: brightness(0.76);
        transform: none;
    }

    article.compatibility h2 .word,
    article.compatibility button.plus {
        opacity: 1;
        filter: none;
        clip-path: none;
        transform: none;
    }

    article.compatibility .desk h3,
    article.compatibility .desk li {
        opacity: 1;
        filter: none;
        transform: none;
    }

    article.compatibility .desk::after {
        display: none;
    }
}

/* Compatibility chart */

/* Where to buy */

article.whereToBuy {
    display: block;
    width: 100%;
    padding: 30px 0 40px;
    background: linear-gradient(rgb(232, 232, 232), rgb(203 203 203));
    vertical-align: top;
    text-align: center;
}

article.whereToBuy:after {
    content: "";
    position: relative;
    z-index: 2;
    display: block;
    width: 600px;
    height: 200px;
    margin: 10px auto;
    background-image: url('../img/products/black-device.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

i.whereToBuy {
    width: 50px;
    height: 50px;
    display: block;
    margin: 30px auto 20px;
    background-color: #f9f9f9;
    background-image: url('../img/products/svg/cart-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100px;
}

article.whereToBuy h2 {
    margin: 0 auto;
    padding: 20px 0;
    font-size: 32px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #111;
}

article.whereToBuy p.intro {
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
    letter-spacing: 0.06em;
}

article.whereToBuy ul.sales li {
    background-color: #fff;
    border-radius: 8px;
    list-style: none;
}

article.whereToBuy ul.sales li a.btn {
    display: block;
    max-width: calc(100% - 40px);
    min-height: 36px;
    margin: 10px auto;
    border: 1px solid #e2e2e2;
    border-radius: 9px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 34px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.95;
}
article.whereToBuy ul.sales li a.btn#HardDrivesForSale {
    background: #0b94d1;
    border: none;
    color: #fff;    
}
article.whereToBuy ul.sales li a.btn#HardDrivesForSale:hover,
article.whereToBuy ul.sales li a.btn#HardDrivesForSale:target {
    background: #0985ba;
    color: #fff;    
}
article.whereToBuy ul.sales li a.btn#amazon {
    background: #fe9b1e;
    border: none;
    color: #fff;
}
article.whereToBuy ul.sales li a.btn#amazon:hover,
article.whereToBuy ul.sales li a.btn#amazon:target {
    background: rgb(255, 136, 0);
    color: #fcfcfc;
}

article.whereToBuy ul.sales li a.btn em {
    display: inline-block;
    width: calc(100% - 60px);
    height: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
}

article.whereToBuy ul.sales li a.btn i {
    position: relative;
    top: 10px;
    right: -10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/products/svg/arrow-right.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: top center;
    font-size: 0;
    vertical-align: top;
}

@media (min-width: 641px) {
    article.whereToBuy ul.sales {
        display: block;
        max-width: 660px;
        margin: 50px calc(50% - 330px) 0;
        padding: 0;
        list-style: none;
    }
    article.whereToBuy ul.sales li {
        display: inline-block;
        width: fit-content;
        margin: 0 0 20px 0;
        padding: 0;
    }
    article.whereToBuy ul.sales li:first-child {
        margin-right: 20px;
    }
    article.whereToBuy ul.sales li:last-child {
        margin-right: 0;
    }
    article.whereToBuy ul.sales li a {
        width: 300px;
    } 
}

/* Less 640px */

@media (max-width: 640px) {
    section.itemCard article.whereToBuy {
        padding-bottom: 40px;
    }
    article.whereToBuy ul.sales {
        display: block;
        max-width: 290px;
        margin: 30px calc(50% - 145px);
        padding: 0;
        list-style: none;
    }
    article.whereToBuy ul.sales li {
        display: block;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 0;
    }
    article.whereToBuy ul.sales li a {
        width: 320px;
    }
    article.whereToBuy:after {
        content: "";
        position: relative;
        z-index: 2;
        display: block;
        width: 320px;
        height: 120px;
        margin: 40px auto 20px auto;
        background-image: url('../img/products/black-device.webp');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }    
}



/* less 660px */

@media (max-width: 660px) { 
    section.itemCard .whatsIncluded ul li:nth-child(5) {
        margin-bottom: 30px;
    }
    , 
    section.itemCard .whatsIncluded ul li:nth-child(6) {
        margin-bottom: 0;
    }
}

/* less 440px */

@media (max-width: 440px) {
    body section.itemCard article.whereToBuy {
        height: fit-content;
    }
    section.itemCard article.whereToBuy:after {
        margin: 40px auto;
    }
}


article.whereToBuy ul.sales li {
    width: 290px;
    min-height: 160px;
    border: 1px solid #e2e2e2;
    border-radius: 9px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 34px;
}

article.whereToBuy ul.sales li a.btn:hover,
article.whereToBuy ul.sales li a.btn:focus-visible {
    border-color: #128abf;
    box-shadow: 0 12px 30px rgb(0 0 0 / 9%);
    outline: none;
    transform: translateY(-3px);
    opacity: 1;       
}

article.whereToBuy ul.sales li,
article.whereToBuy ul.sales li a {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.95;    
}

article.whereToBuy ul.sales li:hover,
article.whereToBuy ul.sales li:target {
    box-shadow: 0 2px 4px #ddd;
}

article.whereToBuy ul.sales li a.logoSign {
    display: block;
    width: 100%;
    height: 94px;
}

/* Укажи актуальные файлы логотипов */

article.whereToBuy ul.sales a.HardDrivesForSale {
    background-image: url('../img/wherebuy/hard-drives.svg');
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center center;
}

article.whereToBuy ul.sales a.Amazon {
    background-image: url('../img/wherebuy/amazon.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 65%; 
}

/* Where to buy */


article.display h2.slogan,
article.display h2.slogan > .word {
    text-transform: none !important;
}

article.display h2.slogan .hzLowercase {
    display: inline;
    font: inherit;
    text-transform: lowercase !important;
}