/* Solid 3D laptops, with the photographic hinge as a WebGL fallback. */
.sl-mac-reveal{position:relative;background:#000;color:#f5f5f7;isolation:isolate}
.sl-mac-reveal[data-motion="active"]{height:220svh}
.sl-mac-pin{position:sticky;top:0;height:100svh;min-height:540px;display:flex;flex-direction:column;align-items:center;overflow:clip;padding:110px 24px 32px;box-sizing:border-box}
.sl-mac-title{position:relative;z-index:3;flex-shrink:0;margin:0;text-align:center;font-size:clamp(32px,3.4vw,48px);font-weight:650;letter-spacing:-.05em;line-height:1.08;transform:translateZ(0)}
.sl-mac-pair{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:min(100%,1440px);margin:20px 0 16px;perspective:2000px;perspective-origin:50% 45%}
.sl-mac-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.sl-mac-pair[data-renderer=webgl] .sl-mac-canvas{display:block}
.sl-mac-pair[data-renderer=webgl] .sl-mac-scene{visibility:hidden!important}
.sl-product-cards{position:absolute;pointer-events:none}
.sl-product-card{position:absolute;top:0;height:100%}
.sl-product-card--mac{left:0;width:calc(39% - 12px)}
.sl-product-card--chrome{left:calc(39% + 12px);width:calc(61% - 12px)}
.sl-product-card::before{content:"";position:absolute;z-index:0;inset:0;border:1px solid #ffffff1c;border-radius:28px;background:linear-gradient(155deg,#17181c,#0c0d0f 80%)}
.sl-mac-label{position:absolute;z-index:3;left:50%;top:24px;margin:0;transform:translate3d(-50%,0,0);white-space:nowrap;text-align:center;font-size:clamp(21px,2.2vw,30px);font-weight:650;letter-spacing:-.05em;line-height:1.08;pointer-events:none}
.sl-mac-label .silver{display:block;margin-top:2px}
.sl-extension-leader{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.sl-extension-leader path{fill:none;stroke:#a1a1a6;stroke-width:1;opacity:0}
.sl-extension-spot{position:absolute;z-index:5;width:10px;height:10px;box-sizing:border-box;border:1px solid #fff;border-radius:50%;box-shadow:0 0 8px #ffffff55,0 1px 3px #0008;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.sl-extension-spot::after{content:"";position:absolute;width:2px;height:2px;left:50%;top:50%;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.sl-extension-detail{position:absolute;z-index:6;margin:0;width:var(--detail-width,245px);height:var(--detail-height,350px);opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.sl-extension-loupe{position:relative;width:100%;height:100%;border-radius:6.7% / 4.55%;overflow:hidden;background:transparent;box-shadow:0 0 24px #ffffff18,0 0 60px #ffffff0c,0 18px 40px #0004;transform:scale(var(--loupe-scale,.065))}
.sl-extension-loupe img{position:absolute;width:659.793814%;max-width:none;height:auto;left:-510.309278%;top:-8.741259%;pointer-events:none}
.sl-extension-loupe .sl-extension-shot-light{display:none;top:-1.223776%}
html[data-theme=light] .sl-extension-loupe .sl-extension-shot-dark{display:none}
html[data-theme=light] .sl-extension-loupe .sl-extension-shot-light{display:block}
.sl-mac-scene{
  position:absolute;left:50%;top:50%;width:min(850px,80vw,var(--scene-width,calc((100svh - 330px) * 1.5)));
  aspect-ratio:1.15;margin:0;perspective:2400px;perspective-origin:50% 48%;
  --lid-angle:-84deg;--camera-angle:84deg;--hinge-top:63%;--device-scale:1;
  --scene-scale:.6;--scene-depth:0px;
  transform:translate(-50%,-42%) translateX(var(--scene-x)) translateZ(var(--scene-depth)) scale(var(--scene-scale));
}
.sl-mac-scene--mac{z-index:2;--scene-x:-30.5%;--scene-yaw:-15deg}
.sl-mac-scene--chrome{z-index:1;--scene-x:5%;--scene-yaw:15deg}
/* Turn the hardware inside its own perspective. Rotating the flattened
   scene instead would show a mirrored screen on the back of the laptop. */
.sl-mac-rig{position:absolute;width:78%;left:11%;top:var(--hinge-top);aspect-ratio:16/10;transform:rotateY(var(--scene-yaw)) rotateX(var(--camera-angle)) scale(var(--device-scale));transform-origin:50% 0%;transform-style:preserve-3d}
.sl-mac-base{position:absolute;inset:0;border-radius:3.2% / 4.8%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sl-mac-base>img{position:absolute;width:106.51872399%;height:111.66848419%;max-width:none;left:-3.25936200%;top:-6.76117775%;pointer-events:none;user-select:none}
.sl-mac-lid{position:absolute;left:0;bottom:100%;width:100%;aspect-ratio:16/10;transform-origin:50% 97.5%;transform-style:preserve-3d;transform:translateZ(3px) rotateX(var(--lid-angle))}
.sl-mac-face{position:absolute;inset:0;overflow:hidden;border-radius:2.8% / 4.6%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sl-mac-front{transform:translateZ(.7px);background:#000}
.sl-mac-front>.sl-mac-texture{display:none}
.sl-mac-back{transform:rotateY(180deg) translateZ(.7px);border-radius:3.2% / 5%}
.sl-mac-back>img{position:absolute;width:110.82251082%;height:115.70621469%;max-width:none;left:-5.48340548%;top:-7.57062147%;pointer-events:none;user-select:none}
.sl-mac-screen{position:absolute;left:1.43%;top:1.86%;width:97.14%;height:91.32%;overflow:hidden;display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,44.85% 0,44.85% 2.1%,45.3% 2.5%,54.7% 2.5%,55.15% 2.1%,55.15% 0,100% 0,100% 100%,0 100%)}
.sl-mac-screen-image{width:100%;height:100%;display:block;object-fit:fill;background:#000}
.sl-mac-screen{background:#000}
.sl-mac-screen-image--light{display:none}
.sl-mac-hinge{position:absolute;left:3%;top:0;width:94%;height:4px;background:#121214;transform-origin:50% 0;transform:rotateX(90deg)}
.sl-mac-edge{position:absolute;left:0;top:100%;width:100%;height:6.8%;overflow:hidden;transform-origin:50% 0%;transform:rotateX(-90deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 0 2.5% 2.5% / 0 0 75% 75%}
.sl-mac-edge>img{position:absolute;width:113.056093%;height:1668.181818%;max-width:none;left:-7.930368%;top:-1540.909091%;pointer-events:none}
.sl-mac-actions{position:relative;flex-shrink:0;height:50px;width:min(100%,1440px)}
.sl-mac-action{position:absolute;z-index:3;left:50%;bottom:24px;min-width:0;transform:translate3d(-50%,0,0);pointer-events:auto}
.sl-mac-action .button{max-width:100%;min-height:50px;padding:0 24px;font-size:15px;white-space:nowrap}
html[data-theme=light] .sl-mac-reveal{background:#fff;color:#151516}
html[data-theme=light] .sl-product-card::before{border-color:#00000012;background:linear-gradient(145deg,#f7f7fa,#ededf1)}
html[data-theme=light] .sl-extension-loupe{box-shadow:0 0 24px #fff,0 0 60px #ffffff99,0 16px 35px #00000014}
html[data-theme=light] .sl-extension-spot{border-color:#575760;box-shadow:0 0 8px #fff,0 1px 3px #0003}
html[data-theme=light] .sl-extension-spot::after{background:#575760}
html[data-theme=light] .sl-mac-screen-image--dark{display:none}
html[data-theme=light] .sl-mac-screen-image--light{display:block}
.sl-mac-reveal .sl-mac-scene--chrome .sl-mac-screen,.sl-mac-reveal .sl-mac-scene--chrome .sl-mac-screen-image{background:#000}

/* The phone page keeps its existing section order and spacing. */
@media(max-width:700px){.sl-mac-reveal{display:none}}
@media(min-width:701px) and (max-width:1100px){.sl-mac-pin{padding-top:150px}}
@media(min-width:701px) and (max-width:1100px){.sl-mac-action .button{font-size:13px;padding:0 14px;gap:12px}}
@media(min-width:701px) and (max-height:650px){.sl-mac-pin{padding-bottom:20px}.sl-mac-title{font-size:30px}.sl-mac-action .button{min-height:44px}.sl-mac-actions{height:44px}.sl-mac-label{font-size:21px}}
@media(min-width:1101px) and (max-height:650px){.sl-mac-pin{padding-top:100px}}
@media(prefers-reduced-motion:reduce){
  .sl-mac-reveal[data-motion]{height:auto}
  .sl-mac-pin{position:relative;height:auto;min-height:0;padding-block:max(110px,var(--header-clearance,110px)) 80px}
  .sl-mac-pair{flex:none;height:clamp(280px,38vw,550px)}
}

/* No panel behind the laptops - they sit straight on the page. */
.sl-product-card::before{content:none}