/* How it works film (auto + loop) */
.howitworks { margin-top: 28px; }
.howitworks .how-film {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.12);
}
.howitworks .how-film a { display:block; position:relative; color: inherit; text-decoration:none; }
.howitworks .how-film-img { width:100%; height: clamp(320px, 48vw, 520px); object-fit: cover; display:block; transition: opacity 260ms ease; }
.howitworks .how-film.is-fading .how-film-img { opacity: .55; }
.howitworks .how-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.52) 55%, rgba(0,0,0,0.76) 100%);
}
.howitworks .how-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity:.9; }
.howitworks .how-title { margin: 8px 0 0 0; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.15; }
.howitworks .how-dots { margin-top: 14px; display:flex; gap:8px; }
.howitworks .how-dot { width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.35); }
.howitworks .how-dot.active { background: rgba(255,255,255,.95); }

/* Montage final scene */
.howitworks .how-montage { position:absolute; inset:0; padding: 18px; display:none; }
.howitworks .how-film.is-montage .how-montage { display:block; }
.howitworks .how-film.is-montage .how-film-img { opacity:0; }
.howitworks .how-grid {
  height:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}
.howitworks .how-grid-item img { width:100%; height:100%; object-fit:cover; display:block; }


/* Montage final scene v2 (dark page + clickable tiles) */
.howitworks .how-montage {
  background: rgba(0,0,0,0.82);
  display:none;
}
.howitworks .how-film.is-montage .how-montage { display:block; }
.howitworks .how-grid-item {
  display:block;
  cursor:pointer;
  outline: none;
}
.howitworks .how-grid-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}
.howitworks .how-grid-item img { transform: scale(1.02); transition: transform 260ms ease; }
.howitworks .how-grid-item:hover img { transform: scale(1.06); }


/* Ensure montage scene is a clean dark page */
.howitworks .how-film.is-montage .how-overlay { opacity: 0; pointer-events:none; }
/* Typing effect */
.howitworks .how-title { white-space: nowrap; overflow: hidden; }
.howitworks .how-title.is-typing::after { content: "▍"; margin-left: 6px; opacity: .9; animation: howblink 1s steps(1) infinite; }
@keyframes howblink { 50% { opacity: 0; } }

.howitworks .how-montage-dark { background: rgba(0,0,0,0.86); }


/* Montage tiles: sequential reveal + captions */
.howitworks .how-grid-item{
  position: relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  opacity:0;
  transform: translateY(10px);
}
.howitworks .how-film.is-montage .how-grid-item{
  animation: howtilein 900ms ease forwards;
  animation-delay: calc(var(--d) * 1.6);
}
@keyframes howtilein{
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
/* reset when leaving montage so next loop animates again */
.howitworks .how-film:not(.is-montage) .how-grid-item{
  animation: none !important;
  opacity:0;
  transform: translateY(10px);
}
.howitworks .how-grid-item img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform 260ms ease; }
.howitworks .how-grid-item:hover img{ transform: scale(1.06); }

.howitworks .how-tile-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 10px 11px;
  font-size: 16px;
  line-height:1.25;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.78) 100%);
  color: rgba(255,255,255,0.96);
}


/* Ultra-slow sequential montage with typing-controlled reveal */
.howitworks .how-film.is-montage .how-grid-item{ opacity:0; transform: translateY(14px); }
.howitworks .how-grid-item.revealed{
  opacity:1;
  transform: translateY(0);
  transition: opacity 800ms ease, transform 800ms ease;
}
.howitworks .how-tile-cap{ white-space: nowrap; overflow:hidden; }
.howitworks .how-tile-cap.is-typing::after{
  content:"▍";
  margin-left:6px;
  animation: howblink 1s steps(1) infinite;
}

/* Montage: show caption first, then image */
.howitworks .how-grid-item img{ opacity:0; transition: opacity 480ms ease; }
.howitworks .how-grid-item.show-img img{ opacity:1; }