/* The phone sits on the page centreline. Wide screens retain the whole take;
   narrow screens use a closer proportional frame with the grip in view. */
/* A short handoff from the hero; keep the product close to the first chapter. */
#attach{padding:clamp(24px,3vw,48px) 0 0;scroll-margin-top:0;background:#000}
#attach .attach-film__stage{position:relative;min-height:100svh;max-width:1800px;margin-inline:auto;isolation:isolate;display:grid;align-items:center;padding-top:var(--nav-h)}
#attach .attach-film__copy{position:relative;z-index:2;width:36%;margin-left:max(var(--gutter),calc((100% - var(--wrap)) / 2));padding-block:80px;text-align:left;pointer-events:none}
#attach .attach-film__copy .title{display:grid;gap:.12em;font-size:clamp(32px,3.8vw,60px);line-height:1.25;letter-spacing:.035em;text-wrap:nowrap}
#attach .attach-film__copy .gold{display:block;white-space:pre-wrap}
#attach .attach-film__copy .sub{margin-top:28px;font-size:clamp(14px,1.22vw,20px);line-height:1.9;letter-spacing:.035em}
/* Scale the complete media plane, including posters and the tracked SVG. */
#attach .attach-film__visual{position:absolute;left:50%;top:calc(50% + var(--nav-h) / 2);translate:-50% -50%;transform:scale(1.15);transform-origin:center;width:min(100%,calc(100svh * 3840 / 1646));aspect-ratio:3840/1646;margin:0;isolation:isolate}
#attach .attach-film__trigger{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}
#attach .attach-film__image,#attach .attach-film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* Copy is visible by default; the initialized controller owns its entrance. */
#attach .attach-film__copy .sub{width:max-content;max-width:100%}
#attach .attach-film__copy-line{display:block}
#attach .attach-film__start,#attach .attach-film__video{visibility:hidden}
#attach[data-state="idle"] .attach-film__start,#attach[data-state="playing"] .attach-film__start,#attach[data-state="paused"] .attach-film__start,#attach[data-state="blocked"] .attach-film__start{visibility:visible}
#attach[data-frame="true"] .attach-film__video{visibility:visible}
#attach[data-state="static"] .attach-film__end{z-index:1}
/* Keep the decoded final video frame on completion, avoiding a video/image
   colour-pipeline switch. The end image remains the static/error fallback. */
#attach[data-state="complete"][data-frame="true"] .attach-film__video{z-index:1}
@media(max-width:899px){
  #attach .attach-film__stage{min-height:calc(100svh - 24px);padding-top:calc(var(--nav-h) + 48px);padding-bottom:0;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}
  #attach .attach-film__copy{width:auto;margin-inline:var(--gutter);padding:0}
  #attach .attach-film__copy .title{font-size:clamp(30px,5.2vw,46px);gap:.1em}
  #attach .attach-film__copy .sub{font-size:clamp(14px,2.3vw,18px);margin-top:20px}
  #attach .attach-film__visual{position:relative;top:auto;left:auto;translate:none;width:100%;height:min(58svh,90vw,520px);aspect-ratio:auto;margin-top:24px;overflow:clip}
  #attach .attach-film__image,#attach .attach-film__video{object-fit:cover;object-position:50% 50%}
}
@media(max-width:599px){
  /* Give the product a readable size in a narrow preview or phone viewport. */
  #attach .attach-film__stage{padding-top:calc(var(--nav-h) + 32px);padding-bottom:0}
  #attach .attach-film__copy .title{font-size:32px}
  #attach .attach-film__visual{margin-top:30px}
}
@media(min-width:900px) and (max-height:600px){
  #attach .attach-film__stage{min-height:600px}
}

/* The display is rendered from original vector paths in the DOM, not baked into
   the video. Its viewBox follows the video's contain/cover framing exactly. */
#attach .attach-film__screen{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:hidden;pointer-events:none;mix-blend-mode:lighten}
#attach .attach-film__screen[data-screen-state="off"]{visibility:hidden}
#attach .attach-film__screen [data-screen-ui]{display:none}
#attach .attach-film__screen[data-screen-state="connecting"] [data-screen-ui="connecting"],
#attach .attach-film__screen[data-screen-state="smart"] [data-screen-ui="smart"]{display:inline}