html, body { margin: 0; padding: 0; background: #0c1712; }
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; box-sizing: border-box; }
a { color: #cfe0d6; text-decoration: none; }
a:hover { color: #8ee6ad; }

.teaser { position: relative; min-height: 100vh; background: #0c1712; color: #f4f2ec; font-family: 'Hanken Grotesk', sans-serif; overflow: hidden; }
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.shell { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 32px; min-height: 100vh; display: flex; flex-direction: column; }

.nav { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: #f4f2ec; }
.brand-mark { width: 10px; height: 10px; background: #f4f2ec; display: inline-block; }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }

.hero { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; padding: 16px 0 32px; }
.copy { flex: 1 1 360px; max-width: 480px; display: flex; flex-direction: column; gap: 22px; }
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; color: #8ee6ad; }
h1 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(38px, 4.6vw, 62px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: #f4f2ec; text-wrap: balance; }
.lede { margin: 0; font-size: 16px; line-height: 1.5; color: #a9c4b6; max-width: 440px; text-wrap: pretty; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.cta { display: inline-flex; align-items: center; gap: 12px; background: #f4f2ec; color: #0c1712; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; padding: 14px 22px; border-radius: 6px; letter-spacing: -0.01em; transition: box-shadow .3s, transform .3s; }
.cta:hover, .cta:focus-visible { box-shadow: 0 0 44px rgba(244, 242, 236, 0.3); transform: translateY(-1px); color: #0c1712; }
.cta-arrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.signin { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.16em; color: #6f8f80; }

.stage { flex: 1.7 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.stage-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: #6f8f80; }
.stage-place { display: flex; align-items: center; gap: 8px; }
.stage-place [data-ref=asset-wrap]:not([hidden]) { display: contents; }
.stage-city { color: #cfe0d6; }
.stage-sep { color: #4f6f60; }
.stage-asset { color: #f4f2ec; }
.stage-slot { height: clamp(320px, 56vh, 600px); }
.stage-status { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 24px; }
.phase { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: #8ee6ad; }
.status { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #f4f2ec; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; opacity: 0.5; transition: opacity .4s; }
.chip-group { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 4px; border: 1px solid rgba(207, 224, 214, 0.14); background: rgba(12, 23, 18, 0.5); color: #6f8f80; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; transition: all .3s; }
.chip-dot { width: 6px; height: 6px; background: rgba(207, 224, 214, 0.25); display: inline-block; }
.chip-out { display: inline-flex; align-items: center; gap: 6px; }
.chip-arrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #4f6f60; }

.footer { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0 28px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: #4f6f60; }

@media (max-width: 480px) { .shell { padding: 0 16px; } }

/* ---------- /watch (unlisted video page; reuses the landing classes above) ---------- */
.watch .shell { max-width: 1120px; }
.watch .nav { gap: 16px; }
.shared { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; color: #6f8f80; }
.shared-dot { width: 6px; height: 6px; background: #8ee6ad; display: inline-block; }
.watch-main { flex: 1; display: flex; flex-direction: column; gap: 28px; padding: 24px 0 40px; }
.watch-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.watch-title { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.watch h1 { font-size: clamp(34px, 4.4vw, 56px); }
.watch .lede { max-width: 380px; }
.frame { position: relative; padding: 10px; }
.corner { position: absolute; width: 22px; height: 22px; border: 0 solid #8ee6ad; }
.corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #08110d; border: 1px solid rgba(207, 224, 214, 0.12); border-radius: 4px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.player-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background-image: radial-gradient(rgba(207, 224, 214, 0.07) 1px, transparent 1px); background-size: 12px 12px; }
.player-fallback svg { display: block; }
.fallback-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: #cfe0d6; }
.watch-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px 22px; }
.watch .cta { padding: 13px 20px; min-height: 44px; }