/* Official Apple bezels, proportioned by device body widths. */
.client-device-set{display:none;position:absolute;left:50%;top:var(--client-art-center,50%);width:min(86vw,1050px);aspect-ratio:2.1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:drop-shadow(0 35px 25px #0008)}
.trusted.is-swerve .client-device-set[data-client="swerve"]{display:block}
.trusted.is-swerve .client-phone-trio{visibility:hidden}
.hardware{position:absolute;box-sizing:border-box;bottom:4%}
.hardware-frame{position:relative;display:block;width:100%;height:auto;z-index:2}
.hardware-screen{position:absolute;background:#000;overflow:hidden;z-index:1}
.hardware-screen img{display:block;width:100%;height:100%;object-fit:cover}
.hardware-macbook{width:65%;right:0;bottom:5%}
.hardware-macbook .hardware-screen{inset:10% 10% 8%;border-radius:8px}
.hardware-ipad{width:51%;left:10%;z-index:2}
.hardware-ipad .hardware-screen{inset:5%;border-radius:12px}
.hardware-iphone{width:15%;left:2%;z-index:3}
.hardware-iphone .hardware-screen{inset:4%;border-radius:22px}
.hardware-watch{width:8.5%;left:59%;z-index:4}
.hardware-watch .hardware-screen{inset:20% 10%;border-radius:25%}
.hardware-crown{display:none}
@media(max-width:700px){.client-device-set{width:94vw}}

/* Swerve uses the three supported handheld devices; MacBook remains reusable. */
.client-device-set[data-client="swerve"] .hardware-macbook{display:none}
.client-device-set[data-client="swerve"] .hardware-ipad{width:65%;left:22%;bottom:5%}
.client-device-set[data-client="swerve"] .hardware-iphone{width:19.1%;left:8%;bottom:4%}
.client-device-set[data-client="swerve"] .hardware-watch{width:10.8%;left:80%;bottom:3%}
.hardware-screen .device-slide{position:absolute;inset:0;opacity:0;transition:opacity 1800ms ease-in-out;background:#000;overflow:hidden}
.hardware-screen .device-slide.active{opacity:1}
.hardware-screen .device-slide img{position:absolute;width:100%;height:100%;object-fit:fill;max-width:none}
/* Crop the supplied embedded bezels in CSS, preserving the source files. */
.hardware-ipad .device-slide img{width:110.49%;height:113.78%;left:-5.35%;top:-6.96%}
.hardware-watch .device-slide img{width:123.15%;height:174.39%;left:-8.37%;top:-39.02%}
@media(prefers-reduced-motion:reduce){.hardware-screen .device-slide{transition:none}}

.hardware-ipad .device-slide.full-screen-art img{width:100%;height:100%;left:0;top:0;object-fit:contain;background:#000}

/* Equinox: five complete screens shown together, using the shared Apple bezel. */
.trusted.is-equinox .client-device-set[data-client="equinox"]{display:flex}
.trusted.is-equinox .client-phone-trio{visibility:hidden}
.client-device-set[data-client="equinox"]{width:min(90vw,1100px);aspect-ratio:auto;gap:2%;align-items:center;justify-content:center}
.client-device-set[data-client="equinox"] .hardware-iphone{position:relative;left:auto;bottom:auto;width:18.4%;flex:0 0 18.4%}
.client-device-set[data-client="equinox"] .hardware-screen img{object-fit:contain;background:#000}

.trusted.is-lesmills .client-device-set[data-client="lesmills"]{display:block}
.trusted.is-lesmills .client-phone-trio{visibility:hidden}
.client-device-set[data-client="lesmills"]{width:min(90vw,1050px);aspect-ratio:3860/2540}
.client-device-set[data-client="lesmills"] .hardware-macbook{width:100%;position:relative;right:auto;bottom:auto}
.client-device-set[data-client="lesmills"] .device-slide img{width:100%;height:auto;object-fit:initial;top:0;left:0}

/* Les Mills companion phone, proportioned alongside the laptop. */
.client-device-set[data-client="lesmills"] .hardware-macbook{width:90%;margin-left:10%}
.client-device-set[data-client="lesmills"] .hardware-iphone{width:19%;left:0;bottom:5%;z-index:3}
.client-device-set[data-client="lesmills"] .hardware-iphone .device-slide img{width:100%;height:100%;object-fit:contain;background:#000}

/* Shared baseline: all devices sit on one row. */
.trusted.is-swerve .client-device-set[data-client="swerve"],
.trusted.is-lesmills .client-device-set[data-client="lesmills"]{display:flex;align-items:flex-end;justify-content:center;gap:2%;aspect-ratio:auto}
.client-device-set[data-client="swerve"] .hardware,
.client-device-set[data-client="lesmills"] .hardware{position:relative;left:auto;right:auto;bottom:auto;margin:0;flex-shrink:0}
.client-device-set[data-client="swerve"] .hardware-ipad{width:65%;order:2}
.client-device-set[data-client="swerve"] .hardware-iphone{width:19.1%;order:1}
.client-device-set[data-client="swerve"] .hardware-watch{width:10.8%;order:3}
.client-device-set[data-client="lesmills"]{width:min(94vw,1300px)}
.client-device-set[data-client="lesmills"] .hardware-iphone{width:11%;order:1}
.client-device-set[data-client="lesmills"] .hardware-ipad{width:36%;order:2}
.client-device-set[data-client="lesmills"] .hardware-macbook{width:49%;order:3}
.client-device-set[data-client="lesmills"] .hardware-ipad .device-slide img{width:100%;height:auto;left:0;top:0;object-fit:initial}
.client-device-set .hardware-macbook-air .device-slide{top:3.846%;}

.trusted.is-myodetox .client-device-set[data-client="myodetox"]{display:flex}
.trusted.is-myodetox .client-phone-trio{visibility:hidden}
.client-device-set[data-client="myodetox"]{width:min(90vw,1100px);aspect-ratio:auto;gap:2%;align-items:flex-end;justify-content:center}
.client-device-set[data-client="myodetox"] .hardware-iphone{position:relative;left:auto;bottom:auto;width:18.4%;flex:0 0 18.4%}
.client-device-set[data-client="myodetox"] .hardware-screen img{object-fit:contain;background:#000}

/* Slight overlap for every mixed-device composition; phone-only rows keep their gaps. */
.trusted .client-device-set:has(.hardware-ipad){gap:0;align-items:flex-end}
.trusted .client-device-set:has(.hardware-ipad) .hardware-ipad{margin-left:-3%;z-index:2}
.trusted .client-device-set:has(.hardware-ipad) .hardware-macbook{margin-left:-3%;z-index:1}
.trusted .client-device-set:has(.hardware-ipad) .hardware-watch{margin-left:-3%;z-index:4}
.trusted .client-device-set:has(.hardware-ipad) .hardware-iphone{z-index:3}

/* Align visible hardware bottoms, excluding transparent frame padding. */
.trusted .client-device-set .hardware-iphone{transform:translateY(0.905797%);}
.trusted .client-device-set .hardware-ipad{transform:translateY(0.797872%);}
.trusted .client-device-set .hardware-watch{transform:translateY(1.704545%);}
.trusted .client-device-set .hardware-macbook-air{transform:translateY(3.214286%);}
