/* A second product visual; the interactive app and its dimensions are untouched. */
.app-visual { position:relative; overflow:hidden; padding:65px 0 130px; }
.app-visual-inner { max-width:1520px; margin:auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:clamp(50px,6vw,110px); }
.app-visual-media { width:calc(100% + 180px); margin-left:-180px; transform:translate3d(var(--app-visual-x,-100px),0,0); }
.app-visual-media .sync-demo { max-width:none; border-radius:18px; box-shadow:0 35px 75px -20px #0009; }
.app-visual-media .sd-preview { aspect-ratio:16 / 9; height:auto; }
.app-visual-media .sd-body { padding-top:1.65cqw; padding-bottom:1.65cqw; }
.app-visual-media .sd-tracks { min-height:11.2cqw; max-height:11.2cqw; padding-top:1.4cqw; }
.app-visual-media .sd-playback { margin-block:1cqw; }
.app-visual-media .sd-footer { padding-block:.7cqw; }
.app-visual-copy { padding-right:clamp(28px,5vw,90px); }
.app-visual-copy h2 { margin:0 0 24px; font-size:clamp(36px,4.2vw,62px); font-weight:450; line-height:1.06; letter-spacing:-.05em; color:#eaf1f2; }
.app-visual-copy p { max-width:33ch; font-size:clamp(16px,1.45vw,19px); line-height:1.65; color:#aab5af; margin:0 0 30px; }
@media(min-width:1600px) { .app-visual-media { width:calc(100% + 280px); margin-left:-280px; } }
@media(max-width:700px) {
 .app-visual { padding:32px 0 85px; }
 .app-visual-inner { display:flex; flex-direction:column; gap:40px; align-items:stretch; }
 .app-visual-media { width:115%; margin-left:-20%; }
 .app-visual-copy { padding:0 28px; }
 .app-visual-copy h2 { font-size:40px; }
}
@media(prefers-reduced-motion:reduce) { .app-visual-media { transform:none; } }

/* The editor enters from the right, keeping transport controls on screen. */
.app-visual-inner { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
.app-visual-media { grid-column:2; grid-row:1; width:calc(100% + 180px); margin-left:0; margin-right:-180px; }
.app-visual-copy { grid-column:1; grid-row:1; padding:0 0 0 clamp(28px,5vw,90px); }
.app-visual-media .sd-clip[data-clip="camera"] { left:24%; width:49%; }
.app-visual-media .sd-clip[data-clip="camera2"] { left:3%; width:91%; }
.app-visual-media .sd-tracks { min-height:15.5cqw; max-height:15.5cqw; }
@media(min-width:1600px) { .app-visual-media { width:calc(100% + 280px); margin-left:0; margin-right:-280px; } }
@media(max-width:700px) { .app-visual-copy { order:-1; padding:0 28px; }.app-visual-media { width:115%; margin:0 -15% 0 0; } }

/* Phone overrides must follow this component's own default rules. */
@media(max-width:700px) {
 .app-visual-media { margin-left:40%; margin-right:-55%; }
 .app-visual-media .sync-demo { border-radius:6px; border-width:.5px; }
 .terrain-app-slot .ar-editor .ar-preview,.product-stack .sd-preview,.app-visual-media .sd-preview { border-radius:3px; }
}

@media(max-width:700px) {
 .app-visual-media { margin-left:20%; margin-right:-35%; }
 .product-stack { padding-bottom:128px; margin-bottom:0; }
 .app-visual { padding-top:16px; padding-bottom:120px; margin-block:0; }
 .story-close { padding-top:0; margin-top:0; }
 .product-stack .device-stage .qr-phone,
 .product-stack .device-stage.is-qr .qr-phone {
  display:block; position:absolute; left:76%; right:auto; top:var(--mobile-qr-center,120px); bottom:auto;
  margin:0; width:160px;
  transform:translate(-50%,-50%) scale(var(--mobile-qr-scale,.65)) perspective(700px) rotateY(-12.6deg);
  transition:opacity .45s ease,visibility .45s;
 }
 .product-stack .device-stage:not(.is-qr) .qr-phone { opacity:0; visibility:hidden; pointer-events:none; }
 .product-stack .device-stage.is-qr .qr-phone { opacity:1; visibility:visible; }
 .product-stack .device-stage .desktop-device { transition:filter .45s ease; }
 .product-stack .device-stage.is-qr .desktop-device { filter:brightness(.7); }
 .product-notes [role="tabpanel"].panel-arrive { animation:phone-panel-fade .45s ease both; }
 @keyframes phone-panel-fade { from{opacity:0} to{opacity:1} }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
 .product-stack .device-stage .qr-phone,.product-stack .device-stage .desktop-device { transition:none; }
 .product-notes [role="tabpanel"].panel-arrive { animation:none; }
}

/* No desktop sticky-scroll runway after Clarity on phones. */
@media(max-width:700px) {
 .review-anchor-track::after { display:none; height:0; }
 .product-stack .review-story { position:relative; top:auto; }
}

/* Targeted phone copy alignment only; section and animation geometry unchanged. */
@media(max-width:700px) {
 #hero-stage .hero__text .sc-display { font-size:clamp(52px,12vw,72px); }
 #hero-stage .hero__sub,
 .story-close-copy > p:not(.story-availability):not(.story-footnote) {
  font-size:var(--sc-t-base); line-height:var(--sc-leading-body);
 }
}

/* Phone section headlines: user-approved common size. */
@media(max-width:700px) {
 #hero-stage .hero__text .sc-display,
 #about h2.sc-display,
 .signal-copy h2,
 .product-intro--flow h2,
 .product-stack .review-heading h2,
 .app-visual-copy h2,
 .story-close h2 { font-size:40px; }
}

@media(max-width:700px) {
 .product-stack .review-heading h2 { font-size:32px; }
 #hero-stage { height:100svh; min-height:0; }
 .story-close-landscape img { inset-block-start:40px; }
}

/* Fade each shifted closing layer before its own lower image edge. */
@media(max-width:700px) {
 .story-close-landscape img {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 94%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 94%);
 }
}

/* End the mobile page shortly after its copyright, without a minimum-height tail. */
@media(max-width:700px) {
 .story-close { min-height:0; padding-bottom:0; }
 .story-close .story-footer { padding-bottom:20px; }
}