/* A secondary film affordance within the existing creator visual. */
.creator-portrait[data-sp-sizzle] .by-spags { position: relative; }
.sp-sizzle-teaser { display: flex; align-items: center; gap: 10px; position: absolute; top: 252px; right: 12px; max-width: calc(100% - 24px); min-height: 52px; padding: 6px 12px 6px 6px; border: 1px solid #7eabc0; border-radius: 8px; background: #0b1b2ef5; box-shadow: 0 3px 12px #0005; color: #e6f6ff; font: 600 .8125rem/1.35 'DM Sans', sans-serif; cursor: pointer; text-align: left; }
.join-focused-hero .sp-sizzle-teaser { top: 162px; }
.marketing-composition .creator-portrait[data-sp-sizzle] .by-spags .sp-sizzle-teaser img { width: 54px; height: 36px; object-fit: cover; border: 0; border-radius: 4px; flex: none; }
.sp-sizzle-teaser span { display: grid; grid-template-columns: 14px auto; align-items: center; gap: 2px 6px; }
.sp-sizzle-teaser svg { width: 14px; height: 14px; fill: currentColor; }
.sp-sizzle-teaser small { grid-column: 2; color: #a8c6d9; font-size: .6875rem; font-weight: 400; }
.sp-sizzle-teaser:hover { background: #15334c; border-color: #c1e9fc; }
.sp-sizzle-teaser:focus-visible,.sp-sizzle-dialog :focus-visible,.sp-sizzle-fallback:focus-visible { outline: 3px solid #00aeef; outline-offset: 3px; }
.sp-sizzle-fallback { display: inline-flex; align-items: center; min-height: 44px; }
[data-sp-sizzle] [hidden] { display: none !important; }
.sp-sizzle-dialog { box-sizing: border-box; width: min(100% - 32px, 1024px); max-width: 1024px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #50687e; border-radius: 12px; background: #0c1727; color: #eef5fb; overflow: auto; font: 400 1rem/1.5 'DM Sans', sans-serif; }
.sp-sizzle-dialog::backdrop { background: #030a13dc; }
.sp-sizzle-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px 8px 20px; }
.marketing-composition .sp-sizzle-dialog h2 { margin: 0; font: 600 1.25rem/1.4 'Oswald', sans-serif; text-transform: none; letter-spacing: .02em; }
.sp-sizzle-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #d5e8f5; cursor: pointer; }
.sp-sizzle-close:hover { background: #24364b; }
.sp-sizzle-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-sizzle-screen { aspect-ratio: 16/9; width: 100%; background: #03070c; }
.sp-sizzle-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.marketing-composition .creator-portrait .sp-sizzle-message { margin: 0; color: #f4cd99; padding-inline: 20px; font-size: .875rem; }
.sp-sizzle-message:not(:empty) { padding-block: 12px; }
.sp-sizzle-retry { min-height: 44px; margin: 0 20px 8px; padding: 8px 14px; border: 1px solid #a1ccdf; border-radius: 6px; background: #163047; color: #e5f5ff; font: inherit; cursor: pointer; }
.sp-sizzle-dialog__footer { display: flex; align-items: start; justify-content: space-between; gap: 12px 24px; padding: 6px 20px 12px; font-size: .8125rem; }
.sp-sizzle-dialog__footer details { flex: 1; min-width: 0; }
.sp-sizzle-dialog__footer summary,.sp-sizzle-dialog__footer a { display: inline-flex; align-items: center; min-height: 44px; color: #b7e3f7; }
.sp-sizzle-dialog__footer summary { cursor: pointer; }
.marketing-composition .creator-portrait .sp-sizzle-dialog__footer p { margin: 6px 0 12px; max-width: 80ch; font-size: .875rem; line-height: 1.6; color: #c1d0df; }
.sp-sizzle-dialog__footer a { flex: none; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 801px) and (max-width: 1100px) { .sp-sizzle-teaser { top: 212px; } .join-focused-hero .sp-sizzle-teaser { top: 162px; } }
@media (max-width: 800px) {
 .sp-sizzle-credit { min-width: 0; }
 .sp-sizzle-teaser { position: static; margin-top: 8px; min-height: 44px; padding: 4px 8px 4px 4px; gap: 7px; max-width: 100%; box-shadow: none; font-size: .75rem; }
 .marketing-composition .creator-portrait[data-sp-sizzle] .by-spags .sp-sizzle-teaser img { width: 38px; height: 28px; }
 .sp-sizzle-teaser span { grid-template-columns: 12px auto; gap: 0 5px; }
 .sp-sizzle-teaser svg { width: 12px; height: 12px; }
 .sp-sizzle-teaser small { font-size: .625rem; }
 .sp-sizzle-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 10px; }
 .sp-sizzle-dialog__header { padding: 6px 6px 6px 14px; }
 .sp-sizzle-dialog__footer { padding-inline: 14px; flex-wrap: wrap; gap: 0 12px; }
 .sp-sizzle-dialog__footer details { flex-basis: 180px; }
}
@media (prefers-reduced-motion: reduce) { .sp-sizzle-teaser,.sp-sizzle-dialog { animation: none; transition: none; scroll-behavior: auto; } }