/* API Factory film on /demos — muted inline loop, poster first, text alternative below. */
.demo-film { margin: 0 0 30px; padding: 0; overflow: hidden; }
.demo-film:hover { transform: none; }
.demo-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0f1115; }
.demo-film__body { padding: 22px 26px 24px; }
.demo-film__body h2 { font-size: 1.35rem; margin: 0 0 8px; }
.demo-film__body p { color: var(--slate); margin: 0 0 10px; font-size: 1rem; line-height: 1.55; }
.demo-film__note { font-size: .9rem !important; }
.demo-film details { margin-top: 6px; font-size: .95rem; color: var(--slate); }
.demo-film summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.demo-film ol { margin: 8px 0 0; padding-left: 1.3em; line-height: 1.55; }
@media (max-width: 600px) { .demo-film__body { padding: 18px 18px 20px; } }
.demo-film__claude { color: var(--ink) !important; }
.demo-film__cta { display: inline-block; margin: 4px 0 14px; font-weight: 600; }
.demo-film__src { margin: 10px 0 0 !important; font-size: .9rem !important; }
.demo-film__body h3 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--ink); }
.demo-film__list { margin: 0 0 12px; padding-left: 1.2em; color: var(--slate); line-height: 1.55; }
.demo-film__list li { margin: 0 0 5px; }
.demo-film__list strong { color: var(--ink); }
.demo-film__ask { color: var(--ink) !important; margin: 4px 0 4px !important; }
.demo-film summary { color: var(--link); padding: 4px 0; }
.demo-film summary:hover { text-decoration: underline; }
/* Phones: keep Home + Free resources visible on this page (the shared rule hides them at 480px and below). */
@media (max-width: 480px) { .nav-links--static a:not(.nav-cta) { display: inline-block; font-size: .85rem; padding: 6px 2px; } }
.auth-h1, .demo-film__body h2 { text-wrap: balance; }
/* Touch screens keep :hover after a tap; don't darken the film card's border then. */
@media (hover: none) { .demo-film.card--plain:hover { border-color: var(--line); } }
/* Safari: the shared header rule only sets the unprefixed blur. */
.site-header { -webkit-backdrop-filter: saturate(180%) blur(12px); }