/* Our Product steps: sticky story with a side timeline (mockup 6). Text scrolls on the left
   past numbered timeline nodes; the matching screenshot stays fixed on the right.
   Built by js/productStoryLayout.js; remove both links in product.html to revert. */
.our-product-features{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);column-gap:1.5rem;row-gap:1.25rem!important;align-items:start}

.our-product-features>article,.our-product-feature-or{grid-column:1}

.our-product-features>article{transition:opacity .3s ease}

.our-product-features>article:not(.is-active) .our-product-feature-layer-inner{opacity:.5;transition:opacity .3s ease}

.our-product-feature-layer-inner{display:block!important;padding-top:clamp(1.35rem, 3vw, 2rem)!important}

.our-product-feature-layer-inner .our-product-feature-media{display:none}

.our-product-feature-step{position:static!important;margin:0 0 .45rem!important}

.opx-stage{grid-column:2;grid-row:1/span 20;align-self:stretch}

.opx-stage-inner{position:sticky;top:calc(50vh - 11rem);display:grid}

.opx-stage-inner>figure{grid-area:1/1;margin:0;opacity:0;transform:scale(.98);transition:opacity .35s ease,transform .35s ease}

.opx-stage-inner>figure.is-active{opacity:1;transform:none}

@media (max-width:800px){.our-product-features{grid-template-columns:1fr}
.opx-stage{display:none}
.our-product-features>article:not(.is-active){opacity:1}
.our-product-feature-layer-inner .our-product-feature-media{display:block}
}

.our-product-features{position:relative;counter-reset:step;padding-left:4.75rem}

.our-product-features::before{content:"";position:absolute;left:1.75rem;top:2rem;bottom:2rem;width:3px;border-radius:3px;background:linear-gradient(180deg,#0a55c4,rgba(61,142,240,.35))}

.our-product-features>article{position:relative;overflow:visible!important;counter-increment:step}

.our-product-features>article::before{content:counter(step,decimal-leading-zero);position:absolute;top:1.6rem;left:calc(1.75rem + 1.5px - 4.75rem - 24px);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#0a55c4;font:800 .9rem/1 var(--font-ui);letter-spacing:.04em;box-shadow:0 0 0 6px rgba(207,225,253,.9),0 6px 14px -6px rgba(10,60,150,.45);transition:background .3s ease,color .3s ease,transform .3s ease}

.our-product-features>article.is-active::before{background:linear-gradient(135deg,#0a55c4,#3d8ef0);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(207,225,253,.9),0 10px 22px -8px rgba(10,60,150,.6)}

.our-product-feature-step{display:none!important}

@media (max-width:800px){.our-product-features{padding-left:3.5rem}
.our-product-features::before{left:1.2rem}
.our-product-features>article::before{left:calc(1.2rem + 1.5px - 3.5rem - 20px);width:40px;height:40px}
}