.course-preview-trigger{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:100%;border:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.65));color:#fff;font:600 .9rem var(--font-body);cursor:pointer;z-index:3}
.course-preview-trigger .preview-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:22px;box-shadow:0 3px 24px #0008}
.course-preview-trigger:hover .preview-icon{background:var(--accent-hover);transform:scale(1.06)}
.course-preview-trigger:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.course-thumb .course-duration{z-index:4;pointer-events:none}
.preview-open{overflow:hidden!important}
.sticky-buy[hidden]{display:none!important}
/* Scroll-entry transforms must not create horizontal scrolling on phones. */
@media(max-width:767px){.problem{overflow-x:clip}.hero-actions{align-items:stretch}.hero-actions>*{justify-content:center}}
.preview-dialog{width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:1px solid var(--border-accent);border-radius:14px;background:var(--bg-card);color:var(--text);overflow:auto;overscroll-behavior:contain}
.preview-dialog::backdrop{background:rgba(0,0,0,.86)}
.preview-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.preview-dialog h2{font:600 clamp(1.2rem,4vw,1.7rem) var(--font-display);line-height:1.25}
.preview-dialog .preview-note{margin:6px 0 0;color:var(--text-muted);font-size:.9rem}
.preview-close{flex-shrink:0;border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);background:transparent;font:500 .9rem var(--font-body);cursor:pointer}
.preview-close:hover,.preview-close:focus-visible{border-color:var(--accent)}
.preview-dialog video{display:block;width:100%;max-height:64dvh;aspect-ratio:4/3;object-fit:contain;background:#000;border-radius:8px}
.preview-dialog [data-preview-error]{margin-top:12px;color:#ffd59b}
.preview-dialog footer{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--text-muted)}
.preview-dialog footer a{color:var(--accent);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.course-preview-trigger:hover .preview-icon{transform:none}}