/* ══ APP FILMS ON THE HOMEPAGE, 16–17 Oct 2026 ════════════════════════════════
   Find My Place style (Daniel, 17 Oct: "Look how I made Find My Place"):
   every film is a card inside the page margins, never edge to edge, with its
   own dark ground and its caption baked in. The player is js/films.js.
   Also here: on phones the page shares one center line with the films
   (Daniel: "It needs to be centered"). */

.film {
  position: relative; aspect-ratio: 1080 / 2200; border-radius: 30px; overflow: hidden;
  background: #140a30;
  box-shadow: 0 34px 70px -34px rgba(20, 10, 48, .6), 0 0 0 1px rgba(107, 42, 193, .08);
}
.film > .poster, .film > iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.film > .poster { object-fit: cover; }
.film > iframe { opacity: 0; transition: opacity .5s ease; pointer-events: none; background: transparent; }
.film.live > iframe { opacity: 1; }

/* ── the hero ── */
.hx-stage { padding: 24px 0; display: flex; justify-content: center; }
.film-hero { width: min(390px, 100%); }

/* ── how it works: the film, and the three steps you can tap ── */
.how .sec-head { text-align: center; }
.how .sec-head p { margin-left: auto; margin-right: auto; }
.how-film {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 480px);
  justify-content: center; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.how-film .steps { display: flex; flex-direction: column; gap: 10px; }
.how-film .step {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: start;
  padding: 18px 20px; border: 1px solid transparent; border-top: 1px solid transparent;
  border-radius: 18px; background: transparent; cursor: pointer; text-align: left;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.how-film .step:last-child { border-bottom: 1px solid transparent; }
.how-film .step::after { display: none; }
.how-film .step .num { grid-row: 1 / span 2; margin: 0; font-size: 2rem; line-height: 1; }
.how-film .step h3 { margin: 2px 0 4px; }
.how-film .step > * { transition: opacity .3s ease; }
.how-film.playing .step:not(.on) > * { opacity: .45; }
.how-film .step.on {
  background: #fff; border-color: rgba(107, 42, 193, .18);
  box-shadow: 0 14px 30px -20px rgba(36, 20, 88, .35);
}
.how-film .step:focus-visible { outline: 2px solid #6b2ac1; outline-offset: 2px; }

/* ── know someone: one centered column, the film under the headline ── */
.nominate-inner { display: block; max-width: 640px; margin: 0 auto; text-align: center; }
.nominate-inner > * { margin-left: auto; margin-right: auto; }
.nominate h2 { margin: 0 0 26px; }
.nominate-inner > p:not(.nom-foot) { margin: 28px auto 26px; max-width: 46ch; text-align: center; }
.nominate-inner .btn { display: inline-flex; }
.nominate-inner .nom-foot { margin: 22px auto 0 !important; text-align: center; max-width: 46ch; }
.film-refer { width: min(390px, 100%); }

/* ── tablets and phones ── */
@media (max-width: 900px) {
  .hx-main > *, .how-film > * { min-width: 0; }
  .hx-stage { height: auto; padding: 22px 0 8px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .film-hero { width: min(400px, 100%); }
  .how-film { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
  .film-how { width: min(400px, 100%); }
  .how-film .steps { width: min(520px, 100%); }
}

/* ── phones: one center line ── */
@media (max-width: 640px) {
  .film { border-radius: 24px; }
  .manifesto, .rule, .events, .founders-copy, .standard, .nominate { text-align: center; }
  .manifesto h2, .manifesto .foot, .rule h2, .rule-lead, .rule-sub,
  .sec-head h2, .sec-head p, .events .sec-head p, .events .note, .standard .kicker,
  .founders-copy p { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head { text-align: center; }
  .event-chips { justify-content: center; }
  .how-film .step { padding: 16px 16px; }
}
@media (max-width: 640px) {
  .nominate .kicker, .nominate h2, .nominate .nom-foot, .nominate-inner > p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}