#productOverview {
    margin-top: 2rem;
    padding: 0;
}
.overview-section-divider {
    display: block;
    margin: 0 auto;
    padding: 0;
    height: 1px;
    background-image: linear-gradient(to right,
    #000000,
    var(--color-valo-brand-blue-dark) 30%,
    var(--color-valo-brand-blue) 50%,
    var(--color-valo-brand-blue-dark) 70%,
    #000000);
}
.valo-x-landing {
    --valo-blue: var(--color-valo-brand-blue);
    --valo-blue-dark: var(--color-valo-brand-blue-dark);
    --valo-panel: rgba(12, 13, 17, .7);
    --valo-gray-panel: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%), linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .5) 100%);
    background: #000000;
}

.valo-x-landing .valo-frame-inner {
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
}

.valo-x-landing .valo-demo-inner {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.valo-x-landing .valo-section-title {
    color: var(--valo-blue);
    font-weight: 600;
    line-height: 1.1;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

.valo-x-landing .valo-section-title strong {
    color: #ffffff;
    font-weight: 600;
}

.valo-x-landing .valo-display-title {
    font-size: 32px;
    line-height: 36px;
}

.valo-x-landing .valo-section-copy {
    font-size: 1rem;
    line-height: 1.5;
}

.valo-x-landing .valo-hero {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .95) 100%),
    url("https://images.ctfassets.net/wfptrcrbtkd0/6m0uNEsDxbL2JLQk27b9x6/fcaefdd73b68bdef5b4338e7acbda0bd/hero-bg.png?fm=webp&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.valo-x-landing .valo-why-card,
.valo-x-landing .valo-feature-card,
.valo-x-landing .valo-accessory-card {
    background: var(--valo-panel);
    border-radius: 20px;
}

.valo-x-landing .valo-hero-card {
    min-width: 17rem;
    background: transparent;
}
.valo-x-landing .valo-hero-card .valo-hero-card--current {
    transform: scale(1.07);
}

.valo-x-landing .valo-hero-swiper .swiper-wrapper {
    align-items: flex-start;
}

.valo-x-landing .valo-hero-card-link {
    color: inherit;
    text-decoration: none;
}

.valo-x-landing .valo-hero-card-link:hover,
.valo-x-landing .valo-hero-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.valo-x-landing .valo-hero-card-art {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.valo-x-landing .valo-hero-card--x .valo-hero-card-art,
.valo-x-landing .valo-hero-card--xg .valo-hero-card-art,
.valo-x-landing .valo-hero-card--xs .valo-hero-card-art {
    aspect-ratio: 474 / 788;
    transition: background-color .35s ease-in-out;
}

.valo-x-landing .valo-hero-card--x .valo-hero-card-art {
    aspect-ratio: 474 / 796.226;
    background-color: #31313122;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .5) 100%);
}

.valo-x-landing .valo-hero-card--x:hover .valo-hero-card-art,
.valo-x-landing .valo-hero-card--x:focus-within .valo-hero-card-art {
    background-color: #5f5f5f22;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .125) 0%, rgba(0, 0, 0, .25) 100%);
}

.valo-x-landing .valo-hero-card--xg .valo-hero-card-art {
    background-color: #9c9c9c22;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .1) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .3) 100%);
}

.valo-x-landing .valo-hero-card--xg:hover .valo-hero-card-art,
.valo-x-landing .valo-hero-card--xg:focus-within .valo-hero-card-art {
    background-color: #96969622;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .05) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .15) 100%);
}

.valo-x-landing .valo-hero-card--xs .valo-hero-card-art {
    background-color: #4fa5b522;
    background-image: linear-gradient(90deg, rgba(0, 166, 206, .3) 0%, rgba(0, 166, 206, .3) 100%),
    linear-gradient(180deg, rgba(0, 166, 206, .3) 0%, rgba(0, 166, 206, .09) 100%);
}

.valo-x-landing .valo-hero-card--xs:hover .valo-hero-card-art,
.valo-x-landing .valo-hero-card--xs:focus-within .valo-hero-card-art {
    background-color: #78a4ac22;
    background-image: linear-gradient(90deg, rgba(0, 166, 206, .15) 0%, rgba(0, 166, 206, .15) 100%),
    linear-gradient(180deg, rgba(0, 166, 206, .15) 0%, rgba(0, 166, 206, .045) 100%);
}

.valo-x-landing .valo-xg-card-logo,
.valo-x-landing .valo-xg-card-copy,
.valo-x-landing .valo-xg-card-product,
.valo-x-landing .valo-xg-card-badge {
    position: absolute;
}

.valo-x-landing .valo-xg-card-logo {
    top: 5.75%;
    left: 22.35%;
    width: 55.3%;
    z-index: 3;
}

.valo-x-landing .valo-hero-card--xs .valo-xg-card-logo {
    top: 5.6%;
    left: 22.4%;
    width: 55.2%;
}

.valo-x-landing .valo-hero-card--x .valo-xg-card-logo {
    top: 5.6%;
    left: 22.4%;
    width: 55.2%;
}

.valo-x-landing .valo-xg-card-copy {
    left: 0;
    width: 100%;
    z-index: 3;
    color: #ffffff;
    text-align: center;
    line-height: 1.5;
    text-shadow: 0 4px 15px rgba(0, 0, 0, .25);
}

.valo-x-landing .valo-xg-card-copy--lens {
    top: 18.25%;
    font-size: 20px;
    font-weight: 400;
}

.valo-x-landing .valo-xg-card-copy--link {
    top: 23.35%;
    font-size: 20px;
    font-weight: 700;
}

.valo-x-landing .valo-xg-card-badge {
    top: 38.1%;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 26.5%;
    height: 5.6%;
    padding-right: 1rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    isolation: isolate;
    letter-spacing: 0;
    line-height: 28px;
    opacity: 1;
    overflow: visible;
    transition: opacity .2s ease-in-out, transform .35s ease-in-out;
}

.valo-x-landing .valo-xg-card-badge:before,
.valo-x-landing .valo-xg-card-badge:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
}

.valo-x-landing .valo-xg-card-badge:before {
    right: 0;
    width: 100%;
    z-index: -1;
    background: linear-gradient(90deg, #575757 0%, #000000 100%);
    clip-path: polygon(20.8% 0, 100% 0, 100% 100%, 0 100%);
}

.valo-x-landing .valo-xg-card-badge:after {
    left: -8.7%;
    width: 25.7%;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 37.3801 43.9766' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.9541 0.75L6.75195 43.2266H1.42578L30.6279 0.75H35.9541Z' stroke='url(%23paint0_linear_0_130)' stroke-width='1.5'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_0_130' x1='18.6901' y1='0' x2='18.6901' y2='43.9766' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300A6CE'/%3E%3Cstop offset='1' stop-color='%23410099'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.valo-x-landing .valo-hero-card--xg:hover .valo-xg-card-badge,
.valo-x-landing .valo-hero-card--xg:focus-within .valo-xg-card-badge,
.valo-x-landing .valo-hero-card--xs:hover .valo-xg-card-badge,
.valo-x-landing .valo-hero-card--xs:focus-within .valo-xg-card-badge {
    opacity: 0;
    transform: translateX(1rem);
}

.valo-x-landing .valo-xg-card-product {
    top: var(--xg-top);
    left: var(--xg-left);
    z-index: var(--xg-z);
    width: var(--xg-width);
    transform: translate3d(0, 0, 0) rotate(var(--xg-rotate)) scale(var(--xg-scale));
    transform-origin: var(--xg-origin);
    transition: top .55s cubic-bezier(.22, .61, .36, 1), left .55s cubic-bezier(.22, .61, .36, 1), width .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: top, left, width, transform;
}

.valo-x-landing .valo-xg-card-product img,
.valo-x-landing .valo-xg-card-logo img,
.valo-x-landing .valo-x-card-product img {
    display: block;
    width: 100%;
    height: auto;
}

.valo-x-landing .valo-x-card-product {
    position: absolute;
    top: var(--valo-x-top);
    left: var(--valo-x-left);
    z-index: var(--valo-x-z);
    width: var(--valo-x-width);
    opacity: var(--valo-x-opacity, 1);
    transform: translate3d(-50%, var(--valo-x-y-shift, 0), 0) rotate(var(--valo-x-rotate, 0deg)) scale(var(--valo-x-scale, 1));
    transform-origin: 50% 8%;
    transition: top .55s cubic-bezier(.22, .61, .36, 1), left .55s cubic-bezier(.22, .61, .36, 1), opacity .25s ease-in-out, transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: top, left, opacity, transform;
}

.valo-x-landing .valo-x-card-product--side {
    --valo-x-width: 170%;
    --valo-x-rotate: 90deg;
    --valo-x-y-shift: 100%;
    transform-origin: 50% 50%;
}

.valo-x-landing .valo-x-card-product--pink {
    --valo-x-top: 83.5%;
    --valo-x-left: 18%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--blue {
    --valo-x-top: 80.5%;
    --valo-x-left: 26.5%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--purple {
    --valo-x-top: 78%;
    --valo-x-left: 35%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--silver {
    --valo-x-top: 83.5%;
    --valo-x-left: 83%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--green {
    --valo-x-top: 80.5%;
    --valo-x-left: 75%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--red {
    --valo-x-top: 78%;
    --valo-x-left: 67%;
    --valo-x-z: 1;
}

.valo-x-landing .valo-x-card-product--rear {
    --valo-x-top: 37.8%;
    --valo-x-left: 43%;
    --valo-x-width: 20.5%;
    --valo-x-z: 6;
}

.valo-x-landing .valo-x-card-product--front {
    --valo-x-top: 29.2%;
    --valo-x-left: 57%;
    --valo-x-width: 23.8%;
    --valo-x-z: 7;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--side,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--side {
    --valo-x-opacity: 0;
    --valo-x-scale: .9;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--pink,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--pink {
    --valo-x-left: -22%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--blue,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--blue {
    --valo-x-left: -12%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--purple,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--purple {
    --valo-x-left: -2%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--red,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--red {
    --valo-x-left: 104%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--silver,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--silver {
    --valo-x-left: 116%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--green,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--green {
    --valo-x-left: 126%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--rear,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--rear {
    --valo-x-top: 35.5%;
    --valo-x-left: 43.5%;
}

.valo-x-landing .valo-hero-card--x:hover .valo-x-card-product--front,
.valo-x-landing .valo-hero-card--x:focus-within .valo-x-card-product--front {
    --valo-x-top: 29.2%;
    --valo-x-left: 57%;
}

.valo-x-landing .valo-xg-card-product--rear {
    --xg-top: 41.5%;
    --xg-left: 31.7%;
    --xg-width: 22%;
    --xg-rotate: 0deg;
    --xg-scale: 0.8;
    --xg-origin: 50% 7%;
    --xg-z: 1;
}

.valo-x-landing .valo-xg-card-product--front {
    --xg-top: 32.5%;
    --xg-left: 48.7%;
    --xg-width: 22%;
    --xg-rotate: 0deg;
    --xg-scale: 1.0;
    --xg-origin: 50% 7%;
    --xg-z: 2;
}

.valo-x-landing .valo-hero-card--xg:hover .valo-xg-card-product--rear,
.valo-x-landing .valo-hero-card--xg:focus-within .valo-xg-card-product--rear,
.valo-x-landing .valo-hero-card--xs:hover .valo-xg-card-product--rear,
.valo-x-landing .valo-hero-card--xs:focus-within .valo-xg-card-product--rear {
    --xg-top: 31.6%;
    --xg-left: 65.3%;
    --xg-width: 22%;
    --xg-rotate: 28deg;
    --xg-scale: 0.55;
}

.valo-x-landing .valo-hero-card--xg:hover .valo-xg-card-product--front,
.valo-x-landing .valo-hero-card--xg:focus-within .valo-xg-card-product--front,
.valo-x-landing .valo-hero-card--xs:hover .valo-xg-card-product--front,
.valo-x-landing .valo-hero-card--xs:focus-within .valo-xg-card-product--front {
    --xg-top: 31.7%;
    --xg-left: 12.6%;
    --xg-width: 22%;
    --xg-rotate: -28deg;
    --xg-scale: 0.55;
}

.valo-x-landing .valo-hero-card-link:focus {
    outline: none;
}

.valo-x-landing .valo-hero-card-link:focus .valo-hero-card-art,
.valo-x-landing .valo-hero-card-link:focus-visible .valo-hero-card-art {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--valo-blue);
}

@media (prefers-reduced-motion: reduce) {
    .valo-x-landing .valo-hero-card-image,
    .valo-x-landing .valo-x-card-product,
    .valo-x-landing .valo-xg-card-product,
    .valo-x-landing .valo-xg-card-badge,
    .valo-x-landing .valo-hero-card--x .valo-hero-card-art,
    .valo-x-landing .valo-hero-card--xg .valo-hero-card-art {
        transition: none;
    }
}

.valo-x-landing .valo-video-band {
    min-height: 24rem;
    background: #000000;
}

.valo-x-landing .valo-video-panel {
    display: block;
    position: relative;
    overflow: hidden;
}

.valo-x-landing .valo-video-panel.is-video-loaded {
    background: #000000;
}

.valo-x-landing .valo-video-panel img {
    width: 100%;
    display: block;
}

.valo-x-landing .valo-video-panel iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.valo-x-landing .valo-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    border-radius: 9999px;
    background: #000000;
}
.valo-x-landing .valo-video-play:hover {
    background-color: #202020;
}

.valo-x-landing .valo-video-play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 53%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-top: .7rem solid transparent;
    border-bottom: .7rem solid transparent;
    border-left: 1rem solid #ffffff;
}

.valo-x-landing .valo-middle-sections {
    background-color: #ffffff;
    background-image: url("https://images.ctfassets.net/wfptrcrbtkd0/7aYLLtge30igCOHhNrBJQT/9c59602aece38445d25ce663c3219175/middle-sections-bg.jpg?fm=webp&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.valo-x-landing .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.valo-x-landing .valo-why-section {
    overflow: hidden;
    background: transparent;
}

.valo-x-landing .valo-why-card {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 505px;
    max-width: calc(100vw - 48px);
    min-height: 700px;
    background: var(--valo-gray-panel);
}

.valo-x-landing .valo-why-card h3 {
    height: 3rem;
    overflow: hidden;
    font-size: 20px;
    line-height: 30px;
}

.valo-x-landing .valo-why-card p {
    flex: 1 1 auto;
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 30px;
}

.valo-x-landing .valo-why-card img {
    flex: 0 0 auto;
    width: 100%;
    height: 381px;
    margin-top: auto;
}

.valo-x-landing .valo-why-card .valo-image-contain {
    object-fit: contain;
}

.valo-x-landing .valo-why-lenses-image {
    position: relative;
    width: 100%;
    height: 381px;
    overflow: hidden;
}

.valo-x-landing .valo-why-lenses-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45.7%, #000000 121.3%);
    pointer-events: none;
}

.valo-x-landing .valo-why-lenses-image img {
    position: absolute;
    top: 0;
    left: -46.6%;
    width: 193.2%;
    height: 182%;
    max-width: none;
    object-fit: cover;
}

.valo-x-landing .valo-why-demo-image {
    position: relative;
    width: 100%;
    height: 381px;
    overflow: hidden;
}

.valo-x-landing .valo-why-demo-image img {
    position: absolute;
    top: -15.62%;
    left: -30.02%;
    width: 153.21%;
    height: 118.64%;
    max-width: none;
    object-fit: cover;
    border: 0;
}

.valo-x-landing .valo-why-demo-link {
    position: absolute;
    top: 45.1%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 199px;
    padding: 8px 12px;
    transform: translateX(-50%);
    border: 1px solid var(--valo-blue);
    border-radius: 9999px;
    background: rgba(0, 0, 0, .4);
    color: var(--valo-blue);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.valo-x-landing .valo-why-demo-link:hover,
.valo-x-landing .valo-why-demo-link:focus {
    color: var(--valo-white);
    border-color: var(--valo-white);
    text-decoration: none;
}

.valo-x-landing .valo-family-section {
    background: transparent;
}

.valo-x-landing .valo-family-tabs {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    background: rgba(0, 0, 0, .5);
    border-radius: 9999px;
    padding: .5rem;
    gap: .5rem;
}

.valo-x-landing .valo-family-tabs a,
.valo-x-landing .valo-family-tabs button {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
    border-radius: 9999px;
    color: #e0e8f2;
    padding: .5rem 1rem;
}

.valo-x-landing .valo-family-tabs a:first-child,
.valo-x-landing .valo-family-tabs button.is-active,
.valo-x-landing .valo-family-tabs button[aria-pressed="true"] {
    background: #019dde;
    border-color: #019dde;
}

.valo-x-landing .valo-family-layout {
    max-width: 1212px;
    margin: 0 auto;
}

.valo-x-landing .valo-family-product-configurator {
    aspect-ratio: 500 / 1396;
    max-width: 500px;
    position: relative;
    width: min(100%, 360px);
}

.valo-x-landing .valo-family-wand {
    opacity: .5;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transition: height .42s ease, left .42s ease, opacity .42s ease, top .42s ease, width .42s ease;
    z-index: 1;
}

.valo-x-landing .valo-family-wand-image {
    display: block;
    max-width: none;
    pointer-events: none;
    position: absolute;
    width: auto;
    transition: height .42s ease, left .42s ease, top .42s ease, width .42s ease;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-wand--x,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-wand--xg,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-wand--xs {
    height: 83.166%;
    left: 28.2%;
    opacity: 1;
    top: 16.834%;
    width: 42.8%;
    z-index: 3;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-wand--xg,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-wand--xs,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-wand--x {
    height: 47.994%;
    left: 0;
    top: 0;
    width: 24.7324%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-wand--xs,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-wand--x,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-wand--xg {
    height: 47.994%;
    left: 74.7%;
    top: 0;
    width: 24.7324%;
}

.valo-x-landing .valo-family-wand--x .valo-family-wand-image {
    height: 111.49%;
    left: -50.65%;
    top: -4.18%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-wand--x .valo-family-wand-image {
    height: 110.68%;
    left: -50.05%;
    top: -5.34%;
}

.valo-x-landing .valo-family-wand--xg .valo-family-wand-image,
.valo-x-landing .valo-family-wand--xs .valo-family-wand-image {
    height: 113.52%;
    left: -257.93%;
    top: -1.49%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-wand--xg .valo-family-wand-image {
    height: 111.71%;
    left: -253.04%;
    top: -1.81%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-wand--xs .valo-family-wand-image {
    height: 111.11%;
    left: -251.4%;
    top: -1.21%;
}

.valo-x-landing .valo-family-lens-links {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 4;
}

.valo-x-landing .valo-family-lens-link {
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    line-height: 24px;
    opacity: .5;
    padding: 2px 0;
    pointer-events: auto;
    position: absolute;
    left: 40%;
    text-align: right;
    transform: translateX(-100%);
    transition: font-size .24s ease, line-height .24s ease, opacity .24s ease, top .24s ease;
    white-space: nowrap;
}

.valo-x-landing .valo-family-lens-link.is-active,
.valo-x-landing .valo-family-lens-link[aria-pressed="true"] {
    font-size: 16px;
    line-height: 30px;
    opacity: 1;
}
.valo-x-landing .valo-family-lens-link.is-active:focus {
    border: 0;
    outline: 0;
}

.valo-x-landing .valo-family-lens-link--x,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-lens-link--x,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-lens-link--x {
    top: 19.48%;
}

@media screen and (min-width: 752px) {
    .valo-x-landing .valo-family-product-configurator {
        width: min(100%, 430px);
    }

    .valo-x-landing .valo-family-lens-link.is-active,
    .valo-x-landing .valo-family-lens-link[aria-pressed="true"] {
        font-size: 20px;
    }
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-lens-link--x,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-lens-link--xg,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-lens-link--xs {
    top: 21.85%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-lens-link--xg,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-lens-link--x {
    top: 19.48%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="x"] .valo-family-lens-link--xs,
.valo-x-landing .valo-family-product-configurator[data-active-model="xg"] .valo-family-lens-link--xs,
.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-lens-link--xg {
    top: 24.64%;
}

.valo-x-landing .valo-family-product-configurator[data-active-model="xs"] .valo-family-lens-link--x {
    top: 19.48%;
}

.valo-x-landing .valo-feature-card {
    border: 1px solid #ffffff;
    overflow: hidden;
    background: var(--valo-gray-panel);
}

.valo-x-landing .valo-feature-card h3 {
    font-size: 20px;
    line-height: 24px;
}

.valo-x-landing .valo-feature-card p {
    font-size: 20px;
    line-height: 30px;
}

.valo-x-landing .valo-feature-content[hidden] {
    display: none;
}

.valo-x-landing .valo-feature-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 21px;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 9999px;
    color: var(--valo-blue);
    line-height: 1;
}

.valo-x-landing .valo-feature-toggle:after {
    align-items: center;
    background-image: linear-gradient(var(--valo-blue), var(--valo-blue)), linear-gradient(var(--valo-blue), var(--valo-blue));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 2px, 2px 10px;
    border: 1px solid var(--valo-blue);
    border-radius: 9999px;
    content: "";
    display: inline-flex;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
}

.valo-x-landing .valo-feature-toggle[aria-expanded="true"]:after {
    background-size: 10px 2px, 0 10px;
}

.valo-x-landing .valo-feature-toggle:focus,
.valo-x-landing .valo-video-panel:focus,
.valo-x-landing .valo-family-tabs a:focus,
.valo-x-landing .valo-family-tabs button:focus,
.valo-x-landing .valo-family-lens-link:focus {
    outline: 2px solid var(--valo-blue);
    outline-offset: 3px;
}

.valo-x-landing .valo-demo-card img {
    height: 100%;
    object-fit: cover;
}

.valo-x-landing .valo-demo-section {
    background: #040404;
}

.valo-x-landing .valo-accessories-swiper,
.valo-x-landing .valo-why-swiper {
    overflow: hidden;
}

.valo-x-landing .valo-accessories-swiper .swiper-wrapper,
.valo-x-landing .valo-why-swiper .swiper-wrapper {
    align-items: stretch;
}

.valo-x-landing .valo-accessories-swiper .swiper-slide,
.valo-x-landing .valo-why-swiper .swiper-slide {
    display: flex;
    height: auto;
}

.valo-x-landing .valo-accessory-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 602px;
    width: 368px;
    max-width: calc(100vw - 48px);
}

.valo-x-landing .valo-accessory-card .button {
    margin-top: auto;
    align-self: flex-start;
}

.valo-x-landing .valo-accessory-image {
    height: 236px;
    object-fit: contain;
}

.valo-x-landing .valo-accessory-card h3,
.valo-x-landing .valo-accessory-card p {
    font-size: 20px;
    line-height: 30px;
}

.valo-x-landing .valo-swiper-button {
    position: static;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 0;
    background: transparent;
    outline: none;
}

.valo-x-landing .valo-swiper-button:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("https://images.ctfassets.net/wfptrcrbtkd0/4yl5t5wzbByn8lJH5lIdV4/6e65bb0f0b73d261030e08a1e27f7bc3/VALO-X-Arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.valo-x-landing .swiper-button-prev > svg,
.valo-x-landing .swiper-button-next > svg {
    display: none;
}

.valo-x-landing .swiper-button-prev.valo-swiper-button:after {
    transform: scaleX(-1);
}

@media screen and (min-width: 752px) {
    .valo-x-landing .valo-section-copy {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .valo-x-landing .valo-why-card {
        max-width: none;
    }

    .valo-x-landing .valo-display-title {
        font-size: 64px;
        line-height: 68px;
    }
}

@media screen and (max-width: 1023px) {
    .valo-x-landing .valo-hero {
        padding-top: 20px;
    }

    .valo-x-landing .valo-hero .valo-display-title {
        max-width: 335px;
        font-size: 48px;
        line-height: 58px;
    }

    .valo-x-landing .valo-hero-swiper {
        overflow: hidden;
    }

    .valo-x-landing .valo-hero-card {
        width: clamp(214.5px, 70vw, 474px);
        min-width: 0;
    }

    .valo-x-landing .valo-hero-card-link {
        width: 100%;
    }

    .valo-x-landing .valo-hero-card-art {
        width: 83.92%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        border-radius: 8px;
    }

    .valo-x-landing .valo-xg-card-copy--lens {
        font-size: 12px;
        line-height: 16px;
    }

    .valo-x-landing .valo-xg-card-copy--link {
        font-size: 16px;
        line-height: 24px;
    }

    .valo-x-landing .valo-xg-card-badge {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }

    .valo-x-landing .valo-hero-card .valo-section-copy {
        padding: 6.5px 9.8px 0;
        font-size: 16px;
        line-height: 24px;
    }

    .valo-x-landing .valo-why-card {
        width: 70%;
        max-width: 505px;
    }

    .valo-x-landing .valo-accessory-card {
        width: 70%;
        max-width: 368px;
    }
}

@media screen and (min-width: 1024px) {
    .valo-x-landing .valo-hero-swiper {
        overflow: visible;
    }

    .valo-x-landing .valo-hero-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px;
        transform: none !important;
    }

    .valo-x-landing .valo-hero-card {
        width: auto !important;
        min-width: 0;
        margin-right: 0 !important;
    }

    .valo-x-landing .valo-hero-card-link {
        width: auto;
        max-width: none;
    }

    .valo-x-landing .valo-hero-card-art {
        width: 100%;
    }

    .valo-x-landing .valo-family-layout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 140px;
    }

    .valo-x-landing .valo-feature-card {
        width: 504px;
        max-width: 100%;
    }

}

/* Shared VALO X/XS/XG overview styles */
.valo-x-landing-overview .valo-hero {
    position: relative;
    overflow: hidden;
    background-color: #040404;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 72%, #000000 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url('https://images.ctfassets.net/wfptrcrbtkd0/6m0uNEsDxbL2JLQk27b9x6/fcaefdd73b68bdef5b4338e7acbda0bd/hero-bg.png?fm=webp&q=80');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
    min-height: 757px;
}

.valo-x-landing-overview .valo-hero .valo-frame-inner {
    position: relative;
    z-index: 1;
}

.valo-x-landing-overview .valo-hero-copy {
    max-width: 303px;
    margin: 0 auto 56px;
    text-align: center;
}

.valo-x-landing-overview .valo-hero-copy h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
}

.valo-x-landing-overview .valo-hero-copy p {
    font-size: 16px;
    line-height: 24px;
}

.valo-x-landing-overview .valo-hero-swiper {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    padding-left: 41px;
}

.valo-x-landing-overview .valo-hero-swiper .swiper-wrapper {
    align-items: stretch;
}

.valo-x-landing.valo-x-landing-overview .valo-hero-card-link {
    transform-origin: center;
    transition: transform 0.25s ease-in-out;
}

.valo-x-landing-overview .valo-hero-card {
    --valo-hero-card-width: clamp(214px, 80vw, 340px);

    flex: 0 0 auto;
    width: var(--valo-hero-card-width);
}

.valo-x-landing-overview .valo-hero-card-link {
    min-width: 0;
}

.valo-x-landing-overview .valo-hero-card-art {
    aspect-ratio: 340 / 546;
    border-radius: 8px;
    height: auto;
    margin-bottom: 0;
}

.valo-x-landing-overview .valo-xg-card-logo {
    transform: scale(0.58);
    transform-origin: top center;
}

.valo-x-landing-overview .valo-xg-card-copy--lens {
    font-size: 14px;
    line-height: 19px;
}

.valo-x-landing-overview .valo-xg-card-copy--link {
    font-size: 17px;
    line-height: 26px;
}

.valo-x-landing-overview .valo-xg-card-badge {
    transform: scale(0.72);
    transform-origin: top right;
}

@media screen and (max-width: 1023px) {
    .valo-x-landing.valo-x-landing-overview .valo-hero-swiper {
        overflow: visible;
        padding-bottom: 48px;
        padding-top: 24px;
    }
}

@media screen and (min-width: 1024px) {
    .valo-x-landing-overview .valo-hero {
        padding: 8rem 2rem;
        background-size: cover;
        background-position: center;
    }

    .valo-x-landing-overview .valo-hero .valo-frame-inner {
        align-items: center;
        gap: 48px;
        max-width: 1680px;
        margin: 0 auto;
    }

    .valo-x-landing-overview .valo-hero-copy {
        flex: 0 0 488px;
        max-width: 488px;
        margin: 0 auto 56px;
        text-align: center;
    }

    .valo-x-landing-overview .valo-hero-copy h2 {
        font-size: 64px;
        line-height: 68px;
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    .valo-x-landing-overview .valo-hero-copy p {
        font-size: 20px;
        line-height: 28px;
        max-width: 475px;
    }

    .valo-x-landing-overview .valo-hero-swiper {
        max-width: 1140px;
        margin: 0 auto;
        overflow: visible;
        padding: 0;
    }

    .valo-x-landing-overview .valo-hero-swiper .swiper-wrapper {
        display: grid;
        gap: clamp(24px, 3vw, 48px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        transform: none !important;
    }

    .valo-x-landing-overview .valo-hero-card {
        flex: initial;
        justify-self: center;
        width: auto !important;
        max-width: 340px;
    }

    .valo-x-landing-overview .valo-hero-card-art {
        height: 546px;
        border-radius: 15px;
    }

    .valo-x-landing-overview .valo-hero-card--x .valo-hero-card-art {
        height: 543px;
    }

    .valo-x-landing-overview .valo-xg-card-logo {
        transform: none;
    }

    .valo-x-landing-overview .valo-xg-card-copy--lens {
        font-size: 15px;
        line-height: 23px;
    }

    .valo-x-landing-overview .valo-xg-card-copy--link {
        font-size: 15px;
        line-height: 23px;
    }

    .valo-x-landing-overview .valo-xg-card-badge {
        transform: none;
    }
}

@media screen and (min-width: 1800px) {
    .valo-x-landing-overview .valo-hero .valo-frame-inner {
        display: flex;
    }

    .valo-x-landing-overview .valo-hero-copy {
        margin: 0;
        text-align: left;
    }

    .valo-x-landing-overview .valo-hero-swiper {
        flex: 1 1 auto;
        margin: 0;
        max-width: none;
    }

    .valo-x-landing-overview .valo-hero-swiper .swiper-wrapper {
        display: flex;
        gap: 53px;
    }

    .valo-x-landing-overview .valo-hero-card {
        flex: 1 1 0;
        justify-self: auto;
    }
}

.valo-clinical-excellence-section {
    background-image: linear-gradient(180deg, #000000 50%, rgba(0, 0, 0, 0) 80%), url(https://images.ctfassets.net/wfptrcrbtkd0/29eN88ZJWBW5ILMU05Qg9e/37a149d95d4c44a6a9f28d792c67ab1c/Section_04_-_Versatile___Easy.jpg?fm=webp&q=80);
    background-repeat: no-repeat;
    background-size: 180%;
    background-position: calc(50% + 16px) bottom;
    padding-bottom: 200px;
}

.valo-clinical-excellence-gallery {
    position: relative;
    margin: 0 auto;
    max-width: 563px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.valo-clinical-excellence-gallery-frame {
    border-radius: 15px;
    background: #111111;
    overflow: hidden;
    aspect-ratio: 845 / 575;
}

.valo-clinical-excellence-gallery-button {
    border-radius: 15px;
    background: #111111;
}

.valo-clinical-excellence-gallery-frame:focus,
.valo-clinical-excellence-gallery-button:focus {
    outline: none;
}

.valo-clinical-excellence-gallery img,
.valo-clinical-excellence-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.valo-clinical-excellence-gallery-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.valo-clinical-excellence-gallery-button {
    position: relative;
    aspect-ratio: 272 / 284;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease-in-out;
}

.valo-clinical-excellence-gallery-button[aria-pressed="true"] {
    cursor: default;
    transform: scale(1.08);
    z-index: 2;
}

.valo-family-section .valo-feature-card {
    background: rgba(0, 0, 0, 0.8);
    border-color: #ffffff;
    border-radius: 20px;
    width: auto !important;
}

.valo-family-section .valo-feature-card h3 {
    color: #00a9ce;
}

.valo-family-section .valo-feature-content {
    margin-top: 16px;
}

.valo-family-section .valo-feature-content p {
    color: #ffffff;
    margin-bottom: 16px;
}

.valo-family-section .valo-feature-colors {
    border-radius: 15px;
    height: 165px;
}

.valo-family-section .valo-feature-image {
    border-radius: 15px;
}

.valo-family-section .valo-feature-colors {
    align-items: center;
    background: rgba(0, 0, 0, 0.23);
    display: flex;
    gap: clamp(18px, 6.95%, 38px);
    justify-content: center;
    padding: 25px 29px;
    height: auto;
}

.valo-family-section .valo-feature-color-swatch {
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    display: block;
    flex: 0 0 31px;
    height: 31px;
    padding: 0;
    width: 31px;
}

.valo-family-section .valo-feature-color-swatch:focus {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.valo-family-section .valo-feature-color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #00a9ce, 0 0 0 5px rgba(0, 169, 206, 0.24);
}

.valo-family-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #040404;
}

.valo-family-section .valo-frame-inner {
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 1024px) {
    .valo-x-landing .valo-family-layout > div:first-child {
        flex: 0 0 500px;
    }

    .valo-x-landing .valo-family-product-configurator {
        width: min(100%, 500px);
    }

    .valo-x-landing .valo-family-layout > div:last-child {
        flex: 0 0 504px;
        width: 504px;
    }

    .valo-x-landing .valo-family-layout .valo-feature-card {
        width: 100% !important;
    }
}

.valo-xs-features-section {
    background: #000000;
    overflow: hidden;
}

.valo-xs-features-copy {
    max-width: 1222px;
}

.valo-xs-features-image-wrap {
    margin: 0 auto;
    max-width: 1344px;
    padding: 0;
}

.valo-xs-features-image {
    display: block;
    height: auto;
}

.valo-xs-features-image--mobile {
    margin: 0 auto;
    max-width: 375px;
    width: 100%;
}

.valo-xs-features-image--desktop {
    display: none;
    width: 100%;
}

.valo-pediatric-section {
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.valo-pediatric-mobile {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 375px;
    min-height: 910px;
    padding: 29px 4px 32px;
}

.valo-pediatric-heading {
    color: #00a9ce;
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
    margin: 0 auto 15px;
    max-width: 303px;
    text-align: center;
}

.valo-pediatric-heading span {
    color: #ffffff;
}

.valo-pediatric-image {
    display: block;
    height: auto;
    margin: 0 auto;
    width: min(100%, 368px);
}

.valo-pediatric-copy {
    color: #ffffff;
    font-family: "ABC Whyte", "Source Sans Pro", sans-serif;
    font-size: 16px;
    letter-spacing: -0.16px;
    line-height: 24px;
    margin: 23px auto 0;
    max-width: 303px;
    text-align: center;
}

.valo-pediatric-copy p {
    margin: 0;
}

.valo-pediatric-copy p + p {
    margin-top: 24px;
}

.valo-pediatric-desktop {
    display: none;
}

/* Shared VALO feature and carousel styles */
.valo-xg-feature-section {
    background: #000000;
    position: relative;
}

.valo-xg-feature-carousel {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/7wJR9FYM1cI1qTHcbmgR6Y/abf6663f2ba5a34a511378c3a101acf5/feature-carousel-background.jpg?fm=webp&q=80');
    background-size: cover;
}

.valo-xg-feature-section:before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.54) 100%), url('https://images.ctfassets.net/wfptrcrbtkd0/o4HSJhBBkLobG04e3sfI3/64fcff63339802974e7c36e3decd219e/streamlined-bg.png?fm=webp&q=80');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    inset: 0;
    opacity: 0.92;
    position: absolute;
    z-index: 0;
}

.valo-xg-feature-inner {
    margin: 0 auto;
    max-width: 1344px;
    text-align: center;
}

.valo-xg-feature-heading {
    color: #00a9ce;
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
    margin: 0 auto;
    max-width: 768px;
}

.valo-xg-feature-tabs-wrap {
    display: none;
    justify-content: center;
    margin-top: 16px;
}

.valo-xg-feature-tabs {
    align-items: center;
    background: rgba(77, 77, 77, 0.3);
    border-radius: 100px;
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
}

.valo-xg-feature-tabs::-webkit-scrollbar {
    display: none;
}

.valo-xg-feature-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px !important;
    color: #00a9ce;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    padding: 4px 10px;
    text-transform: uppercase;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.valo-xg-feature-tab:hover,
.valo-xg-feature-tab:focus {
    border-color: #00a9ce;
    outline: none;
}

.valo-xg-feature-tab.is-active {
    background: #00a9ce;
    border-color: #535353;
    color: #ffffff;
}

.valo-xg-feature-carousel {
    --valo-xg-feature-controls-top: 360px;

    margin-top: 24px;
    position: relative;
}

.valo-xg-feature-swiper {
    overflow: hidden;
}

.valo-xg-feature-slide {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
}

.valo-xg-feature-copy {
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto;
    max-width: 768px;
    padding: 0 42px;
    text-align: center;
}

.valo-xg-feature-copy sup {
    font-size: 65%;
    line-height: 0;
}

.valo-xg-feature-image-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 24px -16px 0;
    overflow: hidden;
    width: calc(100% + 32px);
}

.valo-xg-feature-image {
    display: block;
    flex: 0 0 auto;
    height: auto;
    max-width: none;
    width: min(950px, 254vw);
}

.valo-xg-feature-image--fade-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.75) 8%, #000000 18%);
    mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.75) 8%, #000000 18%);
}

.valo-xg-feature-controls {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: var(--valo-xg-feature-controls-top);
    transform: translateY(-50%);
    z-index: 3;
}

.valo-xg-feature-controls .valo-swiper-button {
    pointer-events: auto;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-section {
    background: #000000;
    overflow: hidden;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-swiper {
    overflow: hidden;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-swiper .swiper-wrapper {
    align-items: stretch;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-swiper .swiper-slide {
    width: 70%;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-card {
    background: #010101;
    border: 1px solid #00a9ce;
    border-radius: 16px;
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    height: auto;
    max-width: calc(100vw - 48px);
    min-height: 578px;
    overflow: hidden;
    padding: 16px 8px !important;
    width: 426px;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-card-image {
    background: #000000;
    border: 1px solid #000000;
    display: block;
    flex: 0 0 auto;
    height: 263px;
    margin: 0 auto 16px;
    max-width: 100%;
    object-fit: cover;
    width: auto;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-copy {
    color: #ffffff;
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 30px;
    margin: 0;
    padding: 0 16px;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-copy sup {
    font-size: 65%;
    line-height: 0;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-demo-button {
    align-items: center;
    align-self: flex-start;
    background: #e35205;
    border: 0;
    border-radius: 3px;
    color: #ffffff;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 16px;
    margin: 20px 16px 0;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
}

.valo-x-landing.valo-x-landing-overview .valo-xg-additional-demo-button:hover,
.valo-x-landing.valo-x-landing-overview .valo-xg-additional-demo-button:focus {
    color: #ffffff;
    text-decoration: none;
}

.valo-family-color-backgrounds,
.valo-family-color-background {
    position: absolute;
    inset: 0;
}

.valo-family-color-backgrounds {
    z-index: 0;
    pointer-events: none;
}

.valo-family-color-background {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/5aPBMUWFpyp8EfDLsYcuK4/04bdc62da81600639ae633041f685d71/valo-carousel-bg-black.jpg?fm=webp&q=80');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
}

.valo-family-color-background.is-active {
    opacity: 1;
}

.valo-family-color-background:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.78));
}

.valo-color-product-carousel {
    position: relative;
    max-height: 480px;
    width: min(100%, 563px);
    aspect-ratio: 563 / 958;
    margin: 0 auto;
    overflow: visible;
}

.valo-family-section .valo-color-product-carousel .valo-color-product-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.45s ease-in-out;
}

.valo-family-section .valo-color-product-carousel .valo-color-product-image.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.valo-family-section .valo-color-product-carousel .valo-color-product-image {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.valo-accessories-section {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/4GIVIYpjueidMSk2pQ7eDY/7dc13cde7201e6b99452b7c33a73e70b/valo-x-colors-accessories-bg.jpg?fm=webp&q=80');
    background-size: cover;
}

.valo-colors-carousel .valo-family-color-background[data-color="red"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/1lTWjM5Qpmxuj2WF3yspFx/23b99d0d5fe4615beaf4a7fb28c62d78/valo-carousel-bg-red.jpg?fm=webp&q=80');
}
.valo-colors-carousel .valo-family-color-background[data-color="green"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/5UjitI0asBEPMUZhrhkTda/c2b9f229de2b4a0cfec9602ec7f5b1c0/valo-carousel-bg-green.jpg?fm=webp&q=80');
}
.valo-colors-carousel .valo-family-color-background[data-color="blue"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/3MGmjZk7LmJFZhqDIs9pTF/fc0695b6e2204669462674ce531c9a13/valo-carousel-bg-blue.jpg?fm=webp&q=80');
}
.valo-colors-carousel .valo-family-color-background[data-color="silver"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/34lOjEZftCWas4IIleIcU1/11cdd69c9885c8d0461f6144aeb86056/valo-carousel-bg-silver.jpg?fm=webp&q=80');
}
.valo-colors-carousel .valo-family-color-background[data-color="purple"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/42aYbK6BKhHltN7Y84BADK/fb72b0af54324e7f7d163d61118c6ab0/valo-carousel-bg-purple.jpg?fm=webp&q=80');
}
.valo-colors-carousel .valo-family-color-background[data-color="pink"] {
    background-image: url('https://images.ctfassets.net/wfptrcrbtkd0/2gG6hZGQWlcEQQnRGxcTyN/4d3c5064d076bebeeceaa60f2ebd6fad/valo-carousel-bg-pink.jpg?fm=webp&q=80');
}

@media screen and (min-width: 752px) {
    .valo-xg-feature-tabs-wrap {
        display: flex;
    }

    .valo-xg-feature-tabs {
        gap: 16px;
        padding: 8px 16px;
    }

    .valo-xg-feature-carousel {
        --valo-xg-feature-controls-top: 450px;
    }

    .valo-xg-feature-tab {
        font-size: 20px;
        padding: 8px 16px;
    }

    .valo-xg-feature-copy {
        font-size: 20px;
        line-height: 30px;
        padding: 0;
    }

    .valo-xg-feature-image-wrap {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .valo-xg-feature-image {
        width: 100%;
    }

    .valo-clinical-excellence-section {
        padding-bottom: 360px;
    }

    .valo-clinical-excellence-section .valo-frame-inner {
        gap: 12rem;
    }

    .valo-xs-features-image-wrap {
        padding: 0 2rem;
    }

    .valo-xs-features-image--mobile {
        display: none;
    }

    .valo-xs-features-image--desktop {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .valo-pediatric-section {
        background: #000000;
    }

    .valo-pediatric-mobile {
        display: none;
    }

    .valo-pediatric-desktop {
        display: block;
        min-height: 801px;
        overflow: hidden;
        position: relative;
    }

    .valo-pediatric-backgrounds,
    .valo-pediatric-background {
        inset: 0;
        position: absolute;
    }

    .valo-pediatric-background {
        display: block;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1.1s ease-in-out;
        width: 100%;
    }

    .valo-pediatric-background.is-active {
        opacity: 1;
    }

    .valo-pediatric-desktop-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: auto;
        min-height: 801px;
        padding: 80px clamp(48px, 7vw, 134px) 80px 0;
        position: relative;
        width: min(42%, 612px);
        z-index: 2;
    }

    .valo-pediatric-desktop .valo-pediatric-heading {
        font-size: 48px;
        line-height: 58px;
        margin: 0 0 32px;
        max-width: 612px;
        text-align: left;
    }

    .valo-pediatric-desktop .valo-pediatric-copy {
        font-family: "ABC Whyte", "Source Sans Pro", sans-serif;
        font-size: 20px;
        letter-spacing: -0.2px;
        line-height: 30px;
        margin: 0;
        max-width: 612px;
        text-align: left;
    }

    .valo-pediatric-desktop .valo-pediatric-copy p + p {
        margin-top: 30px;
    }

    .valo-clinical-excellence-section {
        background-image: url(https://images.ctfassets.net/wfptrcrbtkd0/29eN88ZJWBW5ILMU05Qg9e/37a149d95d4c44a6a9f28d792c67ab1c/Section_04_-_Versatile___Easy.jpg?fm=webp&q=80);
        background-size: cover;
    }

    .valo-x-landing.valo-x-landing-overview .valo-xg-additional-swiper .swiper-slide {
        width: 400px;
    }

    .valo-clinical-excellence-section .valo-frame-inner {
        gap: 16rem;
    }

    .valo-color-product-carousel {
        max-height: none;
    }
}