:root { --purple: var(--brand-purple); color: var(--brand-ink); background: var(--brand-ivory); }
.brand, .brand b { font-family: Outfit, sans-serif; font-weight: 600; }
.brand { color: var(--brand-ink); white-space: nowrap; }
.brand b { color: var(--brand-purple); }
.nav .brand-logo { width: 64px; height: 64px; }
.footer .brand-logo { width: 40px; height: 40px; }
.film-stage svg { font-family: "DM Sans", sans-serif; }
.motion-brand, .motion-heading, .scene-title { font-family: Outfit, sans-serif; }
.button, .primary { background: var(--brand-purple); }
.hero.download-hero { position: relative; display: block; padding: 42px 240px 42px 42px; background: var(--brand-purple); }
.download-brand-art { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); display: block; }
.download-brand-art img { display: block; width: 184px; height: 184px; object-fit: contain; }
.download-footer-brand { display: inline-flex; gap: 10px; align-items: center; color: var(--brand-ink); text-decoration: none; }
.download-footer-brand img { object-fit: contain; }
footer:has(.download-footer-brand) { align-items: center; }
.dashboard-brand { display: inline-flex; align-items: center; gap: 9px; }
@media (max-width: 760px) {
  .nav .brand-logo { width: 48px; height: 48px; margin-right: 2px; }
  .nav .brand { font-size: 16px; gap: 4px; }
}
@media (max-width: 700px) {
  .hero.download-hero { padding: 28px 24px; }
  .download-brand-art { position: static; transform: none; width: 100px; margin: 0 0 18px; }
  .download-brand-art img { width: 100px; height: 100px; }
}