/* User-supplied photographs remain unmodified. Depth is composed in CSS. */
.home-refresh .hf-device-card{overflow:visible;border:1px solid var(--hf-line);background:var(--hf-surface);grid-template-columns:minmax(260px,1fr) minmax(0,1fr)}
.hf-device-card .hf-course-copy{position:relative;background:var(--hf-surface);border-radius:24px 0 0 24px}
.ds-showcase{position:relative;min-width:0;min-height:418px;border-radius:0 24px 24px 0;background:linear-gradient(150deg,#f6f7ef,#e5eee5);padding:0 20px 20px;display:flex;flex-direction:column;align-items:center;touch-action:pan-y pinch-zoom}
.ds-stage{position:relative;width:100%;height:242px;flex:0 0 242px;direction:ltr;overflow:visible}
.ds-platform{position:absolute;left:1%;right:1%;bottom:14px;height:60px;border:1px solid #b49b682e;border-radius:50%;background:radial-gradient(ellipse,#b49b6826,transparent 68%);transform:perspective(300px) rotateX(64deg)}
.ds-platform>i{position:absolute;inset:8px 12%;border:1px solid #b49b6844;border-radius:50%}.ds-platform>i+i{inset:18px 24%;border-color:#007d761f}
.home-refresh .ds-device{--ds-angle:0deg;--ds-lift:0px;position:absolute;display:block;width:auto;padding:0;border:0;background:transparent;appearance:none;cursor:pointer;touch-action:pan-y pinch-zoom;transform:translate3d(0,var(--ds-lift),0) rotate(var(--ds-angle));transform-origin:50% 90%;transition:transform .55s cubic-bezier(.2,.75,.2,1);mix-blend-mode:multiply;user-select:none;-webkit-user-select:none;min-width:44px;min-height:44px;outline-offset:8px}
.home-refresh .ds-ipad{height:226px;aspect-ratio:664/791;left:1%;top:-35px;--ds-angle:-13deg;z-index:1;--ds-depth:1}
.home-refresh .ds-samsung{height:195px;aspect-ratio:148/266;right:0;top:-4px;--ds-angle:13deg;z-index:2;--ds-depth:-.7}
.home-refresh .ds-iphone{height:210px;aspect-ratio:313/461;left:29%;top:-9px;--ds-angle:-7deg;z-index:3;--ds-depth:.7}
.home-refresh .ds-watch{height:111px;aspect-ratio:361/305;right:0;bottom:8px;--ds-angle:10deg;z-index:4;--ds-depth:1.5}
.home-refresh .ds-device[aria-pressed=true]{--ds-lift:-15px;--ds-angle:0deg;z-index:6}
.ds-depth,.ds-float,.ds-photo{position:absolute;inset:0;display:block;pointer-events:none}
.ds-depth{transform:perspective(650px) translate3d(calc(var(--ds-x,0) * var(--ds-depth,1) * 10px),calc(var(--ds-y,0) * var(--ds-depth,1) * 5px),0) rotateY(calc(var(--ds-x,0) * 3deg));transform-origin:center bottom}
.ds-filter-defs{position:absolute;pointer-events:none}.home-refresh .ds-device{mix-blend-mode:normal}.ds-photo{overflow:hidden;border-radius:12px;filter:url(#ds-white-key)}
.home-refresh .ds-photo>img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;object-fit:fill}
.ds-ipad .ds-photo>img{width:150.6024%;height:166.8774%;left:-25.4518%;top:-33.6283%}
.ds-samsung .ds-photo>img{width:265.5405%;height:190.9774%;left:-83.1081%;top:-45.4887%}
.ds-iphone .ds-photo>img{width:176.9968%;height:120.1735%;left:-37.6997%;top:-9.7614%}
.ds-watch .ds-photo>img{width:146.5374%;height:123.9344%;left:-23.2687%;top:-11.8033%}
.ds-float{animation:ds-float 7s ease-in-out infinite alternate;animation-play-state:paused}.ds-samsung .ds-float{animation-delay:-2.3s;animation-duration:8.3s}.ds-ipad .ds-float{animation-delay:-4s;animation-duration:9s}.ds-watch .ds-float{animation-delay:-1.6s;animation-duration:6.5s}.ds-moving .ds-float{animation-play-state:running}
@keyframes ds-float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.ds-caption{text-align:center;margin-top:3px;position:relative;z-index:7;pointer-events:none}.ds-caption>span{display:inline-block;font-size:9px;color:#8b7544;margin-bottom:6px}.ds-caption>strong{display:block;font:700 16px/1.65 'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#234a43;letter-spacing:-.02em}
.ds-switches{position:relative;z-index:8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;margin-top:15px;direction:rtl}
.ds-switches.ds-screen-types{grid-template-columns:repeat(3,minmax(0,1fr));direction:ltr}
.home-refresh .ds-switches>button{display:flex;align-items:center;justify-content:center;min-height:44px;appearance:none;border:1px solid #cbd8ce;border-radius:9px;background:#ffffff9c;color:#4b6b5b;padding:7px 4px;font:600 10px/1.4 'IBM Plex Sans Arabic',Tahoma,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;touch-action:manipulation}
.home-refresh .ds-switches>button[aria-pressed=true]{background:#173f38;color:#fff;border-color:#173f38;box-shadow:0 4px 10px #173f381a}.ds-switches>button:active{transform:scale(.96)}
.home-refresh .ds-device-name{font:500 10px/1.8 'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#365f4a;text-align:center;min-height:18px;margin-top:10px;direction:rtl}
.ds-hint{font:400 10px/1.8 'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#587260;margin-top:4px;text-align:center}.ds-hint>span{margin-inline-start:5px;color:#9c844f}
@media(max-width:1100px){.home-refresh .hf-device-card{grid-template-columns:minmax(0,1fr)}.ds-showcase{border-radius:23px 23px 0 0;min-height:414px;padding-inline:22px}.ds-stage{max-width:350px}.ds-switches{max-width:360px}.hf-device-card .hf-course-copy{border-radius:0 0 23px 23px}}
@media(max-width:640px){.home-refresh .hf-device-card{margin-top:48px;border-radius:18px}.ds-showcase{border-radius:17px 17px 0 0;min-height:396px;padding-inline:18px;padding-bottom:18px}.ds-stage{height:224px;flex-basis:224px}.home-refresh .ds-ipad{height:214px;top:-39px}.home-refresh .ds-samsung{height:185px;top:-4px}.home-refresh .ds-iphone{height:200px;top:-13px}.home-refresh .ds-watch{height:105px;bottom:8px}.hf-device-card .hf-course-copy{border-radius:0 0 17px 17px;border-top:1px solid #dce5db}}
@media(max-width:360px){.ds-showcase{padding-inline:13px;min-height:374px}.ds-stage{height:205px;flex-basis:205px}.home-refresh .ds-ipad{height:190px;top:-34px}.home-refresh .ds-samsung{height:166px;top:-4px}.home-refresh .ds-iphone{height:179px;top:-10px}.home-refresh .ds-watch{height:94px;bottom:8px}.ds-caption>strong{font-size:14px}.home-refresh .ds-switches>button{font-size:9px}.home-refresh .ds-device-name{font-size:9px}}
@media(hover:hover){.ds-device:hover{--ds-lift:-10px}.ds-switches>button:hover{border-color:#8bb29a}}
@media(prefers-reduced-motion:reduce){.home-refresh .ds-device,.ds-depth{transform:none!important;transition:none!important}.ds-float{animation:none!important}.ds-switches>button{transition:none!important}.ds-switches>button:active{transform:none}}

/* Keep the chosen device in focus; the other photographs retain touch depth. */
.home-refresh .ds-device .ds-float{animation:none}
.home-refresh .ds-moving .ds-device[aria-pressed=true] .ds-float{animation:ds-focus-float 8s ease-in-out infinite alternate}
@keyframes ds-focus-float{from{transform:translateY(0)}to{transform:translateY(-3px)}}
html[data-theme=dark] .ds-showcase{background:linear-gradient(150deg,#f2f4ea,#e0e9df)}