/* The original page remains the no-JS / failed-bootstrap fallback. */
html[data-esser-vsl-mode] main > .hero { display: none !important; }
html[data-esser-vsl-mode="gated"]:not([data-esser-vsl-unlocked]) main > :not(.esser-vsl),
html[data-esser-vsl-mode="gated"]:not([data-esser-vsl-unlocked]) .site-header .button,
html[data-esser-vsl-mode="gated"]:not([data-esser-vsl-unlocked]) [data-sticky-cta] { display: none !important; }
html[data-esser-vsl-mode] .esser-vsl:not([hidden]) { display: grid; }
.esser-vsl { gap: 1rem; padding: clamp(1.5rem,4vw,3.5rem) var(--grid-gutter); background: var(--forest-800); }
.esser-vsl > * { width: 100%; max-width: 60rem; margin-inline: auto; }
.esser-vsl__intro { text-align: center; }
.esser-vsl h1 { font-family: var(--font-display); font-size: clamp(2.25rem,6vw,4.5rem); line-height: 1; margin: .5rem 0 1rem; text-transform: uppercase; overflow-wrap: anywhere; }
.esser-vsl__frame { position: relative; aspect-ratio: 16/9; min-height: 200px; background: var(--ink-950); overflow: hidden; border: 1px solid var(--hairline-dark); }
.esser-vsl__poster, .esser-vsl__mount { position: absolute; inset: 0; }
.esser-vsl__poster { display: grid; place-items: center; color: var(--gold-500); padding: 1rem; text-align: center; }
.esser-vsl__poster img { width: 100%; height: 100%; object-fit: cover; }
.esser-vsl__mount iframe, .esser-vsl__mount video, .esser-vsl__mount > div { width: 100%; height: 100%; border: 0; display: block; }
.esser-vsl__mount video { object-fit: contain; }
.esser-vsl__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.esser-vsl__control { min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--hairline-dark); color: var(--paper-100); background: var(--forest-700); font: inherit; cursor: pointer; }
.esser-vsl button:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.esser-vsl button:disabled { opacity: .6; cursor: wait; }
.esser-vsl__time { margin-inline-start: auto; width: auto; font-variant-numeric: tabular-nums; font-size: .85rem; }
.esser-vsl__progress { height: 5px; accent-color: var(--gold-500); pointer-events: none; }
.esser-vsl__status, .esser-vsl__gate { font-size: .9rem; color: var(--paper-200); margin-block: 0; }
.esser-vsl [data-vsl-continue] { width: fit-content; margin-inline: auto; justify-content: center; }
@media (max-width: 767px) { .esser-vsl [data-vsl-continue] { width: 100%; } }
.esser-vsl [hidden] { display: none !important; }
.esser-vsl:fullscreen { display: flex !important; flex-direction: column; overflow: auto; padding: 1rem; }
.esser-vsl:fullscreen .esser-vsl__intro, .esser-vsl:fullscreen [data-vsl-continue] { display: none; }
.esser-vsl:fullscreen .esser-vsl__frame { flex: 1 1 auto; min-height: 200px; aspect-ratio: auto; }
.esser-vsl-preview { position: fixed; inset: auto 1rem 1rem auto; z-index: 99999; background: var(--gold-500); color: var(--ink-950); padding: .6rem; font-size: .8rem; }
@media (max-width: 480px) { .esser-vsl__controls > [data-vsl-play] { width: 100%; } }
/* Reference-inspired presentation. Engine, A/B and gate remain independent. */
.esser-vsl[data-vsl-ui="immersive"] > * { max-width: 72rem; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__frame { border: 0; border-radius: 12px; isolation: isolate; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__poster { padding: 0; }
.esser-vsl[data-vsl-ui="immersive"][data-vsl-source="youtube"] iframe { position: absolute; top: -11%; height: 122%; }
.esser-vsl__tap { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--paper-100); cursor: pointer; font-size: 0; }
.esser-vsl__tap::before { content: '▶'; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(56px,6vw,76px); aspect-ratio: 1; border: 2px solid var(--paper-100); border-radius: 50%; background: oklch(12% .015 150 / .5); font: 28px/1 sans-serif; text-indent: 4px; }
.esser-vsl__tap::after { content: attr(data-caption); position: absolute; left: 50%; bottom: 14%; translate: -50% 0; max-width: calc(100% - 32px); width: max-content; border-radius: 999px; background: oklch(12% .015 150 / .9); padding: .65rem 1rem; color: var(--paper-100); font: 600 clamp(.8rem,2vw,.95rem)/1.2 var(--font-body); }
.esser-vsl__tap:not([data-caption])::after, .esser-vsl__tap[data-caption=""]::after { display: none; }
.esser-vsl[data-vsl-state="paused"] .esser-vsl__tap,
.esser-vsl[data-vsl-state="ended"] .esser-vsl__tap { background: oklch(8% .01 150 / .72); }
.esser-vsl[data-vsl-state="muted"] .esser-vsl__tap::before,
.esser-vsl[data-vsl-state="playing"] .esser-vsl__tap::before { display: none; }
.esser-vsl[data-vsl-state="playing"] .esser-vsl__tap:focus-visible::before { display: grid; content: 'Ⅱ'; text-indent: 0; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__tap:focus-visible { outline-offset: -4px; }
.esser-vsl[data-vsl-state="loading"] .esser-vsl__tap::before { display: none; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__controls { position: absolute; inset: auto 8px 7px; z-index: 3; width: auto; pointer-events: none; gap: 4px; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__control { pointer-events: auto; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 5px; background: oklch(12% .015 150 / .85); font-size: .75rem; }
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-mute], .esser-vsl[data-vsl-ui="immersive"] [data-vsl-fullscreen] { font-size: 0; }
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-mute]::before,
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-fullscreen]::before { content: ''; display: block; width: 24px; height: 24px; background: currentColor; mask: var(--vsl-icon) center/contain no-repeat; }
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-mute] { --vsl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8a6 6 0 010 8m3-11a10 10 0 010 14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-mute][data-muted="true"] { --vsl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6m0-6l-6 6' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.esser-vsl[data-vsl-ui="immersive"] [data-vsl-fullscreen] { --vsl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H3v6m12-6h6v6M3 15v6h6m12-6v6h-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.esser-vsl[data-vsl-state="muted"] .esser-vsl__tap::after { content: '🔊 ' attr(data-caption); }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__time { color: var(--paper-100); background: oklch(12% .015 150 / .85); border-radius: 3px; padding: 3px 5px; font-size: .7rem; align-self: flex-end; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__time:empty { display: none; }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__progress { position: absolute; z-index: 4; inset: auto 0 0; width: 100%; height: 5px; margin: 0; appearance: none; border: 0; background: oklch(40% .01 150); }
.esser-vsl[data-vsl-ui="immersive"] progress::-webkit-progress-bar { background: oklch(40% .01 150); }
.esser-vsl[data-vsl-ui="immersive"] progress::-webkit-progress-value { background: var(--gold-500); }
.esser-vsl[data-vsl-ui="immersive"] progress::-moz-progress-bar { background: var(--gold-500); }
.esser-vsl[data-vsl-ui="immersive"] .esser-vsl__gate,
.esser-vsl[data-vsl-ui="immersive"]:not([data-vsl-state="error"]) .esser-vsl__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) {
  .esser-vsl[data-vsl-ui="immersive"][data-vsl-state="playing"] .esser-vsl__control { opacity: 0; }
  .esser-vsl[data-vsl-ui="immersive"] .esser-vsl__frame:hover .esser-vsl__control,
  .esser-vsl[data-vsl-ui="immersive"] .esser-vsl__frame:focus-within .esser-vsl__control { opacity: 1; }
}
@media (max-width: 480px) { .esser-vsl[data-vsl-ui="immersive"] .esser-vsl__frame { border-radius: 8px; } }
@media print { html[data-esser-vsl-mode] main > :not(.esser-vsl) { display: block !important; } .esser-vsl { display: none !important; } }