/* Muse Models — Website v2 Demo (card M1-2 Part 3). Page-scoped (`dm-` prefix). Values follow
   mockup v1.9 and the brand tokens in css/tokens.css. The player keeps the demo's 3360:1766 frame:
   1120 px wide on desktop (the full 1120 px container, into its side padding), 100% of the
   content width below that. */

/* top */
.dm-top{background:radial-gradient(900px 420px at 50% 0%,rgba(139,108,255,.14),transparent 70%)}
.dm-top-inner{padding-top:64px;padding-bottom:56px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.dm-top h1{font-size:clamp(2.3rem,5vw,3rem);line-height:1.08}
.dm-lead{color:var(--text-2);font-size:1.06rem;max-width:40em}
.dm-player{position:relative;align-self:stretch;margin-top:10px;aspect-ratio:3360/1766;background:#000;border-radius:16px;overflow:hidden;outline:1px solid rgba(139,108,255,.5);box-shadow:0 0 60px rgba(139,108,255,.16)}
.dm-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
@media(min-width:1176px){
  .dm-player{margin-left:-28px;margin-right:-28px}
}
/* AI-generated label: top centre of the frame, the strip the demo keeps clear in every scene
   (its own logo sits top-left and its progress dots top-right) */
.dm-ai{position:absolute;top:max(6px,1.6%);left:50%;transform:translateX(-50%);pointer-events:none;background:rgba(8,8,12,.7);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:10px;line-height:1.3;padding:3px 7px;border-radius:5px;opacity:.85}
@media(max-width:600px){ .dm-ai{font-size:9px;padding:2px 5px} }
.dm-note{margin-top:-6px;font-size:13px;color:var(--text-2)}
.dm-strip{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--text)}
.dm-strip li:not(.dm-arrow){border:1px solid rgba(139,108,255,.45);border-radius:999px;padding:5px 12px}
.dm-strip .dm-arrow{color:var(--violet-bright)}
.dm-strip .dm-loop{border-color:rgba(217,183,121,.55);color:var(--gold)}
.dm-top-inner .btn{margin-top:6px}

/* built by Muse Engine */
.dm-built-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
.dm-built-head h2{font-size:clamp(1.9rem,3.4vw,2.4rem);line-height:1.12}
.dm-sub{color:var(--text-2);font-size:1.06rem;max-width:38em}
.dm-quiet{font-size:14px;color:var(--text-2);transition:color .2s var(--ease)}
.dm-quiet:hover{color:var(--text);text-decoration:underline}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dm-chip{font-family:var(--font-body);font-size:14px;color:var(--text-2);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;min-height:36px;background:transparent;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
.dm-chip:hover{border-color:var(--violet);color:var(--text)}
.dm-chip[aria-pressed="true"]{color:var(--on-violet);background:var(--violet-bright);border-color:var(--violet-bright)}
.dm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px;max-width:900px}
.dm-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.dm-card[hidden]{display:none}
/* video tiles: portrait 9:16, cover, as the live .inf-video rule (#14 polish pass amendment 1); the
   grid keeps the live roster's 900 px width so three tiles sit at about the live size. The "Tap for
   sound" button keeps the live .inf-snd look (css/base.css) as a real button. */
.dm-media{position:relative;aspect-ratio:9/16;background:#000}
.dm-media video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.dm-media .inf-snd{font-family:inherit;line-height:inherit}
.dm-label{position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:10px;color:var(--gold);background:rgba(8,8,12,.8);padding:3px 7px;border-radius:5px}
.dm-card-body{padding:18px;display:flex;flex-direction:column;gap:4px}
.dm-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dm-name h2{font-size:1.2rem;letter-spacing:-0.01em}
.dm-tag{font-family:var(--font-mono);font-size:11px;color:var(--violet-bright)}
.dm-card p{font-size:.88rem;color:var(--text-2)}

/* bottom CTA */
.dm-bottom .cta-band{display:flex;flex-direction:column;align-items:center}
.dm-bottom .cta-band .dm-quiet{margin-top:16px}

@media(max-width:860px){
  .dm-top-inner{padding-top:48px;padding-bottom:44px}
}