.product-story{--accent:#53d999;position:relative;isolation:isolate;min-height:720px;height:calc(100svh - 102px);max-height:1050px;overflow:hidden;background:#0d120f;color:#f4f6f2;outline-offset:-5px}
.product-story::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 65% 40%,#27413265,transparent 57%),linear-gradient(120deg,#0c100d,#141c16 70%,#0e1510)}
.story-grid{position:absolute;inset:0;background-image:linear-gradient(#7b9a7710 1px,transparent 1px),linear-gradient(90deg,#7b9a7710 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(180deg,transparent,#0005 25%,#000 65%,transparent);transform:perspective(650px) rotateX(61deg) scale(1.7);transform-origin:center 68%;opacity:.35;pointer-events:none}
.story-topline{position:absolute;top:37px;left:5.5%;z-index:5;display:flex;align-items:center;gap:13px}
.story-topline span{font-size:10px;letter-spacing:2.2px;line-height:1.7;color:#afc3b1}.story-topline b{display:block;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:2px}.story-status-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px #53d99966}
.story-count{position:absolute;right:5.3%;top:28px;display:flex;align-items:baseline;gap:8px;z-index:5;font-family:Manrope,Arial,sans-serif}.story-count strong{font-size:65px;line-height:1;font-weight:450;letter-spacing:-4px;color:var(--accent)}.story-count span{color:#91a394;font-size:12px}
.story-visual{position:absolute;inset:65px 8% 100px 22%;pointer-events:none;z-index:1}
.story-frame{position:absolute;inset:0;opacity:0;transform:translateY(70px) scale(.97);transition:opacity .8s ease,transform 1.15s cubic-bezier(.2,.75,.15,1);will-change:transform,opacity}
.story-frame.is-active{opacity:1;transform:translateY(0) scale(1)}.story-frame.was-active{transform:translateY(-65px) scale(1.025)}
.story-frame img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 25px 24px #0005)}
.story-frame[data-frame="0"]{mix-blend-mode:screen}.story-frame[data-frame="0"] img{opacity:.95;filter:invert(1) hue-rotate(180deg) brightness(1.4)}.story-frame[data-frame="3"] img{transform:scale(1.035)}
.story-frame .texture-reveal{clip-path:inset(0 100% 0 0)}.story-frame.is-active .texture-reveal{animation:wrap-reveal 2.6s .3s cubic-bezier(.25,.75,.2,1) both}
@keyframes wrap-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.story-scan{position:absolute;left:0;top:10%;bottom:10%;width:1px;background:linear-gradient(transparent,#74f1b5,transparent);box-shadow:0 0 30px 12px #53d99918;opacity:0}
.story-frame.is-active .story-scan{animation:scan-surface 2.6s .3s cubic-bezier(.25,.75,.2,1) both}@keyframes scan-surface{0%{left:0;opacity:0}12%{opacity:.85}90%{opacity:.85}100%{left:100%;opacity:0}}
.surface-marker{position:absolute;display:flex;align-items:center;gap:9px;color:#9be2b6;font-size:9px;letter-spacing:1.1px;padding:8px 11px;background:#102016c7;border:1px solid #476a4d80;border-radius:3px;backdrop-filter:blur(8px);opacity:0;transition:opacity .6s .7s}
.surface-marker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}.is-active .surface-marker{opacity:1}.marker-heel{left:16%;bottom:22%}.marker-toe{right:9%;top:24%}
.story-copy{position:absolute;left:5.5%;bottom:137px;z-index:3;width:48%;pointer-events:none}.story-kicker{font-size:9px;letter-spacing:3px;font-weight:500;color:#a0b7a4;margin:0 0 19px;display:flex;align-items:center;gap:12px}.story-kicker::before{content:"";width:25px;height:1px;background:var(--accent)}
.story-copy h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(50px,5.9vw,94px);line-height:1.04;letter-spacing:-4px;font-weight:500;margin:0;text-shadow:0 3px 24px #0d120f99}.story-copy h1 span{display:block}.story-copy h1 em{color:var(--accent);font-style:normal}
.story-summary{position:absolute;z-index:4;right:5.5%;bottom:142px;width:260px}.story-summary p{font-size:12px;line-height:1.85;color:#b9c9ba;margin:0 0 17px}.story-summary>a{display:inline-flex;gap:24px;align-items:center;color:var(--accent);font-size:11px;padding-bottom:8px;border-bottom:1px solid #53d99955}.story-summary>a:hover{border-color:var(--accent)}
.story-steps{position:absolute;right:5.5%;top:43%;transform:translateY(-30%);z-index:6;display:flex;flex-direction:column;gap:7px;align-items:stretch}.story-step{position:relative;background:transparent;border:0;color:#91a394;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:15px;padding:9px 0 9px 13px;font-size:10px;letter-spacing:1px;transition:color .3s}.story-step small{font-size:8px;color:#738c77}.story-step span{min-width:57px}.story-step i{height:4px;width:4px;border-radius:50%;background:#607764;transition:box-shadow .3s,background .3s}.story-step:hover,.story-step[aria-current="step"]{color:var(--accent)}.story-step[aria-current="step"] i{background:var(--accent);box-shadow:0 0 0 5px #53d99915,0 0 0 6px #53d99944}.story-step[aria-current="step"] small{color:var(--accent)}
.story-bottom{position:absolute;bottom:0;left:5.5%;right:5.5%;min-height:91px;border-top:1px solid #6683673d;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:5}.story-tools{display:flex;align-items:center;gap:13px}.story-tool-icon{background:#dde9d8;border-radius:5px;padding:4px;width:30px;height:30px}.story-tools>span{font-size:10px;color:#bacbb9}.story-tools small{display:block;color:#7f9583;font-size:8px;margin-top:5px;letter-spacing:1.3px}.story-concept{font-size:8px;color:#7f9583;letter-spacing:.4px}
.story-controls{display:flex;align-items:center;gap:9px}.story-controls button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #4c644c;background:#15201880;border-radius:50%;color:#d0dfcc;font-size:15px;transition:border-color .2s,background .2s}.story-controls button:hover{border-color:var(--accent);background:#263e2b}.story-controls .story-play{font-size:10px;margin-right:10px}.story-duration{width:66px;height:2px;background:#334535;margin:0 12px 0 3px;overflow:hidden}.story-duration span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-learn{background:none;border:0;color:#9bb09d;font-size:10px;padding:0 0 0 22px;border-left:1px solid #344a37;cursor:pointer}.story-learn:hover{color:var(--accent)}
.story-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.product-story[data-index="0"]{--accent:#8cdab3}.product-story[data-index="1"]{--accent:#b5d4c4}.product-story[data-index="2"],.product-story[data-index="3"]{--accent:#53d999}
@media(min-width:1600px){.story-summary{width:320px}.story-summary p{font-size:14px}.story-copy{bottom:165px}.story-summary{bottom:165px}.story-visual{inset:55px 9% 120px 23%}}
@media(max-width:1100px){.product-story{min-height:690px}.story-copy h1{font-size:66px;letter-spacing:-3px}.story-copy{width:51%}.story-summary{width:230px}.story-visual{inset:100px 5% 140px 19%}.story-count strong{font-size:54px}.story-concept{display:none}.story-topline{top:30px}.story-steps{right:4%}.story-step{font-size:9px}}
@media(max-width:760px){.product-story{height:auto;min-height:850px;max-height:none}.story-topline{top:24px;left:6%}.story-topline span{font-size:8px;letter-spacing:1.5px}.story-topline b{font-size:9px}.story-count{right:6%;top:22px}.story-count strong{font-size:45px;letter-spacing:-2px}.story-visual{inset:108px -4% auto -4%;height:340px}.story-frame img{object-fit:contain}.story-steps{left:6%;right:6%;top:86px;transform:none;flex-direction:row;justify-content:space-between;border-bottom:1px solid #344735;padding-bottom:8px;gap:5px}.story-step{padding:8px 0;font-size:9px;gap:7px}.story-step span{min-width:0}.story-step small{font-size:8px}.story-step i{display:none}.story-copy{left:6%;bottom:auto;top:437px;width:88%}.story-copy h1{font-size:52px;line-height:1.04;letter-spacing:-2.5px}.story-copy h1 span{display:inline}.story-copy h1 span+span::before{content:' '}.story-kicker{margin-bottom:14px;font-size:8px;letter-spacing:2px}.story-summary{left:6%;right:6%;bottom:112px;width:auto;max-width:470px}.story-summary p{font-size:12px;line-height:1.75;max-width:340px;margin-bottom:12px}.story-summary>a{font-size:11px}.story-bottom{left:6%;right:6%;min-height:88px;gap:10px}.story-tools{gap:8px}.story-tools>span{font-size:9px}.story-tools small{font-size:7px}.story-tool-icon{width:26px;height:26px}.story-learn{display:none}.story-duration{width:30px;margin:0 4px}.story-controls{gap:6px}.story-controls button{width:29px;height:29px}.story-controls .story-play{margin-right:0}.surface-marker{font-size:7px;padding:6px 8px;gap:5px}.marker-toe{top:18%;right:13%}.marker-heel{left:13%;bottom:16%}}
@media(max-width:380px){.story-copy h1{font-size:46px}.story-tools>span{max-width:82px}.story-duration{display:none}.story-step{font-size:8px}.story-visual{height:315px;top:120px}}
@media(prefers-reduced-motion:reduce){.story-frame{transition:none;transform:none!important}.story-frame.is-active .texture-reveal{animation:none;clip-path:inset(0)}.story-frame .story-scan{display:none}.surface-marker{transition:none}.story-grid{transform:none}}