/* Shared signed-out gate centering — every app page reads like messenger:
   eyebrow line → visual card → CTAs, all in a single centered column.
   Only affects the signed-out gate/hero, not the signed-in app content. */
#gate, .hero, .gate, .page-head { text-align: center }
/* Some heroes use flex-row with the LIVE badge on the right — convert
   them to a centered column while the guest view is up. */
html.cw-guest .hero { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important }
/* Eyebrow, badges, and CTA rows are flex containers — center their children. */
#gate .eyebrow, .hero .eyebrow, .gate .eyebrow, .page-head .eyebrow,
#gate .ctas, .hero .ctas, .gate .ctas, .page-head .ctas { justify-content: center }
/* Any icon inside a gate eyebrow is decoration — cap it so an unstyled SVG
   doesn't blow up to page width (Stream's play icon was rendering ~500px). */
#gate .eyebrow svg, .hero .eyebrow svg, .gate .eyebrow svg, .page-head .eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto }
/* The signed-out gate leads straight with its visual card — no eyebrow, no
   LIVE badge. The Apps pill (fixed, top:64px, ~34px tall) is the only chrome
   above it, so the gate's first child must clear ~100px from the viewport top.
   Per-page top spacing is set on each page (they differ), not blanket-set here
   — a global value would SHRINK the pages that already reserve more room. */
/* Center large visual cards used to introduce the app. */
.demo-canvas, .demo-sec, .mgr-demo, .hero-tile, .apptile { margin-left: auto; margin-right: auto }
#gate .apptile, .hero .apptile, .gate .apptile, .page-head .apptile { margin-left: auto; margin-right: auto }