/* Keep the two section transitions compact even on tall desktop screens. */
@media(min-width:900px){
 #story{padding-bottom:12px}
 #story .scene-note{margin-top:8px}
 #experience{padding-top:18px;padding-bottom:14px}
 #experience .experience{padding-bottom:22px}
 #merchant{padding-top:20px}
}
/* Both temples start at the front frame hinges and extend behind the lenses. */
.demo-preview .temple{top:15px;height:2.5px;box-shadow:none}
.demo-preview .temple-left{left:3px;transform:rotateY(90deg)}
.demo-preview .temple-right{right:3px;transform:rotateY(-90deg)}
.demo-preview .temple:after{top:0;width:8px;height:2.5px;transform:rotate(28deg)}
.demo-preview .temple-right:after{transform:rotate(-28deg)}
@keyframes frame-inspection{0%,12%,100%{transform:rotateY(0deg)}32%{transform:rotateY(55deg)}52%{transform:rotateY(0deg)}72%{transform:rotateY(-55deg)}88%{transform:rotateY(0deg)}}

/* Updated copy: adapt headline and text blocks to available space. */
.hero h1{font-size:clamp(34px,3.45vw,51px);letter-spacing:-.045em;line-height:1.25;overflow-wrap:anywhere}
.story-head p,.merchant-heading p,.privacy-copy h2,.experience-copy h2{overflow-wrap:anywhere}
@media(max-width:600px){.hero h1{font-size:clamp(27px,7.2vw,36px);letter-spacing:-.04em}.hero .copy{min-width:0}.hero .lead{max-width:100%}}