/* /film (owner, 7 Nov night): the Diwali film, and a tap on it opens app.snaapai.in */
.film-hero{position:relative;min-height:100vh;padding:104px 0 56px;background:radial-gradient(60% 50% at 80% 10%,rgba(139,61,255,.35),transparent 70%),radial-gradient(50% 40% at 10% 100%,rgba(255,63,164,.22),transparent 70%),#0d0618;color:#fff}
.film-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
.film-stage{position:relative;width:100%;max-width:420px;margin:0 auto}
.film-tap{position:relative;display:block;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.12),0 0 70px rgba(170,90,255,.35)}
.film-tap video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.film-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:rgba(255,210,63,.95);color:#2a0b3d;font:800 15px/1.1 Inter,sans-serif;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4);animation:filmHint 2.4s ease-in-out infinite}
@keyframes filmHint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.film-sound{position:absolute;right:12px;top:12px;z-index:2;padding:9px 14px;border:0;border-radius:999px;background:rgba(10,4,24,.72);color:#fff;font:700 14px/1 Inter,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.film-sound[aria-pressed=true]{background:rgba(139,61,255,.85)}
.film-sound:focus-visible{outline:3px solid #FFD23F;outline-offset:2px}
.film-copy h1{margin:14px 0 12px;font-size:clamp(34px,5vw,56px);line-height:1.05}
.film-lede{max-width:520px;margin:0 0 22px;font-size:18px;line-height:1.5;color:#e6d6ff}
.film-note{margin:14px 0 0;font-size:15px;color:#cbb8ee}
.film-note b{color:#fff}
.film-qr{display:flex;align-items:center;gap:14px;margin-top:22px}
.film-qr img{width:116px;height:116px;padding:7px;border-radius:14px;background:#fff}
.film-qr span{max-width:200px;font-size:14px;color:#cbb8ee}
@media (max-width:860px){
  .film-hero{padding:84px 0 40px}
  .film-in{grid-template-columns:1fr;gap:26px}
  .film-stage{max-width:min(420px,calc((100svh - 150px) * 9 / 16))}
  .film-copy{text-align:center}
  .film-lede{margin-left:auto;margin-right:auto}
  .film-qr{display:none}
}
html[data-theme=light] .film-hero{color:#fff}
@media (max-width:860px){.film-page .ask-fab{display:none}}   /* on phones the floating Ask button sat on the video corner */