/* A continuous connection story, with an extruded original mark. */
:root{--controls:54px}
#journey .theatre{isolation:isolate}
#journey #stage{left:0;right:auto;top:0;bottom:0;width:52%;height:100%;overflow:hidden;opacity:1!important;z-index:1}
#journey #world{width:100%;height:100%;position:absolute;inset:0}
#story-fallback{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .45s}
#story-fallback .standalone-fallback{width:66%;max-width:440px;height:auto;filter:drop-shadow(0 22px 12px #2828280b)}
#story-fallback .product-fallback{display:none;width:255px;height:465px;overflow:hidden;border:7px solid #282828;border-radius:25px;background:#fff}
#story-fallback .product-fallback img{width:100%;height:auto;display:block}
body[data-act="3"] #story-fallback .standalone-fallback{display:none}
body[data-act="3"] #story-fallback .product-fallback{display:block}
.webgl-ready #story-fallback{opacity:0;visibility:hidden}
#journey .scene{display:block;min-height:650px;position:relative;max-width:none;width:100%;padding:70px 6.4%}
#journey .scene .copy{position:relative;display:block;width:42%;margin:0 0 0 auto;height:auto;padding:0;z-index:2;pointer-events:auto}
.enhanced #journey .scene{position:absolute;inset:0;height:100%;min-height:0;display:flex;align-items:center;padding:30px 6.4%;gap:0;grid-template-columns:none;grid-template-rows:none}
.enhanced #journey .scene .copy{margin:0;width:43%;flex:none}
#journey .scene .eyebrow{font-size:12px;line-height:1.7;font-weight:500;color:#686868;margin-bottom:23px}
#journey .scene .copy h1{font-size:clamp(76px,7.25vw,110px);line-height:1.12;font-weight:600;letter-spacing:0}
#journey .scene h2{font-size:clamp(49px,4.65vw,72px);line-height:1.28;font-weight:600;letter-spacing:0}
#journey .scene .lead{font-size:18px;line-height:1.9;max-width:425px;margin-top:25px;color:#737373}
#journey .scene .primary-link{font-size:14px;font-weight:500;padding:16px 23px;gap:32px;margin-top:30px}
.story-skip{display:block;width:fit-content;font-size:12px;margin-top:20px;color:#737373}
.story-skip span{margin-inline-start:15px;color:#282828}
.scroll-invitation{font-size:11px;color:#737373;display:flex;gap:10px;align-items:center;margin-top:32px}
.scroll-invitation>span{width:17px;height:24px;border:1px solid #c8c8c8;border-radius:10px;position:relative}
.scroll-invitation>span:after{content:'';position:absolute;width:2px;height:6px;border-radius:2px;background:#ff5d00;left:6px;top:5px;animation:scroll-hint 2s 3}
@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:1}65%{transform:translateY(7px);opacity:0}}
#journey .story-note{font-size:11px;line-height:1.9;color:#737373;margin-top:30px;padding-top:18px;border-top:1px solid #eaeaea;max-width:390px}
#journey .scene-dark{color:white}
#journey .scene-dark .eyebrow,#journey .scene-dark .lead,#journey .scene-dark .story-note{color:#d0d0d0}
#journey .scene-dark .story-note{border-color:#535353}
.visual-caption{position:absolute;bottom:24px;left:4%;width:44%;z-index:2;text-align:center;font-size:11px;line-height:1.8;color:#737373;pointer-events:none}
.story-controls{height:var(--controls);padding-inline:6.4%;gap:70px}
.story-controls .chapter-nav{max-width:750px;flex:1;gap:35px;justify-content:space-between}
.story-controls .chapter-nav a{padding:12px 0;font-size:11px;gap:14px}
.story-controls .chapter-nav span{font-size:11px}
.journey-signature{margin-inline-start:auto;font:9px "Almarai",Arial;letter-spacing:2px;color:#959595;direction:ltr}
/* The product remains steady while its explanatory rows pass beside it. */
@media(min-width:1000px){
 .ui-showcase{position:sticky;top:110px}
 .screen-window{height:clamp(325px,calc(100svh - 320px),510px)}
 .original-screen{transform:perspective(1100px) rotateY(var(--showcase-yaw,0deg)) translateY(var(--showcase-rise,0px));transform-origin:50% 45%;will-change:transform}
}
.feature-row{position:relative;transition:border-color .3s}
.feature-row.feature-current{border-top-color:#ff5d00}
.feature-row.feature-current .feature-number{color:#ff5d00;font-weight:600}
.feature-row.feature-current:before{content:'';position:absolute;right:-15px;top:30px;width:3px;height:30px;background:#ff5d00;border-radius:2px}
.how-path{position:relative;--path-progress:0}
.how-path:before{content:'';height:2px;background:#ff5d00;position:absolute;right:0;top:0;width:calc(var(--path-progress)*100%);z-index:1}
.how-path li{transition:border-color .3s}
.how-path li.step-current{border-color:#ff5d00}
@media(min-width:701px) and (max-height:760px){
 #journey .scene .copy h1{font-size:clamp(70px,6.7vw,98px)}
 #journey .scene h2{font-size:clamp(45px,4.35vw,64px)}
 #journey .scene .eyebrow{margin-bottom:18px}
 #journey .scene .lead{font-size:16px;margin-top:22px}
 #journey .scene .primary-link{margin-top:24px;padding:14px 20px}
 .scroll-invitation{margin-top:25px}
}
@media(max-width:1050px) and (min-width:701px){
 #journey .scene .copy h1{font-size:78px}
 #journey .scene h2{font-size:49px}
 #journey .scene .lead{font-size:15px}
 #journey .scene .eyebrow{font-size:10px}
 .story-controls{gap:35px}.journey-signature{font-size:8px}
}
@media(max-width:700px){
 :root{--controls:52px}
 #journey #stage{width:100%;top:39%;height:61%;bottom:0;left:0}
 #journey .scene{min-height:640px;padding:28px 7%}
 #journey .scene .copy{width:100%;margin:0}
 .enhanced #journey .scene{display:block;align-items:start;padding:30px 7% 0}
 .enhanced #journey .scene .copy{width:100%;margin:0}
 #journey .scene .eyebrow{font-size:10px;margin-bottom:13px;line-height:1.7}
 #journey .scene .copy h1{font-size:57px;line-height:1.1}
 #journey .scene h2{font-size:35px;line-height:1.26}
 #journey .scene .lead{font-size:13px;line-height:1.8;margin-top:15px;max-width:100%}
 #journey .scene .primary-link{font-size:11px;padding:13px 17px;gap:20px;margin-top:19px}
 .story-skip{font-size:10px;margin-top:13px;display:inline-block;margin-inline-start:14px}
 .scroll-invitation{font-size:9px;margin-top:16px}.scroll-invitation>span{width:14px;height:20px}.scroll-invitation>span:after{left:5px;height:5px}
 #journey .story-note{font-size:9px;line-height:1.8;margin-top:18px;padding-top:12px;max-width:100%}
 .visual-caption{bottom:15px;left:7%;width:86%;font-size:9px}
 #story-fallback .standalone-fallback{width:59%;max-width:260px}
 #story-fallback .product-fallback{width:170px;height:285px;border-width:5px;border-radius:19px}
 .story-controls{padding-inline:6%;gap:0}.journey-signature{display:none}
 .story-controls .chapter-nav{gap:15px;max-width:none}
 .story-controls .chapter-nav a{flex-direction:row;gap:9px;padding-block:15px}
 .story-controls .chapter-nav a span{display:block;font-size:9px;margin:0}
 .story-controls .chapter-nav a.active span{margin:0}
 .story-controls .chapter-nav b{font-size:8px}
 .how-path{grid-template-columns:1fr;gap:0}
 .how-path:before{display:none}
 .how-path li{padding:25px 24px 25px 0;border-top:0;border-right:1px solid #eaeaea;position:relative}
 .how-path li:before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#eaeaea;right:-4px;top:30px}
 .how-path li.step-current{border-right-color:#ff5d00}.how-path li.step-current:before{background:#ff5d00}
 .how-path h3{margin-top:10px}
 .feature-row.feature-current:before{right:-10px;width:2px}
}
@media(max-width:700px) and (max-height:760px){
 #journey #stage{top:43%;height:57%}
 .enhanced #journey .scene{padding-top:21px}
 #journey .scene .copy h1{font-size:49px}
 #journey .scene h2{font-size:31px}
 #journey .scene .eyebrow{font-size:9px;margin-bottom:10px}
 #journey .scene .lead{font-size:11px;line-height:1.75;margin-top:12px}
 #journey .scene .primary-link{margin-top:15px;padding:12px 15px;font-size:10px}
 .story-skip{font-size:9px;margin-inline-start:10px}
 .scroll-invitation{font-size:8px;margin-top:14px}
 #journey .story-note{margin-top:14px;font-size:8px}
 .visual-caption{bottom:12px;font-size:8px}
}
@media(max-width:370px){
 #journey .scene .copy h1{font-size:46px}
 #journey .scene h2{font-size:28px}
 #journey .scene .lead{font-size:11px}
 .story-controls .chapter-nav a{gap:6px}
 .story-controls .chapter-nav a span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.original-screen{transform:none!important}}
body.reduce-motion .original-screen{transform:none!important}

@media(max-width:700px){.scroll-invitation{display:none}}
body:not(.enhanced) #journey .scene-dark{background:#282828}
body:not(.enhanced) .story-controls{display:none}

/* The same iPhone 17 proportions in native previews and the WebGL fallback. */
.iphone17.original-screen,#story-fallback .iphone17.product-fallback{
 position:relative;box-sizing:border-box;width:290px;aspect-ratio:71.5/149.6;height:auto;
 padding:0;border:1px solid #56585b;border-radius:15% / 7.17%;
 background:#f9f9f9;isolation:isolate;overflow:visible;
 box-shadow:inset 0 0 0 2px #999b9e,inset 0 0 0 6px #08090b,0 25px 55px #2828281c;
}
.iphone17 .screen-window,.iphone17 .fallback-viewport{
 position:absolute;top:8.55%;bottom:7px;left:7px;right:7px;width:auto;height:auto;
 border:0;border-radius:0 0 12% 12% / 0 0 6% 6%;background:#f9f9f9;
 overflow:auto;scrollbar-width:none;
}
.iphone17 .screen-window::-webkit-scrollbar{display:none}
.iphone17 .screen-window img,.iphone17 .fallback-viewport img{display:block;width:100%;height:auto;margin-top:-13.777778%}
.device-hardware{position:absolute;inset:0;pointer-events:none;z-index:2;color:#1c1c1e;direction:ltr}
.device-time{position:absolute;top:4.65%;left:12%;font:500 12px/1 Almarai,sans-serif;letter-spacing:-.3px}
.device-indicators{position:absolute;right:9%;top:4.6%;width:17%;height:auto}
.dynamic-island{position:absolute;top:3%;left:36.3%;width:27.4%;height:3.72%;border-radius:40px;background:#050507;box-shadow:inset 0 0 0 1px #111116}
.dynamic-island i{position:absolute;right:10%;top:26%;height:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#233e62 0,#0d1728 35%,#05070b 70%);box-shadow:0 0 0 2px #09090d}
.device-button{position:absolute;width:3px;background:linear-gradient(90deg,#303237,#909397,#44464a);border-radius:2px}
.device-button.action{left:-3px;top:15%;height:4.5%}.device-button.volume-up{left:-3px;top:25%;height:8%}.device-button.volume-down{left:-3px;top:36%;height:8%}
.device-button.side{right:-3px;top:26%;height:12.4%}.device-button.camera{right:-2px;top:66%;height:9.8%;width:2px}
.device-home{position:absolute;bottom:2.1%;left:34.4%;width:31.2%;height:3px;border-radius:3px;background:#1c1c1e;box-shadow:0 0 0 6px #f9f9f9}
@media(min-width:1000px){.iphone17.original-screen{width:min(290px,calc((100svh - 270px)*.478))}}
#story-fallback .iphone17.product-fallback{width:245px}
#story-fallback .iphone17 .fallback-viewport{overflow:hidden}
@media(max-width:700px){
 .iphone17.original-screen{width:min(290px,76vw)}
 #story-fallback .iphone17.product-fallback{width:155px}
 #story-fallback .device-time{font-size:7px}
 #story-fallback .iphone17 .fallback-viewport{left:4px;right:4px;bottom:4px}
 #story-fallback .device-home{height:2px;box-shadow:0 0 0 3px #f9f9f9}
}
@media(max-width:700px) and (max-height:760px){
 #story-fallback .iphone17.product-fallback{width:132px}
}