/* Brief 406 — demo landing layout on top of portal-tokens.css */
.demo-landing { min-height: 100vh; background: var(--night); color: var(--ink); }
.demo-landing .wrap { max-width: 1100px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 80px; }
.demo-landing .nav { display: flex; align-items: center; padding: 8px 0 32px; }
.demo-landing .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-bright); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 20px; }
.demo-landing .brand img { width: 40px; height: 40px; }
.demo-landing h1 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 56px); color: var(--ink-bright); }
.demo-landing .lede { margin: 0 0 40px; max-width: 36rem; color: var(--ink-soft); }
.demo-landing .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.demo-landing .card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.demo-landing .card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.demo-landing .card h2 { margin: 16px 16px 8px; font-family: var(--display); font-size: 22px; color: var(--ink-bright); }
.demo-landing .card p { margin: 0 16px 16px; color: var(--ink-mute); flex: 1; }
.demo-landing .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 16px 20px !important; }
.demo-landing .empty { padding: 48px 0; }