/* Scoped cinematic staff showcase. Static, readable content is the default. */
.connected{position:relative;background:#080e24;isolation:isolate}
.connected-stage{position:relative;padding:100px 0}
.connected-intro{text-align:center;padding:0 7% 70px}
.connected-intro h2{font-size:clamp(36px,5.5vw,78px);font-weight:500;letter-spacing:-.04em;line-height:1.06;margin:0 0 26px;text-wrap:balance}
.connected-intro p{color:#b6cee2;font-size:18px;line-height:1.6;align-self:center;max-width:650px}
.connected-card{position:relative;background:radial-gradient(ellipse at 52% 20%,#24416c 0,transparent 65%),linear-gradient(145deg,#142641,#10142f 72%);border-radius:48px;margin:0 4%;padding:65px 5%;overflow:hidden}
.connected-layout{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr minmax(220px,310px) 1fr;gap:clamp(25px,5vw,80px);align-items:center;perspective:1200px}
.connected-copy h3{font-size:clamp(28px,3vw,45px);line-height:1.12;font-weight:500;letter-spacing:-.03em;margin:0 0 24px}
.connected-copy p{font-size:17px;line-height:1.7;color:#c1d5e5;margin:0;max-width:300px}
.connected-detail{display:block;font-size:12px;color:#88e7ee;line-height:1.6;margin-top:28px}
.connected-device{margin:0;text-align:center;transform-style:preserve-3d}
.connected-phone{position:relative;aspect-ratio:1 / 2.16;background:#080a13;border-radius:16% / 7.4%;box-shadow:0 28px 65px #02061580,inset 0 0 0 1px #b5dcf18a,inset 0 0 0 3px #3a4051;overflow:hidden}
.connected-screen{position:absolute;inset:1.15% 2.5%;border-radius:14% / 6.5%;background:#181941;overflow:hidden;padding-top:17%}
.connected-phone img{width:100%;height:auto;display:block;border-radius:0}
.connected-island{position:absolute;top:2%;left:50%;transform:translateX(-50%);width:32%;height:4.6%;border-radius:999px;background:#020306;box-shadow:inset 0 1px 2px #000;display:flex;align-items:center;justify-content:flex-end;padding-right:10%;gap:7%}
.connected-camera{position:absolute;right:13%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#293d62,#111a30 48%,#05080f 70%);box-shadow:0 0 0 1px #121827}
.connected-camera-indicator{position:absolute;right:34%;width:5%;aspect-ratio:1;border-radius:50%;background:#63e88a;animation:connected-camera-pulse 2.8s ease-in-out infinite;animation-play-state:paused}
.connected.is-active .connected-camera-indicator{animation-play-state:running}
.connected-home-indicator{position:absolute;bottom:1.8%;left:50%;transform:translateX(-50%);width:35%;height:.65%;border-radius:999px;background:#f3f5ff;opacity:.9}
@keyframes connected-camera-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.connected-camera-indicator{animation:none}}
.connected-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#fff2,transparent 35%,transparent 65%,#90ebfa12);border-radius:inherit}
.connected-device figcaption{color:#a9bed5;font-size:10px;line-height:1.5;margin:17px auto 0;max-width:240px}
.connected-outro{text-align:center;padding:65px 7% 0}
.connected-outro p{font-size:clamp(28px,3.3vw,46px);letter-spacing:-.03em;line-height:1.3;margin:0 0 25px;max-width:850px}
.connected-outro p span{color:#90dfe9}
.connected-outro a{display:inline-flex;align-items:center;min-height:44px;gap:16px}
.connected.cinema-ready{height:440svh}
.cinema-ready .connected-stage{height:100svh;position:sticky;top:0;padding:0;overflow:hidden;perspective:1400px}
.cinema-ready .connected-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7%}
.cinema-ready .connected-card{position:absolute;inset:0;margin:0;padding:4vh 7%;display:flex;align-items:center;transform-origin:50% 65%}
.cinema-ready .connected-layout{width:100%}
.cinema-ready .connected-device{width:min(27vw,310px,36svh);justify-self:center}
.cinema-ready .connected-outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 7%;pointer-events:none}
.cinema-ready .connected-outro a{pointer-events:auto}
.connected.is-active .connected-card,.connected.is-active .connected-device{will-change:transform,opacity}
@media(max-width:700px){
 .connected-stage{padding:65px 0}.connected-intro{padding-bottom:40px}
 .connected-layout{grid-template-columns:1fr 1fr;gap:22px 18px}
 .connected-device{grid-column:1/-1;grid-row:2;width:min(62vw,280px);justify-self:center}
 .connected-copy h3{font-size:24px;margin-bottom:12px}.connected-copy p{font-size:14px;line-height:1.5}.connected-detail{display:none}
 .connected-card{padding:35px 7%;border-radius:30px}.connected-device figcaption{font-size:9px;margin-top:10px}
 .connected.cinema-ready{height:380svh}.cinema-ready .connected-card{padding:32px 7% 60px;align-items:center}
 .cinema-ready .connected-device{width:min(55vw,23svh)}
 .cinema-ready .connected-intro h2{font-size:clamp(34px,9vw,52px)}
 .connected-outro p{font-size:30px}
}
@media(max-height:570px){.connected.cinema-ready{height:auto}.cinema-ready .connected-stage{position:relative;height:auto;padding:60px 0}.cinema-ready .connected-intro,.cinema-ready .connected-card,.cinema-ready .connected-outro{position:relative;inset:auto;transform:none!important;opacity:1!important;filter:none!important}.cinema-ready .connected-intro{padding-bottom:40px}.cinema-ready .connected-card{margin:0 4%;padding:35px 5%}.cinema-ready .connected-outro{padding-top:45px}.cinema-ready .connected-copy,.cinema-ready .connected-device{transform:none!important;opacity:1!important}.cinema-ready .connected-device{width:min(40vw,260px)}}