/* Ordinary document flow is the shared Home fallback. Evidence follows its act
   in the HTML; no visual reordering or JavaScript is needed to read the film. */
.home-film { min-height: auto; }
.home-cinematic .site-header { position: relative; inset: auto; background: var(--film); }
.home-film .home-film__stage { position: relative; display: block; height: auto; min-height: 0; overflow: visible; padding: 52px var(--page-gutter) 64px; }
.home-film .home-film__acts { display: block; position: relative; inset: auto; width: 100%; }
.home-film .home-film__acts > li { display: block; position: relative; inset: auto; padding: 0; margin: 0 auto 88px; }
.home-film .home-film__acts > li:last-child { margin-bottom: 40px; }
.home-film .act-copy,
.home-film[data-scene] .act-copy { position: relative; inset: auto; width: min(680px, 100%); margin: 0 auto 36px; visibility: visible; opacity: 1; transform: none; }
.home-film .act-copy h1,
.home-film .act-copy h2 { font-size: clamp(34px, 7vw, 52px); line-height: 1.08; }
html[lang="vi"] .home-film__acts h1,
html[lang="vi"] .home-film__acts h2 { font-size: clamp(32px, 7vw, 48px); line-height: 1.2; }
.home-film .film-lead { font-size: 17px; line-height: 1.6; }
.home-film .film-actions { gap: 12px; }
.home-film .film-actions .button { min-height: 48px; padding: 12px 20px; font-size: 15px; }
.home-film .film-evidence { position: relative; inset: auto; display: grid; gap: 32px; width: 100%; height: auto; transform: none; perspective: none; }
.home-film [data-product] { position: relative; inset: auto; width: min(310px, 100%); height: auto; margin: 0 auto; opacity: 1; filter: none; transform: none; perspective: none; }
.home-film .scan-frame__device { height: auto; transform: none; padding: 8px; border-radius: 38px; box-shadow: none; }
.home-film [data-product] img { height: auto; object-fit: contain; }
.home-film .scan-frame__device img { border-radius: 28px; }
.home-film .scan-frame figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }
.home-film .contact-frame { padding: 8px 8px 38px; }
.home-film .workspace-frame { width: min(860px, 100%); height: auto; padding: 8px 8px 38px; }
.home-film .workspace-frame img { aspect-ratio: 1; }
.home-film .stage-texture,
.home-film .stage-code { display: none; }
.home-film .capture-disclaimer { position: static; margin: 0 auto; width: min(680px, 100%); font-size: 12px; }
.home-film .film-sequence { position: static; width: min(680px, 100%); margin: 24px auto; }
@media (prefers-reduced-motion: reduce) {
  .home-cinematic *, .home-cinematic *::before, .home-cinematic *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Mobile is readable by default. Its page stylesheet enhances this semantic
   sequence only after the shared scroll runtime has supplied its progress. */
.mobile-film { min-height: auto; }
.mobile-film__stage { position: relative; padding: 64px var(--page-gutter) 72px; }
.mobile-film__acts { margin: 0; padding: 0; list-style: none; }
.mobile-film__acts > li { position: relative; margin: 0 auto 96px; scroll-margin-top: 32px; }
.mobile-film__acts > li:last-child { margin-bottom: 40px; }
.mobile-act-copy, .mobile-beat-copy { max-width: 640px; margin: 0 auto 32px; }
.mobile-memory__beat { margin-top: 56px; scroll-margin-top: 32px; }
.mobile-film .mobile-screen { position: relative; width: min(310px, 100%); margin: 0 auto; }
.mobile-film__device { display: none; }
.mobile-film__note { max-width: 640px; margin: 32px auto 0; }

/* Business keeps each act beside its evidence in the document. The wide relay
   is conditional; small, reduced-motion and failed-runtime visits read here. */
.business-film { min-height: auto; }
.business-film__stage { position: relative; padding: 56px var(--page-gutter) 64px; }
.business-film__acts { margin: 0; padding: 0; list-style: none; }
.business-film__acts > li { position: relative; margin: 0 auto 88px; scroll-margin-top: 32px; }
.business-film__acts > li:last-child { margin-bottom: 40px; }
.business-act-copy { max-width: 760px; margin: 0 auto 36px; }
.business-capture { display: grid; grid-template-columns: minmax(150px, 280px) minmax(0, 300px); align-items: center; gap: 36px; width: fit-content; max-width: 100%; margin: 0 auto; }
.business-film__relay { display: grid; gap: 48px; max-width: 860px; margin: 0 auto; }
.business-workspace, .business-usage { margin: 0; }
.business-usage { width: min(650px, 100%); }
.business-film__note { max-width: 760px; margin: 0 auto; }
@media (max-width: 800px) {
  .business-capture { display: block; width: min(290px, 100%); }
  .business-capture figcaption { margin-top: 24px; }
}