/* Promo Video - only what the Motion Transfer and Velocity stylesheets do not carry. */

/* the logo and the picture, side by side */
.pv-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pv-slot .ad-drop{min-height:150px;padding:18px 10px}
.pv-picked{position:relative;display:grid;justify-items:center;gap:8px}
.pv-picked img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:14px;display:block;
  background:repeating-conic-gradient(#1a1a24 0 25%,#0f0f16 0 50%) 50%/16px 16px;border:1px solid rgba(255,255,255,.14)}
.pv-slot[data-kind="photo"] .pv-picked img{object-fit:cover}

/* one tap: what it is for, and the button */
.pv-chips{display:flex;flex-wrap:wrap;gap:8px}
.pv-chip{appearance:none;border:1px solid rgba(255,255,255,.14);background:#14141b;color:#d6d3e6;font:700 14px/1 Inter,system-ui,sans-serif;
  padding:11px 15px;border-radius:999px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pv-chip:hover{border-color:rgba(255,255,255,.3)}
.pv-chip[aria-pressed="true"]{border-color:#a78bfa;background:rgba(139,92,246,.2);color:#fff}
.pv-small .pv-chip{font-size:13px;padding:9px 13px}
.pv-label{margin:16px 0 8px;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8f8aa6}

/* the words, already written; changing them is optional */
.pv-words{margin-top:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:0 14px}
.pv-words summary{cursor:pointer;padding:12px 0;font:700 14px/1.2 Inter,system-ui,sans-serif;color:#d6d3e6}
.pv-words summary span{font-weight:500;color:#8f8aa6;margin-left:6px}
.pv-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 0 14px}
.pv-fields .ad-f:nth-last-child(-n+2){grid-column:1/-1}
.pv-fields input{width:100%}

/* the example plays until theirs is made */
.pv-example{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pv-tag{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;
  font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;backdrop-filter:blur(6px)}
#pvOut{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:inherit}

@media (max-width:520px){ .pv-fields{grid-template-columns:1fr} }

/* on a phone the box stays vertical, the shape of the video, not the 4:3 of the studio it borrows from */
@media (max-width:900px){
  .pv-body .mt-outBox.vel-outBox{aspect-ratio:9/16;max-height:none;height:auto;width:min(100%,calc(72vh*9/16));margin:0 auto}
}
.pv-body #pvExample{object-fit:cover}