/* Supplied camera journey, intact product render, then the existing app film. */
.product-cinema { position:absolute; inset:14% 13% 15% 17%; z-index:4; opacity:0; visibility:hidden; transition:opacity .8s,visibility .8s; cursor:grab; touch-action:pan-y; user-select:none; }
.product-cinema.is-dragging { cursor:grabbing; }
.product-cinema video { display:block; width:100%; height:100%; object-fit:contain; mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(transparent,#000 15%,#000 80%,transparent); mask-composite:intersect; }
.cinema-caption { position:absolute; bottom:8%; left:8%; pointer-events:none; text-shadow:0 2px 15px #000; }
.cinema-caption span { display:block; color:#a4bac3; font:8px/2 monospace; letter-spacing:.19em; }
.cinema-caption strong { color:#e1ebef; font:400 19px/1.5 "Open Sans",sans-serif; letter-spacing:-.03em; }
.studio-object,.studio-field,.studio-coordinate,.studio-stage__caption { transition:opacity .75s; }
.product-cinema { transition:opacity .35s,visibility .35s; }
.studio-object { transition:opacity .4s .2s; }
[data-motion-mode="film"] .product-cinema { opacity:1; visibility:visible; }
[data-motion-mode="film"] .studio-object,[data-motion-mode="film"] .studio-field,[data-motion-mode="film"] .studio-stage__caption { opacity:0; visibility:hidden; pointer-events:none; }
[data-motion-mode="film"] .studio-object { transition-delay:0s; }
[data-motion-mode="film"] .studio-coordinate { opacity:.4; }
.cinema-controls { position:absolute; z-index:6; width:42%; right:5%; bottom:155px; color:#8da4b0; }
.cinema-modes { display:flex; gap:25px; border-bottom:1px solid #c5e4ed26; }
.cinema-modes button { padding:10px 0; border:0; border-bottom:1px solid transparent; background:none; font:10px/1.4 "Open Sans",sans-serif; color:#839aa5; cursor:pointer; white-space:nowrap; }
.cinema-modes button[aria-pressed="true"] { color:#d7eff5; border-bottom-color:#a5d7e5; }
.cinema-timeline { display:flex; gap:13px; align-items:center; padding-top:12px; }
.cinema-timeline button { border:0; background:none; padding:4px 0; color:#b9d6df; cursor:pointer; white-space:nowrap; font-size:9px; min-height:28px; }
.cinema-timeline input { accent-color:#acdeeb; min-width:0; flex:1; height:18px; cursor:ew-resize; }
.cinema-timeline > span { font:8px monospace; white-space:nowrap; color:#6e8794; }
.cinema-controls > p { margin:6px 0 0; font:8px/1.5 "Open Sans",sans-serif; color:#718a96; }
/* Keep the connection in normal flow; media never crosses the heading. */
.connected-story { background:#080d11; padding:72px 0; }
.connected-story__sticky { position:relative; }
.connected-story__heading { position:relative; }
.connected-story__intro { color:#7b95a3; font:10px/1.8 monospace; }
.connection-composition { position:relative; width:var(--s-shell); max-width:1400px; margin:36px auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:40px; align-items:center; }
.connection-hardware { position:relative; min-width:0; }
.connection-hardware__still { display:block; width:100%; height:auto; clip-path:url(#saathee-silhouette); }
.connection-hardware > span { display:block; text-align:center; color:#acc1cb; font:9px/1.8 monospace; letter-spacing:.12em; }
.connection-hardware i { display:block; color:#67808c; font:8px/1.8 monospace; }
.connection-trail { display:none; }
.connection-life { min-width:0; }
.connection-life video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#050606; border-radius:4px; }
.connection-life__label { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px; color:#a5bfca; font:8px/1.8 monospace; letter-spacing:.08em; }
.connection-life__label button { margin-left:auto; padding:10px 0; min-height:44px; border:0; background:none; color:#b8dce7; cursor:pointer; font:10px/1.5 "Open Sans",sans-serif; }
.connected-story__footer { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; border-top:1px solid #ffffff16; padding-top:20px; color:#7692a1; }
.connected-story__footer > div { display:flex; flex-wrap:wrap; gap:24px; font:8px/1.8 monospace; letter-spacing:.08em; }
.connected-story__footer a { color:#accbd9; font-size:10px; }
.family-card__body h3 { line-height:1.18; text-wrap:balance; }
@media(max-width:767px) {
  .product-cinema { inset:8% 15% 15%; }
  .cinema-caption { bottom:6%; left:8%; }
  .cinema-caption span { font-size:7px; }
  .cinema-caption strong { font-size:14px; }
  .cinema-controls { position:relative; width:100%; right:auto; bottom:auto; margin:16px 0 24px; }
  .cinema-modes { gap:20px; }
  .cinema-modes button { min-height:44px; }
  .cinema-timeline button { min-height:44px; }
  .connected-story { padding:56px 0; }
  .connection-composition { grid-template-columns:1fr; gap:24px; }
  .connection-hardware { width:65%; max-width:280px; justify-self:center; }
  .connection-life__label { letter-spacing:0; }
}
@media(prefers-reduced-motion:reduce) {
  .product-cinema,.studio-object,.studio-field,.studio-coordinate,.studio-stage__caption { transition:none; }
}

/* Reserve a quiet control band above the existing metrics. */
@media(min-width:768px) {
  .studio-hero .studio-stage { width:65%; right:-3%; top:42%; }
  .studio-stage__caption { display:none; }
  .cinema-controls { bottom:135px; }
}
@media(min-width:768px) and (max-height:800px) {
  .studio-hero .studio-stage { width:56%; right:1%; top:37%; }
  .studio-hero .studio-coordinate { top:18%; }
  .product-cinema { inset:22% 13% 15% 17%; }
}
.saathee-page .connected-story h2 { font:400 clamp(34px,3.3vw,50px)/1.13 "Open Sans",sans-serif; letter-spacing:-.055em; margin:18px 0; }
.connected-story h2 span { color:#7893a2; }
.connection-composition { max-width:1280px; }