/* The finished portrait films keep their original frame; the surrounding copy
   connects each film to its place in the shopping journey. */
.motion-feature, .how-film-feature { display:grid; align-items:center; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,100px); padding:64px 8vw; color:var(--ink,#123532); background:#d5eee8; scroll-margin-top:100px; }
.motion-copy { min-width:0; max-width:620px; }
.motion-label { margin:0 0 24px; font-size:.85rem; font-weight:700; }
.motion-copy h2 { font-size:clamp(2.25rem,4.2vw,4.6rem); line-height:1.02; letter-spacing:-.035em; margin:0 0 24px; text-wrap:balance; }
.motion-intro { max-width:42ch; font-size:1.08rem; line-height:1.65; margin:0 0 28px; }
.motion-flavors { display:flex; flex-wrap:wrap; column-gap:22px; row-gap:8px; max-width:440px; margin:0 0 28px; }
.motion-flavors a { color:inherit; font-size:.94rem; min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
.motion-feature .actions { gap:8px 20px; align-items:center; margin:0; }
.motion-description { max-width:48ch; margin-top:28px; font-size:.85rem; line-height:1.6; }
.motion-description summary { cursor:pointer; width:fit-content; padding:10px 0; }
.motion-description p { margin:8px 0 0; }
.motion-player { width:100%; max-width:340px; margin:0; justify-self:center; min-width:0; }
.portrait-film { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:#123532; border-radius:14px; }
.motion-player figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; font-size:.75rem; line-height:1.5; margin-top:12px; }
.motion-copy a:focus-visible, .motion-description summary:focus-visible, .portrait-film:focus-visible { outline:3px solid #005d59; outline-offset:5px; }
.how-film-feature { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); background:#e4ede8; padding-top:48px; padding-bottom:48px; }
.how-film-feature .motion-copy h2 { font-size:clamp(2.1rem,3.5vw,3.7rem); }
.how-film-steps { list-style:none; counter-reset:how-step; padding:0; margin:0 0 28px; }
.how-film-steps li { counter-increment:how-step; position:relative; padding:16px 0 16px 48px; border-top:1px solid #afc3bb; }
.how-film-steps li::before { content:"0" counter(how-step); position:absolute; top:19px; left:0; font-size:.82rem; }
.how-film-steps h3 { margin:0 0 6px; font-size:1.12rem; }
.how-film-steps p { margin:0; font-size:.96rem; line-height:1.55; max-width:42ch; }
.how-film-notes h3 { font-size:1.3rem; }
@media(max-width:800px) {
  .motion-feature, .how-film-feature { grid-template-columns:minmax(0,1fr); gap:32px; padding:40px 24px; }
  .motion-copy { max-width:600px; }
  .motion-player { max-width:300px; }
  .motion-copy h2 { font-size:clamp(2.4rem,8.5vw,3.7rem); }
  .motion-feature .actions { align-items:flex-start; flex-direction:column; }
  .motion-description { margin-top:16px; }
}
@media(max-width:360px) { .motion-feature, .how-film-feature { padding-inline:20px; } .motion-player figcaption { font-size:.7rem; } }