/* Final typography layer shared by both pages. Sizes are defined by role. */
:root {
  --type-caption: 12px;
  --type-label: 13px;
  --type-body: 14px;
  --type-intro: 18px;
  --type-card: 20px;
  --type-subheading: 24px;
  --type-section: 36px;
  --type-hero: 56px;
}
.cinema { font-size: var(--type-body); }
.cinema .cinema-hero h1, .cinema .policy-heading h1 {
  font-size: var(--type-hero); line-height: 1.15; letter-spacing: -.035em;
}
.cinema .hero-video-heading h2,
.cinema .season-lead.compact h2,
.cinema .cinema-custom h2 {
  font-size: var(--type-section); line-height: 1.2; letter-spacing: -.025em;
}
.cinema .cinema-benefits h3 { font-size: var(--type-card); line-height: 1.35; }
.cinema dialog h2, .cinema #cinema-video-dialog h2,
.cinema .policy-document h2, .cinema .video-coming strong {
  font-size: var(--type-subheading); line-height: 1.3; letter-spacing: -.02em;
}
.cinema .cinema-hero > .cinema-hero-subtitle { font-size: var(--type-intro); line-height: 1.65; }
.cinema p, .cinema nav, .cinema .cinema-hero > .cinema-site-note,
.cinema .hero-video-heading p, .cinema .compact-top > p,
.cinema .cinema-benefits p, .cinema .cinema-custom p,
.cinema .custom-pill-grid span, .cinema .modal-selection,
.cinema .modal-copy, .cinema .modal-placeholder p,
.cinema .video-coming p, .cinema .video-dialog-bottom p,
.cinema .video-dialog-bottom p span, .cinema .lead-form-result,
.cinema .policy-document { font-size: var(--type-body); line-height: 1.7; }
.cinema .cta, .cinema .cta.small, .cinema .compact .lead-submit,
.cinema .cinema-custom-right .cta, .cinema .hero-screen-play,
.cinema .modal-placeholder strong, .cinema .policy-back { font-size: var(--type-body); line-height: 1.5; }
.cinema .compact .lead-field input, .cinema .compact .lead-field select,
.cinema .compact .lead-comment textarea { font-size: var(--type-body); line-height: 1.6; }
.cinema .compact .lead-field label, .cinema .compact .lead-comment label {
  font-size: var(--type-label); line-height: 1.5;
}
.cinema .eyebrow, .cinema .season-lead .eyebrow, .cinema .cinema-season,
.cinema .modal-kicker, .cinema .cinema-screen .screen-label {
  font-size: var(--type-caption); line-height: 1.5; letter-spacing: .08em;
}
.cinema .hero-watch, .cinema .hero-watch > span,
.cinema .compact .city-note, .cinema .lead-error,
.cinema .compact .lead-consent label, .cinema .compact .lead-demo-note,
.cinema .lead-comment label span, .cinema footer, .cinema .footer-policy {
  font-size: var(--type-caption); line-height: 1.6;
}
.cinema .hero-watch { flex-wrap: wrap; gap: 4px 12px; }
.cinema .hero-watch > span { letter-spacing: .04em; }
/* The wordmark is artwork; its compact subtitle retains the brand proportions. */
@media (max-width: 800px) {
  :root { --type-hero: 36px; --type-section: 28px; --type-subheading: 24px; --type-intro: 16px; }
  .cinema .eyebrow, .cinema .season-lead .eyebrow,
  .cinema .cinema-season, .cinema .cinema-screen .screen-label { letter-spacing: .04em; }
  .cinema .cta.small { gap: 6px; padding: 9px; }
  .cinema .hero-watch { bottom: 16px; }
}
@media (max-width: 360px) {
  .cinema header { gap: 12px; flex-wrap: wrap; height: auto; min-height: 80px; padding: 14px 0; }
}
/* Keep the placeholder icon circular when the caption wraps on a phone. */
.cinema .video-coming-icon { flex-shrink: 0; }
@media (max-width: 800px) {
  .cinema .video-dialog-stage { width: 100%; min-height: 280px; aspect-ratio: auto; }
}