/* ==========================================================================
   AlphaLeap film — the homepage / Process page film, unchanged.
   Copied verbatim from wealthcore/home.css (filmdlg 359–387, filmx 963–1012,
   section rhythm 1085–1088, dialog fit 1104–1128). Behaviour lives in al-film.js
   (verbatim from core.js). Edit the originals first, then re-copy.
   ========================================================================== */
.filmdlg { position: fixed; inset: 0; margin: auto; width: min(1180px, 92vw); max-height: 96vh; padding: 0; border: 0; background: transparent; color: #ECECEA; overflow: visible; }
.filmdlg::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(10px); }
.filmdlg__frame { position: relative; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 140px rgba(0,0,0,.8); transform-origin: center; }
.filmdlg video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.filmdlg__play { position: absolute; inset: 0 0 56px; display: grid; place-items: center; cursor: pointer; }
.filmdlg__play i { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .45s var(--spring); }
.filmdlg__play i::before { content: ""; display: block; margin: 25px 0 0 31px; border-left: 20px solid #000; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.filmdlg.is-paused .filmdlg__play i { opacity: 1; transform: none; }
.filmdlg__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); opacity: 0; transition: opacity .35s; }
.filmdlg__frame:hover .filmdlg__bar, .filmdlg.is-paused .filmdlg__bar, .filmdlg__bar:focus-within { opacity: 1; }
.filmdlg__pp { width: 28px; height: 28px; display: grid; place-items: center; }
.filmdlg__pp i { width: 10px; height: 13px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.filmdlg.is-paused .filmdlg__pp i { width: 0; height: 0; border-right: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.filmdlg__track { position: relative; flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; }
.filmdlg__track::before { content: ""; position: absolute; inset: -10px 0; }
.filmdlg__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #fff; }
.filmdlg__time { font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); white-space: nowrap; }
.filmdlg__mute { font-size: 13px; color: rgba(255,255,255,.85); padding: 6px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.filmdlg__chapters { list-style: none; display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.filmdlg__chapters button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: rgba(255,255,255,.6); font-size: 13.5px; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.filmdlg__chapters button b { font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.4); }
.filmdlg__chapters button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.filmdlg__chapters button.on { background: #fff; color: #000; border-color: #fff; }
.filmdlg__chapters button.on b { color: rgba(0,0,0,.5); }
.filmdlg__fine { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.45); }
.filmdlg__x { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 24px; line-height: 1; transition: background .25s; }
.filmdlg__x:hover { background: rgba(255,255,255,.2); }
.filmdlg :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { .filmdlg { width: 94vw; } .filmdlg__x { top: -48px; } .filmdlg__mute { display: none; } }

/* =========================================================
   FILM showcase — sells the 1-minute explainer
   ========================================================= */
.filmx { position: relative; padding: clamp(64px, 10vh, 120px) var(--pad) clamp(70px, 10vh, 120px); background: #000; border-top: 1px solid var(--line); }
.filmx__head { max-width: 760px; margin: 0 auto; text-align: center; }
.filmx__head .chip { margin-inline: auto; }
.filmx__h { margin-top: 18px; font-size: clamp(36px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; color: var(--text); }
.filmx__sub { margin: 18px auto 0; max-width: 58ch; font-size: var(--t-intro); line-height: 1.6; color: rgba(var(--on), .68); }
.filmx__frame { position: relative; width: min(1240px, 100%); margin: clamp(36px, 6vh, 56px) auto 0; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #0A0A0B; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 70px 160px -50px rgba(0,0,0,1); transform-origin: 50% 30%; will-change: transform; }
.filmx__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filmx__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 26%, rgba(0,0,0,0) 42%); pointer-events: none; }
.filmx__now { position: absolute; left: clamp(18px, 2.4vw, 32px); top: clamp(16px, 2.2vw, 28px); display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.filmx__now i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: filmxLive 1.6s ease-in-out infinite; }
@keyframes filmxLive { 50% { opacity: .25; } }
.filmx__now span { color: rgba(255,255,255,.6); }
.filmx__now b { font-weight: 600; }
.filmx__play { position: absolute; left: clamp(18px, 2.4vw, 32px); bottom: clamp(24px, 3vw, 40px); display: inline-flex; align-items: center; gap: 16px; padding: 10px 26px 10px 10px; border-radius: 999px; background: #fff; color: #0B0B0C; box-shadow: 0 20px 50px -16px rgba(0,0,0,.8); transition: transform .45s var(--spring), box-shadow .45s; text-align: left; }
.filmx__play:hover { transform: translateY(-2px) scale(1.02); }
.filmx__play:active { transform: scale(.97); transition-duration: .1s; }
.filmx__pb { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #0B0B0C; display: grid; place-items: center; }
.filmx__pb::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(11,11,12,.25); animation: filmxRing 2.4s cubic-bezier(.2,.9,.25,1) infinite; }
@keyframes filmxRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.filmx__pb i { margin-left: 4px; width: 0; height: 0; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.filmx__pt b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.filmx__pt small { font-size: 13px; color: #6E6D69; }
.filmx__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.14); }
.filmx__bar i { display: block; height: 100%; width: 0; background: #fff; }
.filmx__ch { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: min(1240px, 100%); margin: 16px auto 0; }
.filmx__ch button { display: grid; gap: 8px; width: 100%; padding: 6px; border-radius: 16px; background: transparent; color: rgba(var(--on), .55); text-align: left; transition: background .35s, color .35s; }
.filmx__ch img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; opacity: .55; filter: grayscale(1); transition: opacity .35s, transform .5s var(--spring); }
.filmx__ch span { display: grid; gap: 1px; padding: 0 4px 4px; font-size: 14.5px; line-height: 1.3; }
.filmx__ch b { font-size: var(--t-micro); font-weight: 500; color: rgba(var(--on), .4); font-variant-numeric: tabular-nums; }
.filmx__ch button:hover img { opacity: .9; transform: scale(1.02); }
.filmx__ch button.on { background: rgba(var(--on), .07); color: var(--text); }
.filmx__ch button.on img { opacity: 1; }
.filmx__ch button:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }
.filmx__fine { margin-top: 18px; text-align: center; font-size: 13.5px; color: rgba(var(--on), .58); }
@media (max-width: 860px) {
  .filmx__frame { border-radius: 20px; }
  .filmx__play { left: 50%; bottom: 50%; transform: translate(-50%, 50%); padding: 8px 20px 8px 8px; gap: 12px; }
  .filmx__play:hover { transform: translate(-50%, 50%); }
  .filmx__pb { width: 46px; height: 46px; } .filmx__pt b { font-size: 15px; } .filmx__pt small { font-size: 12px; }
  .filmx__now { font-size: 12px; padding: 6px 11px 6px 10px; } .filmx__now span { display: none; }
  .filmx__ch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad); }
  .filmx__ch li { flex: none; width: 42vw; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .filmx__now i, .filmx__pb::before { animation: none; } }

.filmx__pt b, .filmx__pt small { white-space: nowrap; }
@media (max-width: 860px) { .filmx__play { padding-right: 18px; } }

/* from home.css 1085–1088: one vertical rhythm for content sections */
:root { --sec: clamp(72px, calc(8vw + 24px), 128px); }
.filmx { padding-top: var(--sec); padding-bottom: var(--sec); }
.filmx__frame { margin-top: clamp(32px, 4vw, 52px); }

/* =========================================================
   Film dialogs — fit the whole dialog (close, video, controls,
   chapters, note) inside the visible viewport. --chrome is the
   measured height of everything except the video (set in JS).
   ========================================================= */
.filmdlg { --gut: max(12px, env(safe-area-inset-left)); --chrome: 190px;
  width: min(1180px, calc(100vw - var(--gut) * 2), max(280px, calc((100dvh - var(--chrome)) * 16 / 9)));
  max-width: none; max-height: calc(100dvh - 16px); margin: auto; padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.filmdlg::-webkit-scrollbar { display: none; }
.filmdlg__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.filmdlg__top .filmdlg__x { position: static; width: 44px; height: 44px; font-size: 26px; }
.filmdlg video { max-height: none; object-fit: contain; }
.filmdlg__fine { font-size: 13px; color: rgba(255,255,255,.6); }
.filmdlg__pp { width: 44px; height: 44px; margin-left: -8px; }
.filmdlg__mute { min-height: 36px; }
/* touch screens have no hover: keep the controls visible */
@media (hover: none) { .filmdlg__bar { opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.35)); } .filmdlg__play { inset: 0 0 60px; } }
@media (max-width: 640px) { .filmdlg { width: min(calc(100vw - 24px), max(280px, calc((100dvh - var(--chrome)) * 16 / 9))); } .filmdlg__mute { display: inline-flex; align-items: center; padding: 6px 10px; } .filmdlg__time { display: none; } .filmdlg__bar { gap: 10px; padding: 0 12px; } }
/* very short screens (landscape phones): give the height to the video; chapters return when there is room */
@media (max-height: 520px) {
  .filmdlg__chapters { display: none; }
  .filmdlg__top { margin-bottom: 4px; } .filmdlg__top .filmdlg__x { width: 40px; height: 40px; }
  .filmdlg__fine { margin-top: 6px; }
}