.pirox {
    /* padding-top: 1.54rem; */
    overflow: hidden;
    background: #FFFFFF;
    color: var(--yofo-navy);
}

/* Mobile dental imaging solutions page */
.mobileSolution {
    overflow: hidden;
    background: #FFFFFF;
    color: var(--yofo-navy);
}

.mobileSolution img {
    display: block;
}

.productEntryLink {
    color: inherit;
    text-decoration: none;
}

.productEntryImage {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.productEntryLink .productEntryImage img,
.productEntryLink .piroxNutshellImg img,
.productEntryLink .hiroxisNutshellVisual img {
    transition: transform .5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.productEntryLink:hover .productEntryImage img,
.productEntryLink:hover .piroxNutshellImg img,
.productEntryLink:hover .hiroxisNutshellVisual img {
    transform: scale(1.04);
}

.productEntryLink .piroxBtn:hover {
    background: var(--yofo-orange);
    border-color: var(--yofo-orange);
    color: #F5F7FC;
    transform: translateY(-.02rem);
}

.mobileSolutionHero {
    position: relative;
    height: 11.26rem;
    overflow: hidden;
    background: var(--yofo-light);
    padding-top: 1.54rem;
    background: var(--yofo-navy);
}

.mobileSolutionHero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileSolutionHeroLabel,
.mobileSolutionHero h1 {
    position: absolute;
    z-index: 1;
    left: 8.54%;
    font-weight: 600;
}

.mobileSolutionHeroLabel {
    top: 2.54rem;
    font-size: clamp(24px, .38rem, 38px);
    line-height: 1.2;
}

.mobileSolutionHeroLabel::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: .04rem;
    margin-top: .12rem;
    background: var(--yofo-orange);
}

.mobileSolutionHero h1 {
    top: 4.06rem;
    width: 12.4rem;
    font-size: clamp(36px, .65rem, 65px);
    line-height: 1.2615;
}

.mobileSolutionIntro {
    width: 75%;
    max-width: 14.4rem;
    margin-top: 1rem;
    text-align: center;
}

.mobileSolutionIntro h2,
.mobileSolutionIntro p {
    font-size: clamp(24px, .38rem, 38px);
}

.mobileSolutionIntro h2 {
    margin-bottom: .3rem;
    font-weight: 600;
    line-height: 1.42;
}

.mobileSolutionIntro p {
    font-weight: 400;
    line-height: 1.3158;
}

.mobileSolutionShowcase {
    max-width: 15.88rem;
    margin-top: 1rem;
}

.mobileSolutionShowcase article {
    display: grid;
    grid-template-columns: 8.68rem 1fr;
    min-height: 5.85rem;
    background: var(--yofo-pale);
    border-bottom: 2px solid #08319B;
}

.mobileSolutionShowcase article + article {
    margin-top: .3rem;
}

.mobileSolutionShowcase article:nth-child(odd) {
    grid-template-columns: 8.68rem 1fr;
}

.mobileSolutionShowcase article:nth-child(even) {
    grid-template-columns: 1fr 8.68rem;
}

.mobileSolutionShowcase article > .productEntryImage,
.mobileSolutionShowcase article > .productEntryImage img {
    width: 100%;
    height: 5.85rem;
    object-fit: cover;
}

.mobileSolutionShowcase article > .productEntryImage img {
    transition: transform .5s ease;
}

.mobileSolutionShowcase article:hover > .productEntryImage img {
    transform: scale(1.04);
}

.mobileSolutionShowcase article > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .55rem .62rem;
}

.mobileSolutionShowcase h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.16;
}

.mobileSolutionShowcase p {
    max-width: 5.24rem;
    margin-top: .5rem;
    font-family: 'Inter';
    font-size: clamp(18px, .28rem, 28px);
    line-height: 1.214;
}

.mobileDifference {
    max-width: 14.43rem;
    margin-top: 1rem;
}

.mobileDifference .sectionArrow,
.mobileClinical .sectionArrow,
.mobileStories .sectionArrow {
    margin: 0 auto .5rem;
}

.mobileDifference > h2,
.mobileClinical > h2,
.mobileStories > h2,
.mobileImpact > h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 700;
    line-height: 1.29;
    text-align: center;
}

.mobileImpact > h2 {
    font-weight: 600;
}

.mobileDifferenceVisual {
    position: relative;
    height: 7.01rem;
    margin-top: .5rem;
    overflow: hidden;
}

.mobileDifferenceVisual > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileDifferenceVisual > div {
    position: absolute;
    top: 1.22rem;
    left: 1.14rem;
    width: 10.2rem;
}

.mobileDifferenceVisual h3 {
    width: 100%;
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.29;
}

.mobileDifferenceVisual p {
    width: 7.05rem;
    margin-top: .45rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.mobileDifferenceVisual p + p {
    margin-top: .1rem;
}

.mobileDifferenceGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .46rem .87rem;
    margin-top: .5rem;
}

.mobileDifferenceGrid h3,
.mobileDifferenceGrid p,
.mobileDifferenceGrid li {
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.mobileDifferenceGrid h3 {
    margin-bottom: .1rem;
    font-weight: 700;
}

.mobileDifferenceGrid ul {
    margin-top: .06rem;
    padding-left: .23rem;
}

.mobileVideo {
    width: 75%;
    max-width: 14.4rem;
    margin-top: .82rem;
}

.mobileVideo + .mobileVideo {
    margin-top: .5rem;
}

.mobileVideo .piroxVideoBox {
    aspect-ratio: 1440 / 807;
}

.mobileVideo .piroxVideoTitle {
    bottom: .43rem;
}

.mobileClinical {
    max-width: 14.41rem;
    margin-top: 1rem;
}

.mobileClinicalPirox {
    height: 5.31rem;
    display: grid;
    grid-template-columns: 3.89rem 4.7rem 5.83rem;
    margin-top: .5rem;
    overflow: hidden;
}

.mobileClinicalPirox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileProductCta {
    max-width: 14.4rem;
    height: 5.31rem;
    display: grid;
    grid-template-columns: 8.67rem 5.75rem;
    margin-top: .5rem;
    overflow: hidden;
    background: var(--yofo-light);
}

.mobileProductCta > .productEntryImage,
.mobileProductCta > .productEntryImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileProductCta > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .62rem .76rem;
}

.mobileProductCta h2 {
    font-family: 'Inter';
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.mobileProductCta p {
    margin-top: .3rem;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    font-weight: 500;
    line-height: 1.18;
}

.mobileProductCta .piroxBtn {
    min-width: 3.48rem;
    margin-top: .5rem;
}

.mobileClinicalHiroxis {
    max-width: 14.44rem;
    height: 5.31rem;
    display: grid;
    grid-template-columns: 3.98rem 3.54rem 7.28rem;
    margin-top: 1rem;
    overflow: hidden;
}

.mobileClinicalHiroxis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileStories {
    max-width: 15.86rem;
    margin-top: 1rem;
}

.mobileStories > .mobileStoryEntry {
    height: 5.85rem;
    display: grid;
    grid-template-columns: 8.67rem 1fr;
    margin-top: .5rem;
    overflow: hidden;
    background: var(--yofo-pale);
}

.mobileStories > .mobileStoryEntry + .mobileStoryEntry {
    margin-top: .5rem;
}

.mobileStoryEntry > .productEntryImage,
.mobileStoryEntry > .productEntryImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileStoryEntry > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5rem .7rem .5rem .5rem;
}

.mobileStories h3 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.mobileStories time {
    margin-top: .3rem;
    color: var(--yofo-blue);
    font-family: 'Inter';
    font-size: clamp(18px, .28rem, 28px);
    line-height: 1.21;
}

.mobileStories p {
    margin-top: .3rem;
    font-family: 'Inter';
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.mobileStories .piroxBtn {
    min-width: 1.97rem;
    align-self: flex-end;
    margin-top: .28rem;
}

.mobileImpact {
    max-width: 14.42rem;
    min-height: 8.73rem;
    margin-top: 1rem;
    padding: .5rem 0 1rem;
    background: var(--yofo-pale);
}

.mobileImpactInner {
    display: grid;
    grid-template-columns: 5.99rem 6.15rem;
    gap: .5rem;
    margin: .5rem 1rem 0 1.28rem;
}

.mobileImpactStats {
    padding-top: .85rem;
}

.mobileImpactStats dl > div {
    display: flex;
    align-items: flex-end;
    gap: .3rem;
}

.mobileImpactStats dl > div + div {
    margin-top: .3rem;
}

.mobileImpactStats dt {
    min-width: 1.98rem;
    font-size: clamp(30px, .46rem, 46px);
    line-height: 1.04;
}

.mobileImpactStats dd {
    margin: 0;
    font-family: 'Inter';
    font-size: clamp(18px, .24rem, 24px);
    line-height: 1.25;
}

.mobileImpactStats > p {
    margin-top: .48rem;
    font-family: 'Inter';
    font-size: clamp(24px, .38rem, 38px);
    line-height: 1.26;
}

.mobileImpactStats .piroxBtn {
    min-width: 3.68rem;
    margin-top: .5rem;
}

.mobileImpactGallery {
    display: grid;
    grid-template-columns: repeat(2, 3rem);
    grid-template-rows: repeat(2, 3rem);
    gap: .15rem;
}

.mobileImpactGallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobileImpactGallery .productEntryImage {
    width: 100%;
    height: 100%;
}

.mobileClosing {
    margin: 1rem auto 0rem;
    color: var(--yofo-blue);
    font-size: clamp(26px, .38rem, 38px);
    line-height: 1.29;
    text-align: center;
}

@media (max-width: 900px) {
    .mobileSolution {
        width: 100vw;
        max-width: 100vw;
        padding-top: 1.1rem;
    }

    .mobileSolutionHero {
        height: 6.6rem;
    }

    .mobileSolutionHero > img {
        object-position: 62% center;
    }

    .mobileSolutionHero h1 {
        top: auto;
        right: .35rem;
        bottom: .7rem;
        left: .35rem;
        width: auto;
    }

    .mobileSolutionIntro,
    .mobileVideo {
        width: calc(100vw - .6rem);
        max-width: calc(100vw - .6rem);
    }

    .mobileSolutionShowcase,
    .mobileDifference,
    .mobileClinical,
    .mobileProductCta,
    .mobileClinicalHiroxis,
    .mobileStories,
    .mobileImpact {
        width: calc(100vw - .4rem);
        max-width: calc(100vw - .4rem);
    }

    .mobileSolutionShowcase article,
    .mobileSolutionShowcase article + article,
    .mobileSolutionShowcase article:nth-child(odd),
    .mobileSolutionShowcase article:nth-child(even),
    .mobileProductCta,
    .mobileStories > .mobileStoryEntry,
    .mobileImpactInner {
        grid-template-columns: 1fr;
        height: auto;
    }

    .mobileSolutionShowcase article:nth-child(even) > .productEntryImage {
        grid-row: 1;
    }

    .mobileSolutionShowcase article > .productEntryImage,
    .mobileSolutionShowcase article > .productEntryImage img,
    .mobileProductCta > .productEntryImage,
    .mobileProductCta > .productEntryImage img,
    .mobileStoryEntry > .productEntryImage,
    .mobileStoryEntry > .productEntryImage img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .mobileSolutionShowcase article > div,
    .mobileProductCta > div,
    .mobileStoryEntry > div {
        padding: .45rem;
    }

    .mobileDifferenceVisual > div {
        left: .6rem;
        width: 75%;
    }

    .mobileDifferenceGrid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 .25rem;
    }

    .mobileClinicalPirox,
    .mobileClinicalHiroxis {
        height: auto;
    }

    .mobileClinicalPirox {
        grid-template-columns: .8fr 1fr 1.2fr;
    }

    .mobileClinicalHiroxis {
        grid-template-columns: .8fr .75fr 1.45fr;
    }

    .mobileClinicalPirox img,
    .mobileClinicalHiroxis img {
        height: auto;
        aspect-ratio: 1 / 1.35;
    }

    .mobileImpactInner {
        margin-right: .5rem;
        margin-left: .5rem;
    }

    .mobileImpactStats {
        padding-top: 0;
    }

    .mobileImpactGallery {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }

    .mobileImpactGallery img {
        aspect-ratio: 1;
    }
}

@media (max-width: 640px) {
    .mobileSolutionHero {
        height: 5.6rem;
    }

    .mobileSolutionHeroLabel {
        right: .3rem;
        left: .3rem;
        font-size: 22px;
        overflow-wrap: anywhere;
    }

    .mobileSolutionHero h1 {
        right: .25rem;
        bottom: .48rem;
        left: .25rem;
        width: calc(100vw - .5rem);
        max-width: calc(100vw - .5rem);
        font-size: 30px;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .mobileSolutionIntro h2,
    .mobileSolutionIntro p {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobileSolutionIntro h2 {
        font-size: 22px;
    }

    .mobileSolutionIntro p {
        font-size: 18px;
    }

    .mobileSolutionShowcase h2,
    .mobileDifference > h2,
    .mobileClinical > h2,
    .mobileStories > h2,
    .mobileImpact > h2 {
        font-size: 24px;
        overflow-wrap: anywhere;
    }

    .mobileSolutionShowcase p,
    .mobileStories time {
        font-size: 17px;
    }

    .mobileDifferenceVisual {
        height: auto;
        min-height: 6.8rem;
        background: var(--yofo-pale);
    }

    .mobileDifferenceVisual > img {
        position: absolute;
        inset: 0;
        opacity: .5;
    }

    .mobileDifferenceVisual > div {
        top: .55rem;
        right: .4rem;
        left: .4rem;
        width: auto;
    }

    .mobileDifferenceVisual p {
        width: 100%;
    }

    .mobileDifferenceGrid {
        grid-template-columns: 1fr;
    }

    .mobileVideo .piroxVideoTitle {
        bottom: .15rem;
        min-height: 1rem;
    }

    .mobileClinicalPirox,
    .mobileClinicalHiroxis {
        grid-template-columns: 1fr;
    }

    .mobileClinicalPirox img,
    .mobileClinicalHiroxis img {
        aspect-ratio: 16 / 9;
    }

    .mobileStories > .mobileStoryEntry {
        min-height: 0;
    }

    .mobileStories .piroxBtn {
        align-self: flex-start;
    }

    .mobileImpact {
        min-height: 0;
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .mobileImpactStats dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: .05rem;
    }

    .mobileClosing {
        padding: 0 .3rem;
    }
}

.pirox img {
    display: block;
    width: 100%;
}

.piroxHero {
    position: relative;
    height: 11.26rem;
    overflow: hidden;
    background: #EAEFFD;
    padding-top: 1.54rem;
    background: var(--yofo-navy);
}

.piroxHeroImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxHeroMain {
    position: absolute;
    inset: 0;
    z-index: 1;
    max-width: 19.2rem;
}

.piroxHeroKicker {
    position: absolute;
    top: 2.54rem;
    left: 9.93rem;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 600;
    line-height: 1.2;
}

.piroxHeroKicker::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: .04rem;
    margin-top: .12rem;
    background: var(--yofo-orange);
}

.piroxHero h1 {
    position: absolute;
    top: 4rem;
    left: 9.93rem;
    width: 8.26rem;
    font-size: clamp(36px, .65rem, 65px);
    font-weight: 600;
    line-height: 1.2615;
}

.sectionArrow {
    width: 0.46rem;
    height: .24rem;
    margin: 1rem auto .5rem;
    background: url(../images/sectionArrow.png) ;
    background-size: 100% 100%;
}

.piroxBenchmark {
    width: 75%;
    max-width: 14.4rem;
    margin-top: 1rem;
    text-align: center;
}

.piroxBenchmark h2,
.piroxSectionTitle,
.piroxLeadTitle,
.piroxArtifact h2,
.piroxDurability h2,
.piroxColors h2,
.piroxDesign h2 {
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 700;
    line-height: 1.29;
    text-align: center;
}

.piroxSectionTitle,
.piroxDesign h2 ,
.piroxArtifact h2,
.piroxDurability h2,
.piroxDesign h2 {
    font-weight: 500;
}

.piroxBenchmark h2 {
    margin-bottom: .28rem;
}

.piroxBenchmark p {
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.3158;
}

.piroxVideo {
    width: 75%;
    max-width: 14.4rem;
    margin-top: 1rem;
}

.piroxVideoBox {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000000;
}

.yofoVideoEmbed {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #000000;
}

.yofoVideoEmbed iframe {
    display: block;
    margin: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0;
}

.yofoVideoEmbed + .piroxVideoTitle {
    display: none;
}

.yofoVideoFrameActive .piroxVideoTitle {
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

.piroxVideoMedia,
.piroxVideoPoster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxVideoMedia {
    z-index: 1;
}

.piroxVideoPoster {
    z-index: 2;
    transition: opacity .3s ease;
}

.piroxPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    z-index: 4;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: opacity .3s ease;
}

.piroxPlay img {
    width: 100%;
    height: 100%;
}

.piroxVideoTitle {
    position: absolute;
    bottom: .32rem;
    left: 0;
    z-index: 3;
    width: 100%;
    min-height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 49, 155, .8);
    color: #FBFBFB;
    font-size: clamp(28px, .48rem, 48px);
    font-weight: 600;
    line-height: 1.04;
    text-align: center;
    transition: opacity .3s ease;
}

.piroxVideoBox.is-playing .piroxVideoPoster,
.piroxVideoBox.is-playing .piroxPlay,
.piroxVideoBox.is-playing .piroxVideoTitle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.piroxNutshell {
    max-width: 15.86rem;
    display: grid;
    grid-template-columns: 8.74rem 1fr;
    column-gap: .5rem;
    align-items: start;
    margin-top: 1rem;
}

.piroxNutshellImg {
    height: 5.55rem;
    overflow: hidden;
}

.piroxNutshellImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxNutshellText h2 {
    padding-bottom: .22rem;
    border-bottom: .02rem solid #D8DCE6;
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.piroxNutshellText ul {
    margin: .28rem 0 0;
    padding: 0;
    list-style: none;
}

.piroxNutshellText li {
    position: relative;
    padding-left: .27rem;
    color: #000000;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.piroxNutshellText li a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
    color: #000000;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.piroxNutshellText li a:hover,
.piroxNutshellText li a:focus-visible {
    color: var(--yofo-orange);
}

.yofoSectionAnchor {
    position: relative;
    top: -1.54rem;
    display: block;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.piroxNutshellText li + li {
    margin-top: .19rem;
}

.piroxNutshellText li::before {
    content: "";
    position: absolute;
    top: .05rem;
    left: 0;
    width: .09rem;
    height: .09rem;
    border-radius: 50%;
    background: var(--yofo-blue);
}

.piroxBtn {
    width: fit-content;
    min-width: 1.97rem;
    display: block;
    margin-top: .46rem;
    padding: .11rem .32rem .12rem;
    border: 1px solid var(--yofo-blue);
    border-radius: .26rem;
    background: var(--yofo-blue);
    color: #F5F7FC;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.23;
    text-align: center;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.piroxBtn:hover {
    background: var(--yofo-orange);
    border-color: var(--yofo-orange);
    color: #F5F7FC;
    transform: translateY(-.02rem);
}

.piroxSectionTitle {
    width: 94%;
    max-width: 14rem;
    margin: 0 auto .51rem;
}

.piroxPatient,
.piroxDose {
    width: 94%;
    max-width: 15.86rem;
    display: grid;
    margin-right: auto;
    margin-left: auto;
    background: #F5F7FC;
}

.piroxPatient {
    grid-template-columns: 8.78rem 1fr;
    height: 5.85rem;
}

.piroxPatientImg,
.piroxDoseImg {
    overflow: hidden;
}

.piroxPatientImg img,
.piroxDoseImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxPatientText,
.piroxDoseText {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.piroxPatientText {
    padding: .58rem .44rem .45rem .51rem;
}

.piroxPatientText h2,
.piroxDoseText h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.piroxFeatureList {
    margin-top: .42rem;
}

.piroxFeatureItem {
    position: relative;
    min-height: .58rem;
    padding-left: .78rem;
}

.piroxFeatureItem + .piroxFeatureItem {
    margin-top: .31rem;
}

.piroxFeatureItem > img {
    position: absolute;
    top: 50%;
    left: .02rem;
    width: .46rem;
    max-height: .46rem;
    transform: translateY(-50%);
    object-fit: contain;
}

.piroxFeatureItem h3,
.piroxFeatureItem p {
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.piroxFeatureItem h3 {
    font-weight: 700;
}

.piroxDose {
    grid-template-columns: 6.9rem 1fr;
    height: 6.76rem;
    margin-top: .51rem;
}

.piroxDoseText {
    padding: .7rem .5rem .53rem .52rem;
}

.piroxDose .piroxFeatureList {
    margin-top: .45rem;
}

.piroxDose .piroxFeatureItem {
    padding-left: .76rem;
}

.piroxDose .piroxFeatureItem + .piroxFeatureItem {
    margin-top: .29rem;
}

.piroxImageArrow {
    margin-top: .75rem;
    margin-bottom: .3rem;
}

.piroxLeadTitle {
    width: 94%;
    max-width: 16rem;
    margin: 0 auto 1.02rem;
}

.piroxFovSection {
    width: 100%;
    height: 13.06rem;
    padding-top: .5rem;
    background: #F5F7FC;
}

.piroxFovSection .piroxSectionTitle {
    margin-bottom: .52rem;
}

.piroxFov {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 14.56rem) 3.11rem;
    width: 91.93%;
    max-width: 17.65rem;
    height: 9.14rem;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #979797;
    background: #000000;
}

.piroxFovViewport {
    position: relative;
}

.piroxFovMainStage {
    position: relative;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.piroxFovMainGroup {
    display: none;
    width: 100%;
    height: 100%;
}

.piroxFovMainGroup.act {
    display: block;
}

.piroxFovGroupSwiper,
.piroxFovGroupSwiper > .swiper-wrapper {
    min-width: 0;
    height: 100%;
}

.piroxFovGroupSwiper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.piroxFovSideStage {
    position: relative;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.piroxFovSlide {
    display: grid;
    grid-template-columns: 14.56rem 3.11rem;
    background: #000000;
}

.piroxFovMain {
    position: relative;
    min-width: 0;
    height: 9.14rem;
    overflow: hidden;
}

.piroxFovMain > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.piroxFovViewLabel {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    color: #F5F7FC;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
}

.piroxFovTabs {
    position: absolute;
    bottom: .5rem;
    left: 2.22rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.piroxFovTab {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: #F5F7FC;
    font-size: clamp(22px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
    white-space: nowrap;
    cursor: pointer;
}

.piroxFovTab:hover {
    color: var(--yofo-orange);
}

.piroxFovTabs .act::after {
    content: "";
    position: absolute;
    bottom: -.12rem;
    left: -.4rem;
    width: 2.5rem;
    height: .02rem;
    background: var(--yofo-blue);
}

.piroxFovThumbs {
    position: absolute;
    right: 4.2rem;
    bottom: .42rem;
    left: 2.22rem;
    z-index: 5;
    overflow: hidden;
}

.piroxFovThumbs .swiper-wrapper {
    display: flex;
    align-items: center;
}

.piroxFovThumb {
    position: relative;
    /* width: auto !important; */
    /* flex: 0 0 auto; */
    min-height: .34rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #F5F7FC;
    font-size: clamp(28px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    padding-bottom: .08rem;
}

.piroxFovThumb.swiper-slide-thumb-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0rem;
    left: 0;
    height: .04rem;
    background: var(--yofo-blue);
}

.piroxFovArrow {
    position: absolute;
    z-index: 6;
    width: .24rem;
    height: .47rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    line-height: 0rem;
}

.piroxFovArrow:hover {
    color: var(--yofo-orange);
}
/* 
.piroxFovArrow img {
    width: 100%;
    height: 100%;
} */

.piroxFovPrev {
    top: 50%;
    left: .76rem;
    /* transform: translateY(-50%) rotate(180deg); */
}

.piroxFovNext {
    top: 50%;
    right: .49rem;
    transform: translateY(-50%);
}

.piroxFovSide {
    display: none;
    grid-template-rows: 3.11rem 3.11rem 2.07rem;
    row-gap: .425rem;
    width: 100%;
    height: 100%;
}

.piroxFovSide.act {
    display: grid;
}

.piroxFovSide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxFovSideThumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

/* .piroxFovSideThumb.act::after {
    content: "";
    position: absolute;
    inset: 0;
    border: .03rem solid var(--yofo-blue);
    pointer-events: none;
} */

.piroxFovHighlights {
    width: 91.25%;
    max-width: 17.55rem;
    display: grid;
    grid-template-columns: .93fr 1.03fr .8fr .99fr;
    column-gap: .72rem;
    margin: .51rem auto 0;
}

.piroxFovHighlight {
    min-height: 1.4rem;
    display: grid;
    grid-template-columns: .82rem 1fr;
    column-gap: .18rem;
    align-items: start;
}

.piroxFovHighlight img {
    width: .8rem;
    height: .8rem;
    margin-top: .04rem;
    object-fit: contain;
}

.piroxFovHighlight h3,
.piroxFovHighlight p {
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.piroxFovHighlight h3 {
    margin-bottom: .1rem;
    font-weight: 600;
}

.piroxFovHighlight p {
    font-weight: 400;
}

.piroxScan {
    width: 94%;
    max-width: 15.87rem;
    aspect-ratio: 1587 / 897;
    margin-top: 1rem;
    overflow: hidden;
    background: #000000;
}

.piroxScan img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.piroxArtifact {
    width: 94%;
    max-width: 15.85rem;
    min-height: 8.37rem;
    margin-top: 1rem;
    padding: .95rem .73rem .4rem;
    background: #F5F7FC;
}

.piroxArtifactSwiper {
    width: 80.5%;
    max-width: 100%;
    min-width: 0;
    margin: .31rem auto 0;
    overflow: hidden;
}

.piroxArtifactSwiper .swiper-wrapper {
    align-items: stretch;
}

.piroxArtifactImages {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .29rem;
    margin: 0;
}

.piroxArtifactPanel {
    display: grid;
}

.piroxArtifactImages img {
    width: 100%;
    aspect-ratio: 1.41;
    object-fit: cover;
}

.piroxArtifactImages figcaption {
    margin-top: .29rem;
    font-size: clamp(16px, .22rem, 22px);
    font-weight: 500;
    line-height: 1.18;
    text-align: center;
}

.piroxArtifactLabels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-top: .52rem;
    border-top: 1px solid #979797;
}

.piroxArtifactTab {
    position: relative;
    min-height: .78rem;
    padding: .2rem .08rem 0;
    border: 0;
    background: transparent;
    color: var(--yofo-navy);
    font-size: clamp(14px, .22rem, 22px);
    line-height: 1.18;
    text-align: center;
    cursor: pointer;
}

.piroxArtifactTab:hover {
    color: var(--yofo-orange);
}

.piroxArtifactTab::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: .04rem;
    background: var(--yofo-blue);
    opacity: 0;
}

.piroxArtifactTab.act::before {
    opacity: 1;
}

.piroxDurability {
    width: 75%;
    max-width: 14.38rem;
    min-height: 9.75rem;
    margin-top: 1rem;
    text-align: center;
}

.piroxDurability img {
    width: 100%;
    height: 6.76rem;
    margin-top: .51rem;
    object-fit: cover;
}

.piroxDurabilityMeta {
    width: 71%;
    width: 100%;
    /* display: flex; */
    /* justify-content: space-between; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: .15rem auto .38rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.piroxDurability p,
.piroxColors p {
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
    text-align: center;
}

.piroxColors {
    min-height: 10.23rem;
    margin-top: .75rem;
    text-align: center;
}

.da{
    position: relative;
    width: 100%;
    margin-top: 53px;
}



.da>img:first-child{
    position: absolute;
   top: 17%;
    left: 20%;
    width: 0.58rem;

}

.piroxColors .sectionArrow {
    margin: 0 auto .5rem;
}

.piroxColors > img {
    width: 100%;
    height: 8.02rem;
    margin-top: .53rem;
    object-fit: cover;
}

.piroxColors p {
    margin-top: .14rem;
}

.piroxDesign {
    width: 94%;
    max-width: 15.91rem;
    min-height: 9.03rem;
    margin-top: 1rem;
}

.piroxDesignGrid {
    display: grid;
    grid-template-columns: 10.46rem 1fr;
    margin-top: .51rem;
}

.piroxDesignImg {
    position: relative;
    height: 8.03rem;
    overflow: hidden;
    max-width: 100%;
}

.piroxDesignImg .swiper-wrapper {
    align-items: stretch;
}

.piroxDesignSwiper .piroxDesignPrev,
.piroxDesignSwiper .piroxDesignNext {
    display: none;
    color: var(--yofo-blue);
}

.piroxDesignPanel {
    position: relative;
    height: auto;
    overflow: hidden;
}

.piroxDesignImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxDesignImg strong {
    position: absolute;
    top: 1rem;
    left: .77rem;
    width: 5.04rem;
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.29;
    /* text-align: center; */
}

.piroxDesignList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.piroxDesignTab {
    display: flex;
    align-items: flex-start;
    padding: .3rem;
    border: 1px solid #F5F7FC;
    background: linear-gradient(180deg, #F5F7FC 0%, #EAEFFD 100%);
    color: inherit;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.23;
    text-align: left;
    cursor: pointer;
}

.piroxDesignTab:hover,
.piroxDesignTab:focus-visible,
.piroxDesignTab.act {
    background: linear-gradient(180deg, #F5F7FC -12.33%, #08319B 99.58%);
    color: #F5F7FC;
}

.piroxDesignTab:hover {
    background: var(--yofo-orange);
}

.piroxDesignTab:focus-visible {
    outline: 2px solid var(--yofo-orange);
    outline-offset: -3px;
}

.piroxSpecs {
    height: 8.32rem;
    margin-top: 1rem;
    overflow: hidden;
    background: #EAEFFD url(../images/pirox-spec-bg.png) 0% 50% / cover no-repeat;
}

.piroxSpecsMain {
    width: 75%;
    max-width: 14.4rem;
    height: 100%;
    margin: 0 auto;
    padding-top: 1rem;
}

.piroxSpecs h2 {
    /* width: 4.38rem; */
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.29;
    text-align: left;
}

.piroxSpecTable {
    width: 8.95rem;
    margin-top: .5rem;
}

.piroxSpecsRichTextSection {
    width: 100%;
    max-width: 15.87rem;
    margin: .5rem auto 1rem;
    padding: .55rem 0 1rem;
    background: #F5F7FC;

}

.piroxSpecsRichText {
    width: 100%;
    /* padding: 0 1.5rem; */
    max-width: 14.4rem;
    margin: 0 auto;
    /* padding: 0 .65rem; */
    color: var(--yofo-navy);
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: clamp(16px, .2rem, 20px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.piroxSpecsRichText > :first-child {
    margin-top: 0;
}

.piroxSpecsRichText > :last-child {
    margin-bottom: 0;
}

.piroxSpecsRichText img {
    max-width: 100%;
    height: auto;
}

.piroxSpecsRichText table {
    display: block;
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
}

.piroxSpecsRichText th,
.piroxSpecsRichText td {
    /* padding: .08rem .12rem; */
    /* border: 1px solid rgba(44, 50, 71, .25); */
}

.piroxSpecsRichText a {
    color: inherit;
    text-decoration: underline;
}

.piroxSpecsRichText ul,
.piroxSpecsRichText ol {
    padding-left: 1.5em;
}

.piroxSpecGroup {
    display: grid;
    grid-template-columns: .48rem 1.27rem 1fr;
    column-gap: .12rem;
    align-items: center;
    padding: .2rem 0;
    border-bottom: .02rem solid rgba(44, 50, 71, .45);
}

.piroxSpecIcon {
    width: .41rem;
    height: .39rem;
    object-fit: contain;
    justify-self: center;
}

.piroxSpecGroup:last-child {
    border-bottom: 0;
}

.piroxSpecGroup h3,
.piroxSpecGroup dt,
.piroxSpecGroup dd {
    font-family: 'Inter';
    font-size: clamp(14px, .18rem, 18px);
    font-weight: 400;
    line-height: 1.23;
}

.piroxSpecGroup dl {
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    gap: .1rem .3rem;
    margin: 0;
}

.piroxSpecGroup dt {
    text-align: right;
}

.piroxSpecGroup dd {
    margin: 0;
}

.piroxRoom {
    width: 94%;
    max-width: 15.87rem;
    height: 6rem;
    display: grid;
    grid-template-columns: 11.03rem 4.84rem;
    margin-top: 1rem;
    overflow: hidden;
    background: #EAEFFD;
}

.piroxRoom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piroxRoomCta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.piroxRoomCta h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.29;
}

.piroxRoomCta .piroxBtn {
    margin-top: .3rem;
}

.piroxClosing {
    margin-top: 1rem;
    color: var(--yofo-blue);
    font-size: clamp(26px, .38rem, 38px);
    line-height: 1.29;
    text-align: center;
}

@media (max-width: 1200px) {
    .piroxHeroKicker,
    .piroxHero h1 {
        left: 51.7%;
    }

    .piroxFovSlide {
        grid-template-columns: minmax(0, 1fr) 3.11rem;
    }

    .piroxFovTabs {
        gap: .65rem;
    }

    .piroxFovThumbs {
        right: 3.8rem;
        left: 1.8rem;
    }
}

@media (max-width: 900px) {
    .pirox {
        padding-top: 1.1rem;
    }

    .piroxHero {
        height: 6.6rem;
    }

    .piroxHeroImg {
        opacity: .78;
    }

    .piroxHeroKicker {
        top: .55rem;
    }

    .piroxHero h1 {
        top: auto;
        right: .35rem;
        bottom: .7rem;
        left: .35rem;
        width: auto;
    }

    .piroxBenchmark,
    .piroxVideo {
        width: 90%;
    }

    .piroxNutshell,
    .piroxPatient,
    .piroxDose,
    .piroxDesignGrid,
    .piroxRoom {
        grid-template-columns: 1fr;
        height: auto;
    }

    .piroxNutshellImg,
    .piroxPatientImg,
    .piroxDoseImg,
    .piroxDesignImg,
    .piroxRoom > img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .piroxNutshellText,
    .piroxPatientText,
    .piroxDoseText,
    .piroxRoomCta {
        padding: .45rem;
    }

    .piroxFovSection {
        height: auto;
        padding-bottom: .5rem;
    }

    .piroxFov {
        grid-template-columns: 1fr;
        width: 94%;
        height: auto;
    }

    .piroxFovMainStage {
        height: auto;
    }

    .piroxFovMainGroup,
    .piroxFovGroupSwiper,
    .piroxFovGroupSwiper > .swiper-wrapper {
        height: auto;
    }

    .piroxFovSideStage {
        height: auto;
    }

    .piroxFov .swiper-wrapper {
        height: auto;
    }

    .piroxFovThumbs {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        padding: .2rem .4rem .25rem;
        background: #000000;
    }

    .piroxFovSlide {
        grid-template-columns: 1fr;
    }

    .piroxFovMain {
        height: auto;
        aspect-ratio: 1456 / 914;
    }

    .piroxFovPrev,
    .piroxFovNext {
        top: 32%;
        transform: translateY(-50%);
    }

    .piroxFovPrev {
        left: .4rem;
        transform: translateY(-50%) rotate(180deg);
    }

    .piroxFovNext {
        right: .4rem;
    }

    .piroxFovSide {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: .15rem;
        padding: .15rem;
    }

    .piroxFovSide img {
        height: auto;
        aspect-ratio: 1;
    }

    .piroxFovSideThumb {
        height: auto;
        aspect-ratio: 1;
    }

    .piroxFovSide img:last-child {
        object-fit: cover;
    }

    .piroxFovHighlights {
        width: 88%;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
    }

    .piroxArtifactSwiper,
    .piroxArtifactImages {
        width: 100%;
    }

    .piroxArtifactLabels {
        grid-template-columns: repeat(3, 1fr);
        row-gap: .3rem;
    }

    .piroxDurability,
    .piroxSpecsMain {
        width: 90%;
    }

    .piroxDurability {
        min-height: 0;
    }

    .piroxDurability img {
        height: auto;
    }

    .piroxColors {
        min-height: 0;
    }

    .piroxColors > img {
        height: auto;
    }

    .piroxSpecs {
        height: auto;
        min-height: 8.32rem;
        background-position: 62% center;
    }

    .piroxSpecTable {
        max-width: 100%;
    }

    .piroxRoomCta {
        min-height: 2.6rem;
    }
}

@media (max-width: 640px) {
    .piroxHero {
        height: 5.6rem;
    }

    .piroxBenchmark p {
        font-size: clamp(18px, .28rem, 28px);
    }

    .piroxVideoTitle {
        min-height: 1.05rem;
    }

    .piroxFovTabs {
        top: 49%;
        bottom: auto;
        left: .4rem;
        /* flex-wrap: wrap; */
        gap: .16rem .35rem;
    }

    .piroxFovTab {
        font-size: clamp(16px, .24rem, 24px);
    }

    .piroxFovThumbs {
        padding-right: .4rem;
        padding-left: .4rem;
    }

    .piroxFovThumb {
        font-size: clamp(16px, .24rem, 24px);
    }

    .piroxFovTabs .act::after {
        left: 0;
        width: 100%;
    }

    .piroxFovHighlights,
    .piroxArtifactImages,
    .piroxDesignList,
    .piroxSpecGroup,
    .piroxSpecGroup dl {
        grid-template-columns: 1fr;
    }

    .piroxArtifact {
        min-height: 0;
        padding: .55rem .35rem;
    }

    .piroxArtifactLabels {
        grid-template-columns: repeat(2, 1fr);
    }

    .piroxDurabilityMeta {
        width: 100%;
        gap: .3rem;
    }

    .piroxDesignImg {
        aspect-ratio: 1500 / 1152;
    }

    .piroxDesignTab {
        min-height: .9rem;
    }

    .piroxSpecs {
        padding-bottom: .5rem;
        background: #EAEFFD;
    }

    .piroxSpecs h2,
    .piroxSpecTable {
        width: 100%;
    }

    .piroxSpecGroup {
        row-gap: .15rem;
    }

    .piroxSpecIcon {
        width: .36rem;
        height: .36rem;
        justify-self: start;
    }

    .piroxSpecGroup dt {
        text-align: left;
        color: #647086;
    }
}

/* Hiroxis product page */
.hiroxis {
    /* padding-top: 1.54rem; */
    overflow: hidden;
    background: #FFFFFF;
    color: var(--yofo-navy);
}

.hiroxis img {
    display: block;
}

.hiroxisHero {
    position: relative;
    height: 11.26rem;
    overflow: hidden;
    background: var(--yofo-navy);
    padding-top: 1.54rem;
}

.hiroxisHero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiroxisHeroLabel,
.hiroxisHeroCopy {
    position: absolute;
    z-index: 1;
    left: 8.59%;
    font-weight: 600;
}

.hiroxisHeroLabel {
    top: 2.54rem;
    font-size: clamp(24px, .38rem, 38px);
    line-height: 1.2;
}

.hiroxisHeroLabel::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: .04rem;
    margin-top: .12rem;
    background: var(--yofo-orange);
}

.hiroxisHeroCopy {
    top: 4.06rem;
    font-size: clamp(36px, .65rem, 65px);
    line-height: 1.2615;
    font-weight: 600;
}

.hiroxisHeroCopy p,
.hiroxisHeroCopy p + p,
.hiroxisHeroCopy p + h1 {
    margin-top: .4rem;
    font-size: clamp(36px, .65rem, 65px);
    line-height: 1.2615;
    font-weight: 600;
}

.hiroxisStatement {
    width: 75%;
    max-width: 14.4rem;
    margin-top: 1rem;
    text-align: center;
}

.hiroxisStatement h2,
.hiroxisStatement p {
    font-size: clamp(24px, .38rem, 38px);
    line-height: 1.3158;
}

.hiroxisStatement h2 {
    margin-bottom: .3rem;
    font-weight: 600;
    line-height: 1.42;
}

.hiroxisStatement p {
    font-weight: 400;
}

.hiroxisStatement p + p {
    margin-top: .3rem;
}

.hiroxisVideo {
    width: 75%;
    max-width: 14.4rem;
    margin-top: 1rem;
}

.hiroxisVideoBox {
    aspect-ratio: 16 / 9;
}

.hiroxisVideoProduct {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity .3s ease;
}

.hiroxisVideoTitle {
    bottom: .32rem;
}

.hiroxisVideoBox.is-playing .hiroxisVideoProduct {
    opacity: 0;
    visibility: hidden;
}

.hiroxisNutshell {
    max-width: 15.85rem;
    display: grid;
    grid-template-columns: 8.74rem 1fr;
    column-gap: .5rem;
    margin-top: 1rem;
}

.hiroxisNutshellVisual {
    position: relative;
    height: 5.55rem;
    overflow: hidden;
    background: #D8D8D8;
}

.hiroxisNutshellVisual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiroxisNutshellVisual img:last-child {
    object-fit: cover;
}

.hiroxisNutshellContent h2 {
    padding-bottom: .22rem;
    border-bottom: .02rem solid #D8DCE6;
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.21;
    text-align: center;
}

.hiroxisNutshellContent ul {
    margin-top: .28rem;
    padding: 0;
    list-style: none;
}

.hiroxisNutshellContent li {
    position: relative;
    padding-left: .25rem;
    color: #000000;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisNutshellContent li a {
    color: #000000;
    font-family: 'Inter';
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
    text-decoration: none;
    transition: color .3s ease;
}

.hiroxisNutshellContent li a:hover,
.hiroxisNutshellContent li a:focus-visible {
    color: var(--yofo-orange);
}

.hiroxisNutshellContent li + li {
    margin-top: .2rem;
}

.hiroxisNutshellContent li::before {
    content: "";
    position: absolute;
    top: .09rem;
    left: 0;
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    background: var(--yofo-blue);
}

.hiroxisNutshellContent .piroxBtn {
    min-width: 2.84rem;
    margin-top: .46rem;
}

@media (max-width: 1024px) {
    .yofoSectionAnchor {
        top: -64px;
    }
}

.hiroxisSmallest {
    max-width: 15.85rem;
    margin-top: 1rem;
}

.hiroxisSmallest > h2,
.hiroxisAdvanced > h2,
/* .hiroxisClinical > h2, */
.hiroxisPatient > h2,
.hiroxisDurability > h2,
.hiroxisIndustrial > h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 700;
    line-height: 1.29;
    text-align: center;
}

.hiroxisSmallest::before,
.hiroxisPatient::before,
.hiroxisDurability::before,
.hiroxisIndustrial::before {
    content: "";
    display: block;
    width: .47rem;
    height: .24rem;
    margin: 0 auto .5rem;
    background: url(../images/sectionArrow.png);
    background-size: 100% 100%;
}

.hiroxisSmallestGrid {
    display: grid;
    grid-template-columns: 7.93rem 7.92rem;
    margin-top: .51rem;
}

.hiroxisSizeVisual,
.hiroxisReadyVisual {
    min-height: 9.95rem;
    background: var(--yofo-pale);
}

.hiroxisSizeVisual > img,
.hiroxisReadyVisual > img {
    width: 100%;
    height: 5.85rem;
    object-fit: cover;
}

.hiroxisSizeVisual h3,
.hiroxisReadyVisual h3 {
    padding: .55rem .72rem 0 .96rem;
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.hiroxisSizeFacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .48rem .35rem;
    padding: .27rem .62rem .35rem .96rem;
}

.hiroxisSizeFacts > div {
    display: grid;
    grid-template-columns: .48rem 1fr;
    gap: .26rem;
    align-items: center;
}

.hiroxisSizeFacts img {
    width: .46rem;
    max-height: .46rem;
    object-fit: contain;
}

.hiroxisSizeFacts p,
.hiroxisReadyVisual > p {
    font-family: 'Inter';
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisReadyVisual {
    background: var(--yofo-light);
}

.hiroxisReadyVisual > img {
    height: 7.06rem;
}

.hiroxisReadyVisual h3 {
    padding-top: .37rem;
    padding-left: .72rem;
}

.hiroxisReadyVisual > p {
    padding: .18rem .72rem .3rem;
    font-weight: 700;
}

.hiroxisAdvanced {
    max-width: 15.85rem;
    margin-top: .88rem;
}

.hiroxisAdvanced .sectionArrow {
    margin: 0 auto .5rem;
}

.hiroxisAdvancedVisual {
    position: relative;
    height: 9.46rem;
    margin-top: .51rem;
    overflow: hidden;
    background: #D8D8D8;
}

.hiroxisAdvancedVisual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiroxisAdvancedSummary {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.12rem;
    z-index: 2;
    width: 4.92rem;
    margin: 0;
    color: #2C3247;
    font-family: 'Inter';
    font-size: clamp(20px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.2;
}

.hiroxisFovSection {
    margin-top: .49rem;
}

.hiroxisFov {
    margin-top: .52rem;
}

.hiroxisFov .piroxFovMain > img {
    object-fit: cover;
}

.hiroxisFovLabels {
    position: absolute;
    left: 2.22rem;
    bottom: .5rem;
    display: flex;
    gap: 1rem;
    color: var(--yofo-pale);
    font-size: clamp(22px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.hiroxisFovLabels span {
    position: relative;
    white-space: nowrap;
}

.hiroxisFovLabels .act::after {
    content: "";
    position: absolute;
    right: -.3rem;
    bottom: -.1rem;
    left: -.3rem;
    height: .02rem;
    background: var(--yofo-pale);
}

.hiroxisFovHighlights {
    width: 91.25%;
    max-width: 17.55rem;
    display: grid;
    grid-template-columns: .98fr 1fr .8fr .95fr;
    gap: .55rem;
    margin: .51rem auto 0;
}

.hiroxisFovHighlights > div {
    display: grid;
    grid-template-columns: .82rem 1fr;
    gap: .18rem;
}

.hiroxisFovHighlights img {
    width: .8rem;
    height: .8rem;
    object-fit: contain;
}

.hiroxisFovHighlights h3,
.hiroxisFovHighlights p {
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisFovHighlights h3 {
    margin-bottom: .15rem;
    font-weight: 600;
}

.hiroxisClinical {
    max-width: 14.4rem;
    margin-top: .5rem;
}

.hiroxisResolution {
    max-width: 14.4rem;
    margin-top: .5rem;
    text-align: center;
}

.hiroxisResolution h2,
.hiroxisClinical > h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.29;
    text-align: center;
}

.hiroxisResolution > p {
    margin-top: .15rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
}

.hiroxisResolutionGrid {
    width: 95.07%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .29rem;
    margin: .5rem auto 0;
}

.hiroxisResolutionGrid img {
    width: 100%;
    aspect-ratio: 670 / 641;
    object-fit: cover;
}

.hiroxisClinical > p {
    margin: .45rem auto .5rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
    text-align: center;
}

.hiroxisClinicalGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .72rem .3rem;
}

.hiroxisClinicalGrid img {
    width: 100%;
    aspect-ratio: 704 / 437;
    object-fit: cover;
}

.hiroxisClinicalGrid figcaption {
    margin-top: .14rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
    text-align: center;
}

.hiroxisPatient {
    max-width: 15.88rem;
    margin-top: 1rem;
}

.hiroxisPatientTop,
.hiroxisPatientBottom {
    display: grid;
    margin-top: .51rem;
}

.hiroxisPatientTop {
    grid-template-columns: 7.05rem 8.53rem;
    gap: .3rem;
}

.hiroxisPatientTop > div {
    background: var(--yofo-light);
}

.hiroxisPatientTop img {
    width: 100%;
    height: 3.97rem;
    object-fit: cover;
}

.hiroxisPatientTop > img {
    width: 100%;
    height: 5.7rem;
    object-fit: cover;
}

.hiroxisPatientTop p {
    padding: .44rem .75rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisPatientBottom {
    grid-template-columns: 8.53rem 7.82rem;
    margin-top: .3rem;
}

.hiroxisPatientBottom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiroxisPatientBottom > div {
    min-height: 6.31rem;
    padding: .51rem .75rem;
    background: var(--yofo-light);
}

.hiroxisPatientBottom h3 {
    font-size: clamp(24px, .38rem, 38px);
    font-weight: 500;
    line-height: 1.16;
}

.hiroxisPatientBottom ul {
    margin-top: .38rem;
    padding: 0;
    list-style: none;
}

.hiroxisPatientBottom li {
    display: grid;
    grid-template-columns: .5rem 1fr;
    gap: .28rem;
    align-items: center;
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisPatientBottom li + li {
    margin-top: .26rem;
}

.hiroxisPatientBottom li img {
    width: .48rem;
    max-height: .48rem;
    object-fit: contain;
}

.hiroxisDurability {
    margin-top: 1rem;
    padding: 0 12.55% .54rem;
    background: var(--yofo-light);
}

.hiroxisDurability::before {
    transform: translateY(-.53rem);
}

.hiroxisDurability > p {
    margin: .15rem auto .22rem;
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
    text-align: center;
}

.hiroxisDurabilityGrid {
    width: 14.38rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .3rem;
}

.hiroxisDurabilityGrid article {
    position: relative;
    min-height: 7.46rem;
    padding-bottom: .35rem;
    overflow: hidden;
    background: var(--yofo-pale);
}

.hiroxisDurabilityGrid article > img:first-child {
    width: 100%;
    height: 4.37rem;
    object-fit: cover;
}

.hiroxisDurabilityGrid .hiroxisSlipRing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.37rem;
    object-fit: cover;
}

.hiroxisDurabilityGrid h3,
.hiroxisDurabilityGrid p,
.hiroxisDurabilityGrid ul {
    /* margin-right: .43rem; */
    margin-left: .43rem;
    font-size: clamp(15px, .22rem, 22px);
    line-height: 1.18;
}

.hiroxisDurabilityGrid p{
    color: #2C3247;
}

.hiroxisDurabilityGrid h3 {
    margin-top: .28rem;
    margin-bottom: .06rem;
    font-weight: 600;
}

.hiroxisDurabilityGrid ul {
    margin-top: .12rem;
    padding-left: .25rem;
    margin-right: .6rem;
}

.hiroxisDurabilityGrid ul li {
    font-size: clamp(15px, .22rem, 22px);
    color: #2C3247;
    line-height: 1.18;
    margin-bottom: .12rem;
}

.hiroxisIndustrial {
    margin-top: 1rem;
    text-align: center;
    position: relative;
}

.hiroxisIndustrial img {
    width: 100%;
    height: 8rem;
    margin-top: .31rem;
    object-fit: cover;
}

.hiroxisIndustrial p {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 63.4%;
    margin-top: .98rem;
    top: 1.29rem;
    transform: translateX(-50%);
    font-size: clamp(16px, .22rem, 22px);
    line-height: 1.32;
}

.hiroxisSpecs {
    margin-top: 1rem;
    background-image: url(../images/hiroxis-spec-bg.png);
    background-position: center;
}

.hiroxisSpecsInner {
    width: 75%;
    max-width: 14.4rem;
    margin: 0 auto;
    padding-top: 1rem;
}

.hiroxisSpecsInner > h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 600;
    line-height: 1.29;
}

.hiroxisSpecTable {
    width: 8.95rem;
    margin-top: .5rem;
}

.hiroxisSpecRow {
    display: grid;
    grid-template-columns: .48rem 1.55rem 1fr;
    gap: .12rem;
    align-items: center;
    padding: .2rem 0;
    border-bottom: .02rem solid rgba(44, 50, 71, .45);
}

.hiroxisSpecRow:last-child {
    border-bottom: 0;
}

.hiroxisSpecRow > img {
    width: .4rem;
    height: .4rem;
    object-fit: contain;
}

.hiroxisSpecRow strong,
.hiroxisSpecRow dt,
.hiroxisSpecRow dd {
    font-family: 'Inter';
    font-size: clamp(14px, .18rem, 18px);
    font-weight: 400;
    line-height: 1.23;
}

.hiroxisSpecRow dl {
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    gap: .1rem .3rem;
}

.hiroxisSpecRow dt {
    text-align: right;
}

.hiroxisSpecRow dd {
    margin: 0;
}

.hiroxisRoom {
    max-width: 15.87rem;
    height: 6rem;
    display: grid;
    grid-template-columns: 11.03rem 4.84rem;
    margin-top: 1rem;
    overflow: hidden;
    background: var(--yofo-light);
}

.hiroxisRoom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hiroxisRoom > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hiroxisRoom h2 {
    font-size: clamp(26px, .38rem, 38px);
    font-weight: 400;
    line-height: 1.29;
}

.hiroxisRoom .piroxBtn {
    margin-top: .3rem;
}

.hiroxisClosing {
    margin: 1rem auto 0;
    color: var(--yofo-blue);
    font-size: clamp(26px, .38rem, 38px);
    line-height: 1.32;
    text-align: center;
}

@media (max-width: 900px) {
    .hiroxis {
        padding-top: 1.1rem;
    }

    .hiroxisHero {
        height: 6.6rem;
    }

    .hiroxisHero > img {
        object-position: 58% center;
    }

    .hiroxisHeroCopy {
        top: auto;
        right: .35rem;
        bottom: .7rem;
        left: .35rem;
    }

    .hiroxisStatement,
    .hiroxisVideo {
        width: 90%;
    }

    .hiroxisNutshell,
    .hiroxisSmallestGrid,
    .hiroxisPatientTop,
    .hiroxisPatientBottom,
    .hiroxisRoom {
        grid-template-columns: 1fr;
        height: auto;
    }

    .hiroxisNutshellVisual,
    .hiroxisPatientTop img,
    .hiroxisPatientTop > img,
    .hiroxisPatientBottom > img,
    .hiroxisRoom > img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .hiroxisNutshellContent {
        padding: .45rem;
    }

    .hiroxisSizeVisual,
    .hiroxisReadyVisual {
        min-height: 0;
    }

    .hiroxisAdvancedVisual {
        height: auto;
        aspect-ratio: 1585 / 946;
    }

    .hiroxisFovLabels {
        left: .8rem;
        gap: .5rem;
    }

    .hiroxisFovHighlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiroxisPatientBottom > div {
        min-height: 0;
    }

    .hiroxisDurability {
        padding-right: 5%;
        padding-left: 5%;
    }

    .hiroxisIndustrial p {
        width: 90%;
    }

    .hiroxisSpecsInner {
        width: 90%;
    }

    .hiroxisRoom > div {
        min-height: 2.6rem;
    }
}

@media (max-width: 640px) {
    .hiroxisHero {
        height: 5.6rem;
    }

    .hiroxisHeroCopy p + p {
        margin-top: .18rem;
    }

    .hiroxisStatement h2,
    .hiroxisStatement p {
        font-size: clamp(18px, .28rem, 28px);
    }

    .hiroxisSizeFacts,
    .hiroxisClinicalGrid,
    .hiroxisResolutionGrid,
    .hiroxisDurabilityGrid,
    .hiroxisFovHighlights,
    .hiroxisSpecRow,
    .hiroxisSpecRow dl {
        grid-template-columns: 1fr;
    }

    .hiroxisSizeFacts > div {
        grid-template-columns: .48rem 1fr;
    }

    .hiroxisFovLabels {
        bottom: .25rem;
        left: .4rem;
        flex-wrap: wrap;
        gap: .12rem .35rem;
        font-size: clamp(14px, .22rem, 22px);
    }

    .hiroxisPatientBottom > div {
        padding: .45rem;
    }

    .hiroxisIndustrial img {
        height: auto;
        min-height: 4rem;
        object-fit: cover;
    }

    .hiroxisIndustrial p {
        position: static;
        margin: .25rem auto 0;
        transform: none;
    }

    .hiroxisSpecs {
        height: auto;
        min-height: 0;
        padding-bottom: .5rem;
        background: var(--yofo-light);
    }

    .hiroxisSpecTable {
        width: 100%;
    }

    .hiroxisSpecRow {
        row-gap: .15rem;
    }

    .hiroxisSpecRow dt {
        color: #647086;
        text-align: left;
    }
}


/* 2.x pages - unified mobile layout */
@media (max-width: 1024px) {
    .pirox,
    .hiroxis,
    .mobileSolution {
        width: 100%;
        max-width: 100%;
        padding-top: 64px;
        overflow: hidden;
    }

    .pirox .main,
    .hiroxis .main,
    .mobileSolution .main,
    .piroxBenchmark,
    .piroxVideo,
    .hiroxisStatement,
    .hiroxisVideo,
    .hiroxisFovHighlights,
    .hiroxisSpecsInner,
    .mobileSolutionIntro,
    .mobileVideo {
        width: calc(100% - 40px);
        max-width: none;
    }

    .piroxHero,
    .hiroxisHero,
    .mobileSolutionHero {
        height: 600px;
        min-height: 0;
    }

    .piroxHeroImg,
    .hiroxisHero > img,
    .mobileSolutionHero > img {
        opacity: 1;
    }

    .pirox .piroxHeroMain {
        width: 100%;
        max-width: none;
    }

    .piroxHeroImg {
        object-position: 48% center;
    }

    .hiroxisHero > img {
        object-position: 68% center;
    }

    .mobileSolutionHero > img {
        object-position: 66% center;
    }

    .piroxHeroKicker,
    .hiroxisHeroLabel,
    .mobileSolutionHeroLabel {
        top: 30px;
        right: 40px;
        left: 40px;
        font-size: 26px;
        line-height: 1.2;
    }

    .piroxHeroKicker::after,
    .hiroxisHeroLabel::after,
    .mobileSolutionHeroLabel::after {
        width: 72px;
        height: 3px;
        margin-top: 10px;
    }

    .piroxHero h1,
    .hiroxisHeroCopy,
    .mobileSolutionHero h1 {
        top: auto;
        right: 40px;
        bottom: 48px;
        left: 40px;
        width: auto;
        max-width: calc(100% - 80px);
        font-size: clamp(30px, 8vw, 38px);
        line-height: 1.14;
        overflow-wrap: anywhere;
    }

    .hiroxisHeroCopy p + p {
        margin-top: 18px;
    }

    .sectionArrow,
    .piroxImageArrow,
    .hiroxisSmallest::before,
    .hiroxisPatient::before,
    .hiroxisDurability::before,
    .hiroxisIndustrial::before {
        width: 24px;
        height: 36px;
        margin: 38px auto 24px;
        background-size: 18px auto;
        background-position: center;
        background-repeat: no-repeat;
        transform: none;
    }

    .piroxBenchmark,
    .hiroxisStatement,
    .mobileSolutionIntro {
        margin-top: 44px;
    }

    .piroxBenchmark h2,
    .piroxSectionTitle,
    .piroxLeadTitle,
    .piroxArtifact h2,
    .piroxDurability h2,
    .piroxColors h2,
    .piroxDesign h2,
    .hiroxisStatement h2,
    .hiroxisSmallest > h2,
    .hiroxisAdvanced > h2,
    .hiroxisClinical > h2,
    .hiroxisPatient > h2,
    .hiroxisDurability > h2,
    .hiroxisIndustrial > h2,
    .hiroxisResolution h2,
    .mobileSolutionIntro h2,
    .mobileDifference > h2,
    .mobileClinical > h2,
    .mobileStories > h2,
    .mobileImpact > h2 {
        font-size: 26px;
        line-height: 1.24;
    }

    .piroxBenchmark p,
    .hiroxisStatement p,
    .mobileSolutionIntro p {
        font-size: 17px;
        line-height: 1.45;
    }

    .piroxVideo,
    .hiroxisVideo,
    .mobileVideo {
        margin-top: 42px;
    }

    .piroxVideoBox,
    .hiroxisVideoBox,
    .mobileVideo .piroxVideoBox {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .piroxPlay,
    .hiroxisVideoBox .piroxPlay {
        width: 68px;
        height: 68px;
    }

    .piroxVideoTitle,
    .hiroxisVideoTitle,
    .mobileVideo .piroxVideoTitle {
        right: 14px;
        bottom: 14px;
        left: 0;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
        line-height: 1.25;
    }

    .piroxBtn {
        min-height: 44px;
        padding: 10px 22px;
        border-radius: 24px;
        font-size: 14px;
    }

    /* Pirox */
    .piroxNutshell,
    .piroxPatient,
    .piroxDose,
    .piroxDesignGrid,
    .piroxRoom {
        width: calc(100% - 40px);
        max-width: none;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-top: 42px;
    }

    .piroxDesignGrid{
    width: 100%;
}

    .piroxNutshellImg,
    .piroxPatientImg,
    .piroxDoseImg,
    .piroxRoom > img {
        width: 100%;
        height: 230px;
        aspect-ratio: auto;
    }

    .piroxDesignImg {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        background: var(--yofo-light);
    }

    .piroxDesignPanel img {
        width: 100%;
        height: auto;
        aspect-ratio: 1500 / 1152;
        object-fit: cover;
    }

    .piroxDesignSwiper .piroxDesignPrev,
    .piroxDesignSwiper .piroxDesignNext {
        --swiper-navigation-size: 28px;
        top: calc((100vw - 40px) * .384);
        display: flex;
        width: 42px;
        height: 42px;
        margin-top: -21px;
        color: var(--yofo-blue);
    }

    .piroxDesignSwiper .piroxDesignPrev {
        left: 10px;
    }

    .piroxDesignSwiper .piroxDesignNext {
        right: 10px;
    }

    .piroxDesignImg strong {
        position: static;
        width: 100%;
        min-height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 18px;
        background: var(--yofo-light);
        font-size: 22px;
        line-height: 1.25;
        text-align: center;
    }

    .piroxDoseImg {
        order: -1;
    }

    .piroxNutshellText,
    .piroxPatientText,
    .piroxDoseText,
    .piroxRoomCta {
        width: 100%;
        padding: 24px 18px 26px;
    }

    .piroxNutshellText h2,
    .piroxPatientText h2,
    .piroxDoseText h2,
    .piroxRoomCta h2 {
        font-size: 24px;
        line-height: 1.22;
    }

    .piroxNutshellText li,
    .piroxFeatureItem h3,
    .piroxFeatureItem p {
        font-size: 14px;
        line-height: 1.45;
    }

    .piroxFeatureList {
        margin-top: 22px;
    }

    .piroxFeatureItem ,
    .piroxDose .piroxFeatureItem{
        grid-template-columns: 42px 1fr;
        gap: 14px;
        padding-left: 1rem;
    }

    .piroxFeatureItem + .piroxFeatureItem {
        margin-top: 18px;
    }

    .piroxFeatureItem > img {
        width: 40px;
        max-height: 40px;
    }

    .piroxFovSection {
        height: auto;
        margin-top: 42px;
        padding: 34px 0 30px;
    }

    .piroxFovSection .piroxSectionTitle,
    .piroxLeadTitle {
        width: calc(100% - 40px);
        margin-right: auto;
        margin-left: auto;
    }

    .piroxFov {
        width: calc(100% - 40px);
        height: auto;
        margin-top: 24px;
    }

    .piroxFov .swiper-wrapper {
        height: auto;
    }

    .piroxFovSlide {
        grid-template-columns: 1fr;
    }

    .piroxFovMain {
        height: auto;
        aspect-ratio: auto;
        padding-bottom: 40px;
    }

    .piroxFovMain > img {
        object-fit: cover;
    }

    .piroxFovViewLabel {
        top: 16px;
        left: 16px;
        font-size: 14px;
    }

    .piroxFovTabs {
        top: auto;
        right: 54px;
        bottom: 0;
        left: 54px;
        display: flex;
        /* flex-wrap: wrap; */
        justify-content: center;
        gap: 8px 18px;
    }

    .piroxFovTab {
        min-height: 34px;
        font-size: 14px;
        line-height: 1.2;
    }

    .piroxFovThumbs {
        padding: 12px 54px 14px;
    }

    .piroxFovThumb {
        min-height: 34px;
        font-size: 14px;
        line-height: 1.2;
    }

    .piroxFovTabs .act::after {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
    }

    .piroxFovArrow {
        top: 150px;
        width: 44px;
        height: 44px;
    }

    .piroxFovPrev {
        left: 8px;
    }

    .piroxFovNext {
        right: 8px;
    }

    .piroxFovSide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 8px;
        padding: 8px 0 0;
    }

    .piroxFovSide img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .piroxFovHighlights,
    .hiroxisFovHighlights {
        width: calc(100% - 40px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
        margin-top: 28px;
    }

    .piroxFovHighlight,
    .hiroxisFovHighlights > div {
        grid-template-columns: 44px 1fr;
        gap: 12px;
    }

    .piroxFovHighlight img,
    .hiroxisFovHighlights img {
        width: 42px;
        height: 42px;
    }

    .piroxFovHighlight h3,
    .piroxFovHighlight p,
    .hiroxisFovHighlights h3,
    .hiroxisFovHighlights p {
        font-size: 13px;
        line-height: 1.35;
    }

    .piroxScan,
    .piroxArtifact,
    .piroxDurability,
    .piroxDesign,
    .hiroxisClinical,
    .hiroxisResolution,
    .hiroxisPatient,
    .hiroxisAdvanced {
        width: calc(100% - 40px);
        max-width: none;
        margin-top: 44px;
    }

    .piroxScan img {
        height: auto;
    }

    .piroxArtifact {
        min-height: 0;
        padding: 28px 18px;
    }

    .piroxArtifactSwiper {
        width: 100%;
        margin-top: 22px;
    }

    .piroxArtifactImages {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
    }

    .piroxArtifactImages img {
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .piroxArtifactImages figcaption {
        padding: 8px 4px;
        font-size: 12px;
    }

    .piroxArtifactLabels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
        border-top: 0;
    }

    .piroxArtifactTab {
        min-height: 60px;
        padding: 5px 0 0px 0;
        font-size: 14px;
        line-height: 1.3;
        background: #6D778A;
        color: #FFFFFF;
    }

    .piroxArtifactTab.act{
        background: var(--yofo-blue);
    }

    .piroxDurability {
        min-height: 0;
        padding-bottom: 26px;
    }

    .piroxDurability img,
    .piroxColors > img {
        height: auto;
    }

    .piroxDurabilityMeta {
        width: calc(100% - 36px);
        gap: 18px;
        margin: 22px auto;
    }

    .piroxDurability p,
    .piroxColors p {
        font-size: 14px;
        line-height: 1.45;
    }

    .piroxColors {
        min-height: 0;
        margin-top: 44px;
        padding-bottom: 28px;
    }

    .piroxColors > h2,
    .piroxColors > p {
        width: calc(100% - 40px);
        margin-right: auto;
        margin-left: auto;
    }

    .piroxDesignList {
        display: none;
    }

    .piroxDesignTab {
        min-height: 54px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .piroxSpecs,
    .hiroxisSpecs {
        height: auto;
        min-height: 0;
        margin-top: 44px;
        padding: 34px 0 30px;
        background: var(--yofo-light);
    }

    .piroxSpecsMain,
    .hiroxisSpecsInner {
        width: calc(100% - 40px);
        padding-top: 0;
    }

    .piroxSpecs h2,
    .hiroxisSpecsInner > h2 {
        width: 100%;
        font-size: 26px;
    }

    .piroxSpecTable,
    .hiroxisSpecTable {
        width: 100%;
        max-width: none;
        margin-top: 22px;
    }

    .piroxSpecsRichTextSection {
        padding: 24px 0 30px;
    }

    .piroxSpecsRichText {
        width: calc(100% - 40px);
        padding: 0;
        font-size: 16px;
    }

    .piroxSpecGroup,
    .hiroxisSpecRow {
        grid-template-columns: 42px 1fr;
        gap: 10px 14px;
        padding: 16px 0;
    }

    .piroxSpecGroup dl,
    .hiroxisSpecRow dl {
        grid-column: 2;
        grid-template-columns: minmax(100px, .9fr) 1.1fr;
        gap: 8px 14px;
    }

    .piroxSpecGroup dt,
    .hiroxisSpecRow dt {
        text-align: left;
    }

    .piroxSpecGroup h3,
    .piroxSpecGroup dt,
    .piroxSpecGroup dd,
    .hiroxisSpecRow strong,
    .hiroxisSpecRow dt,
    .hiroxisSpecRow dd {
        font-size: 13px;
        line-height: 1.4;
    }

    .piroxRoom,
    .hiroxisRoom {
        margin-bottom: 0;
    }

    .piroxClosing,
    .hiroxisClosing,
    .mobileClosing {
        width: calc(100% - 40px);
        margin: 42px auto 56px;
        font-size: 24px;
        line-height: 1.3;
    }

    /* Hiroxis */
    .hiroxisNutshell,
    .hiroxisSmallest,
    .hiroxisPatient,
    .hiroxisRoom {
        width: calc(100% - 40px);
        max-width: none;
        margin-top: 44px;
    }

    .hiroxisNutshell,
    .hiroxisSmallestGrid,
    .hiroxisPatientTop,
    .hiroxisPatientBottom,
    .hiroxisRoom {
        grid-template-columns: 1fr;
        height: auto;
    }

    .hiroxisNutshellVisual,
    .hiroxisPatientTop img,
    .hiroxisPatientTop > img,
    .hiroxisPatientBottom > img,
    .hiroxisRoom > img {
        width: 100%;
        height: 230px;
        aspect-ratio: auto;
    }

    .hiroxisNutshellContent,
    .hiroxisPatientBottom > div {
        padding: 24px 18px 26px;
    }

    .hiroxisNutshellContent h2,
    .hiroxisPatientBottom h3,
    .hiroxisRoom h2 {
        font-size: 24px;
    }

    .hiroxisNutshellContent li,
    .hiroxisPatientTop p,
    .hiroxisPatientBottom li {
        font-size: 14px;
        line-height: 1.45;
    }

    .hiroxisSmallestGrid {
        gap: 16px;
        margin-top: 24px;
    }

    .hiroxisSizeVisual,
    .hiroxisReadyVisual {
        min-height: 0;
    }

    .hiroxisSizeVisual > img,
    .hiroxisReadyVisual > img {
        height: 230px;
    }

    .hiroxisSizeVisual h3,
    .hiroxisReadyVisual h3 {
        padding: 22px 18px 0;
        font-size: 24px;
    }

    .hiroxisSizeFacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        padding: 20px 18px 24px;
    }

    .hiroxisSizeFacts > div {
        grid-template-columns: 36px 1fr;
        gap: 10px;
    }

    .hiroxisSizeFacts img {
        width: 34px;
        max-height: 34px;
    }

    .hiroxisSizeFacts p,
    .hiroxisReadyVisual > p {
        font-size: 13px;
        line-height: 1.4;
    }

    .hiroxisReadyVisual > p {
        padding: 14px 18px 24px;
    }

    .hiroxisAdvancedVisual {
        height: auto;
        aspect-ratio: auto;
        margin-top: 24px;
        /* padding-top: 300px; */
        overflow: visible;
        background: #FFFFFF;
    }

    .hiroxisAdvancedVisual img {
        height: 300px;
        position: static;
        object-position: -1rem center;
    }

    .hiroxisAdvancedSummary {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        padding: 22px 18px 0;
        font-size: 20px;
        line-height: 1.35;
        transform: translateY(0);
    }

    .hiroxisFovSection {
        margin-top: 44px;
    }

    .hiroxisFovLabels {
        right: 54px;
        bottom: 16px;
        left: 54px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 14px;
        font-size: 13px;
    }

    .hiroxisResolutionGrid,
    .hiroxisClinicalGrid,
    .hiroxisDurabilityGrid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .hiroxisResolutionGrid {
        width: 100%;
    }

    .hiroxisResolution > p,
    .hiroxisClinical > p,
    .hiroxisDurability > p,
    .hiroxisIndustrial p {
        font-size: 14px;
        line-height: 1.45;
    }

    .hiroxisClinicalGrid figcaption {
        margin-top: 10px;
        font-size: 14px;
    }

    .hiroxisPatientTop,
    .hiroxisPatientBottom {
        gap: 0;
        margin-top: 24px;
    }

    .hiroxisPatientTop p {
        padding: 20px 18px 24px;
    }

    .hiroxisPatientBottom > div {
        min-height: 0;
    }

    .hiroxisPatientBottom li {
        grid-template-columns: 38px 1fr;
        gap: 12px;
    }

    .hiroxisPatientBottom li img {
        width: 36px;
        max-height: 36px;
    }

    .hiroxisDurability {
        width: 100%;
        margin-top: 44px;
        padding: 34px 20px 28px;
    }

    .hiroxisDurabilityGrid article {
        min-height: 0;
        padding-bottom: 24px;
    }

    .hiroxisDurabilityGrid article > img:first-child,
    .hiroxisDurabilityGrid .hiroxisSlipRing {
        height: 230px;
    }

    .hiroxisDurabilityGrid h3,
    .hiroxisDurabilityGrid p,
    .hiroxisDurabilityGrid ul {
        margin-right: 18px;
        margin-left: 18px;
        font-size: 14px;
        line-height: 1.45;
    }

    .hiroxisIndustrial {
        margin-top: 44px;
    }

    .hiroxisIndustrial p {
        position: static;
        width: calc(100% - 40px);
        margin: 16px auto 0;
        transform: none;
    }

    .hiroxisIndustrial img {
        height: 260px;
        min-height: 0;
        margin-top: 22px;
    }

    .hiroxisRoom {
        display: flex;
        flex-direction: column;
    }

    .hiroxisRoom > div {
        min-height: 190px;
        padding: 24px 18px;
    }

    /* Mobile dental solutions */
    .mobileSolutionIntro,
    .mobileSolutionShowcase,
    .mobileDifference,
    .mobileClinical,
    .mobileProductCta,
    .mobileClinicalHiroxis,
    .mobileStories,
    .mobileImpact {
        width: calc(100% - 40px);
        max-width: none;
    }

    .mobileSolutionShowcase,
    .mobileDifference,
    .mobileClinical,
    .mobileClinicalHiroxis,
    .mobileStories,
    .mobileImpact {
        margin-top: 44px;
    }

    .mobileSolutionShowcase article,
    .mobileSolutionShowcase article + article,
    .mobileSolutionShowcase article:nth-child(odd),
    .mobileSolutionShowcase article:nth-child(even),
    .mobileProductCta,
    .mobileStories > .mobileStoryEntry,
    .mobileImpactInner {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .mobileSolutionShowcase article + article,
    .mobileStories > .mobileStoryEntry + .mobileStoryEntry {
        margin-top: 16px;
    }

    .mobileSolutionShowcase article:nth-child(even) > .productEntryImage {
        grid-row: 1;
    }

    .mobileSolutionShowcase article > .productEntryImage,
    .mobileSolutionShowcase article > .productEntryImage img,
    .mobileProductCta > .productEntryImage,
    .mobileProductCta > .productEntryImage img,
    .mobileStoryEntry > .productEntryImage,
    .mobileStoryEntry > .productEntryImage img {
        width: 100%;
        height: 230px;
        aspect-ratio: auto;
    }

    .mobileSolutionShowcase article > div,
    .mobileProductCta > div,
    .mobileStoryEntry > div {
        padding: 22px 18px 24px;
    }

    .mobileSolutionShowcase h2,
    .mobileProductCta h2,
    .mobileStories h3 {
        font-size: 23px;
        line-height: 1.22;
    }

    .mobileSolutionShowcase p,
    .mobileProductCta p,
    .mobileStories p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.45;
    }

    .mobileStories time {
        margin-top: 12px;
        font-size: 16px;
    }

    .mobileStories .piroxBtn,
    .mobileProductCta .piroxBtn {
        min-width: 0;
        align-self: flex-start;
        margin-top: 18px;
    }

    .mobileDifferenceVisual {
        height: auto;
        min-height: 0;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        background: var(--yofo-pale);
    }

    .mobileDifferenceVisual > img {
        width: 100%;
        height: 230px;
        position: static;
        opacity: 1;
        object-fit: cover;
    }

    .mobileDifferenceVisual > div {
        width: 100%;
        position: static;
        padding: 22px 18px 24px;
    }

    .mobileDifferenceVisual h3 {
        font-size: 23px;
    }

    .mobileDifferenceVisual p,
    .mobileDifferenceGrid h3,
    .mobileDifferenceGrid p,
    .mobileDifferenceGrid li {
        width: 100%;
        font-size: 14px;
        line-height: 1.45;
    }

    .mobileDifferenceVisual p {
        margin-top: 14px;
    }

    .mobileDifferenceGrid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 24px;
        padding: 0;
    }

    .mobileClinicalPirox,
    .mobileClinicalHiroxis {
        height: auto;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 24px;
    }

    .mobileClinicalPirox img,
    .mobileClinicalHiroxis img {
        width: 100%;
        height: 220px;
        aspect-ratio: auto;
    }

    .mobileProductCta {
        margin-top: 24px;
    }

    .mobileImpact {
        min-height: 0;
        padding: 28px 18px;
    }

    .mobileImpactInner {
        gap: 26px;
        margin: 24px 0 0;
    }

    .mobileImpactStats {
        padding-top: 0;
    }

    .mobileImpactStats dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .mobileImpactStats dl > div + div {
        margin-top: 18px;
    }

    .mobileImpactStats dt {
        min-width: 0;
        font-size: 34px;
    }

    .mobileImpactStats dd {
        font-size: 14px;
    }

    .mobileImpactStats > p {
        margin-top: 22px;
        font-size: 22px;
    }

    .mobileImpactStats .piroxBtn {
        min-width: 0;
        margin-top: 20px;
    }

    .mobileImpactGallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 8px;
    }

    .mobileImpactGallery img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}

@media (max-width: 380px) {
    .piroxHero h1,
    .hiroxisHeroCopy,
    .mobileSolutionHero h1 {
        font-size: 29px;
    }

    .piroxFovHighlights,
    .hiroxisFovHighlights,
    .hiroxisSizeFacts {
        grid-template-columns: 1fr;
    }

    .piroxSpecGroup dl,
    .hiroxisSpecRow dl {
        grid-template-columns: 1fr;
    }
}

/* Final product-page mobile pass. */
@media (max-width: 1024px) {
    .pirox,
    .hiroxis,
    .mobileSolution {
        max-width: 100%;
        overflow-x: clip;
    }

    .piroxHeroKicker,
    .hiroxisHeroLabel,
    .mobileSolutionHeroLabel {
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    }

    .mobileSolutionHero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(44, 50, 71, .58) 0%, rgba(44, 50, 71, .05) 42%, rgba(44, 50, 71, .62) 100%);
    }

    .mobileSolutionHero h1 {
        color: #fff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .58);
    }

    .pirox h1,
    .pirox h2,
    .pirox h3,
    .pirox p,
    .hiroxis h1,
    .hiroxis h2,
    .hiroxis h3,
    .hiroxis p,
    .mobileSolution h1,
    .mobileSolution h2,
    .mobileSolution h3,
    .mobileSolution p,
    .piroxSpecGroup dt,
    .piroxSpecGroup dd,
    .hiroxisSpecRow dt,
    .hiroxisSpecRow dd {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 750px) {
    .hiroxisDurabilityGrid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
    }

    .piroxSpecGroup h3,
    .hiroxisSpecRow h3 {
        font-size: 15px;
        line-height: 1.35;
    }

    .piroxSpecGroup dt,
    .piroxSpecGroup dd,
    .hiroxisSpecRow dt,
    .hiroxisSpecRow dd {
        font-size: 14px;
        line-height: 1.45;
    }

    .piroxFovTabs {
        row-gap: 8px;
    }

    .piroxFovTab {
        min-height: 40px;
    }
}