/* Phase B — cinematic experience. Legacy selectors remain available on other pages. */
body.vivid-cinema-home{background:transparent;color:#f5f7fa;overflow-x:hidden}
.vivid-home{position:relative;z-index:1;background:transparent}
.vivid-home{min-height:100dvh;background:#06070a}
.vivid-topbar{position:fixed;inset:0 0 auto;z-index:1000;padding:calc(12px + var(--vivid-safe-top,0px)) var(--vivid-page-gutter) 12px;transition:background .3s ease,backdrop-filter .3s ease}
.vivid-topbar.is-scrolled{background:rgba(7,8,11,.72);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.08)}
.vivid-nav{width:min(100%,1440px);margin:auto;display:flex;align-items:center;gap:18px;min-height:56px}
.vivid-brand{font-weight:800;letter-spacing:-.04em;font-size:1.2rem;white-space:nowrap}
.vivid-brand span{color:#aeb4bd}
.vivid-navlinks{display:flex;gap:4px;align-items:center}
.vivid-navlinks a{display:inline-flex;align-items:center;gap:7px}
.vivid-navlinks a i{font-size:.92rem;line-height:1}
.vivid-navlinks a,.vivid-nav-action{color:#b8bdc7;text-decoration:none;padding:10px 12px;border-radius:12px;font-size:.9rem;background:transparent;border:0;cursor:pointer}
.vivid-navlinks a:hover,.vivid-nav-action:hover,.vivid-navlinks a[aria-current=true]{color:#fff;background:rgba(255,255,255,.07)}
.vivid-nav-search{margin-left:auto;position:relative;width:min(28vw,300px)}
.vivid-nav-search input{width:100%;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;padding:0 16px 0 40px;outline:0}
.vivid-nav-search i{position:absolute;left:15px;top:12px;color:#9da3ad};
.vivid-kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#c8ccd3;margin-bottom:12px}
.vivid-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:20px 0;color:#d9dce1;font-size:.86rem}
.vivid-meta span{display:inline-flex;align-items:center;gap:5px}
.vivid-dot{width:3px;height:3px;border-radius:50%;background:#7f858f}
.vivid-actions{display:flex;gap:10px;flex-wrap:wrap}
.vivid-feature-strip{position:absolute;z-index:7;left:0;right:0;bottom:22px}
.vivid-feature-viewport{width:min(1440px,100%);margin:auto;padding:0 var(--vivid-page-gutter);overflow:hidden}
.vivid-feature-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 14px}
.vivid-feature-track::-webkit-scrollbar{display:none}
.vivid-feature-card{flex:0 0 clamp(150px,14vw,205px);height:112px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;position:relative;background:#101217;cursor:pointer;opacity:.68;transition:transform .25s ease,opacity .25s ease,border-color .25s ease}
.vivid-feature-card:hover,.vivid-feature-card.is-active{opacity:1;transform:translateY(-3px);border-color:rgba(255,255,255,.34)}
.vivid-feature-card img{width:100%;height:100%;object-fit:cover}
.vivid-feature-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 70%)}
.vivid-feature-card strong{position:absolute;z-index:2;left:11px;right:10px;bottom:9px;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vivid-section-wrap{width:min(1440px,100%);margin:auto;padding:0 var(--vivid-page-gutter)}
.vivid-rails{padding:18px 0 20px}
.vivid-rail-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}
.vivid-rail-head h2{font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin:0;color:#fff}
.vivid-rail-head p{margin:4px 0 0;color:#7f858f;font-size:.85rem}
.vivid-rail-controls{display:flex;gap:7px}
.vivid-rail-controls button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}
.vivid-rail{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 12px}
.vivid-rail::-webkit-scrollbar{display:none}
.vivid-card{position:relative;flex:0 0 clamp(142px,15vw,190px);scroll-snap-align:start;border-radius:16px;overflow:hidden;background:#101217;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .22s ease,border-color .22s ease}
.vivid-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.vivid-card-media{aspect-ratio:2/3;overflow:hidden;background:#0d0f12}
.vivid-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.vivid-card:hover img{transform:scale(1.035)}
.vivid-card-info{padding:10px 11px 12px}
.vivid-card-title{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vivid-card-sub{font-size:13px;font-weight:400;color:#8e8e93;margin-top:4px}
.vivid-rating{position:absolute;top:8px;right:8px;padding:5px 7px;border-radius:999px;background:rgba(5,6,8,.7);backdrop-filter:blur(12px);font-size:.68rem;color:#fff}
.vivid-loading{display:flex;gap:12px;overflow:hidden}
.vivid-skeleton-card{flex:0 0 clamp(142px,15vw,190px);aspect-ratio:2/3;border-radius:16px;background:linear-gradient(100deg,#101217 25%,#1a1d23 40%,#101217 60%);background-size:300% 100%;animation:vivid-home-shimmer 1.4s infinite}
@keyframes vivid-home-shimmer{to{background-position:-300% 0}}
.vivid-empty{padding:28px 0;color:#777e89}
.vivid-footer{margin-top:55px;border-top:1px solid rgba(255,255,255,.07);padding:30px var(--vivid-page-gutter);text-align:center;color:#6f7580;font-size:.78rem}
.vivid-search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 6px;color:#7e8590;font-size:.62rem;font-weight:700;letter-spacing:.14em}.vivid-search-head button{border:0;background:transparent;color:#aeb4bd;font:inherit;letter-spacing:normal;text-transform:none;cursor:pointer}.vivid-search-head button:hover{color:#fff}.vivid-search-recent{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:transparent;color:#e9ebef;text-align:left;cursor:pointer;font:inherit}.vivid-search-recent:hover,.vivid-search-recent:focus-visible{background:rgba(255,255,255,.07);outline:none}.vivid-search-recent i{color:#737b86}.vivid-search-panel{position:fixed;z-index:1200;top:78px;right:var(--vivid-page-gutter);width:min(420px,calc(100vw - 32px));max-height:65vh;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(12,14,18,.88);backdrop-filter:blur(24px);padding:8px;display:none}
.vivid-search-panel.is-open{display:block}
.vivid-search-result{display:flex;gap:10px;padding:8px;border-radius:12px;color:#fff;text-decoration:none}
.vivid-search-result:hover{background:rgba(255,255,255,.07)}
.vivid-search-result img{width:42px;height:60px;object-fit:cover;border-radius:7px}
.vivid-search-result small{color:#7e8590}
.vivid-mobile-nav{display:none}
@media(max-width:900px){
 .vivid-navlinks{display:none}.vivid-nav-search{width:auto;margin-left:auto}.vivid-nav-search input{width:42px;padding:0;font-size:0}.vivid-nav-search i{left:13px}.vivid-feature-card{flex-basis:145px;height:94px}
}
@media(max-width:640px){
 .vivid-topbar{padding:calc(8px + var(--vivid-safe-top,0px)) 12px 8px}.vivid-nav{min-height:50px}.vivid-brand{font-size:1.05rem}.vivid-nav-action{padding:9px}.vivid-meta{margin:12px 0}.vivid-feature-strip{bottom:7px}.vivid-feature-viewport{padding:0 16px}.vivid-feature-card{flex-basis:132px;height:86px}.vivid-section-wrap{padding:0 16px}.vivid-rails{padding:14px 0}.vivid-card{flex-basis:145px}.vivid-mobile-nav{position:fixed;display:flex;z-index:1100;left:12px;right:12px;bottom:12px;height:62px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(12,14,18,.76);backdrop-filter:blur(22px);justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom,0px)}.vivid-mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#7f858f;text-decoration:none;font-size:.65rem}.vivid-mobile-nav a.is-active{color:#fff}.vivid-mobile-nav i{font-size:1.15rem}.vivid-footer{padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){.vivid-card-media img, .vivid-feature-card, .vivid-card{transition:none}.vivid-rail{scroll-behavior:auto}.vivid-skeleton-card{animation:none}}

.vivid-rail-controls[hidden]{display:none}
.vivid-rails+.vivid-rails{border-top:1px solid rgba(255,255,255,.035)}
@media(min-width:1200px){
 .vivid-card{flex-basis:178px}
}
@media(max-width:640px){
 .vivid-rail{gap:10px;padding-right:24px}
 .vivid-rail::after{content:"";flex:0 0 1px}
 .vivid-rail-head{align-items:center}
 .vivid-rail-head p{display:none}
}

/* Mobile composition: give the hero its own media, content and carousel space. */
@media(max-width:640px){
  .vivid-feature-strip{
    position:absolute;
    z-index:7;
    left:0;
    right:0;
    bottom:7px;
    width:100%;
    padding:0 0 8px;
  }
  .vivid-feature-viewport{
    padding:0 16px;
  }
  .vivid-feature-track{
    padding:6px 2px 8px;
  }
  .vivid-feature-card{
    flex-basis:132px;
    height:86px;
  }
  .vivid-section-wrap{
    padding:0 16px;
  }
  .vivid-rails{
    padding:28px 0 4px;
  }
  .vivid-rails+.vivid-rails{
    margin-top:8px;
  }
  .vivid-rail-head{
    margin-bottom:12px;
  }
  .vivid-rail{
    padding-top:4px;
    padding-bottom:18px;
    gap:10px;
  }
  .vivid-card{
    flex-basis:145px;
  }
}
@media(max-width:380px){
  .vivid-card{flex-basis:138px}
}

.vivid-rail-see-all{color:#aeb4bd;text-decoration:none;font-size:.75rem;white-space:nowrap;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035)}
.vivid-rail-see-all:hover{color:#fff;background:rgba(255,255,255,.08)}
.vivid-rail-footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 4px}
.vivid-rail-load{min-height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);color:#c9cdd4;font:inherit;font-size:.75rem;cursor:pointer}
.vivid-rail-load:hover{background:rgba(255,255,255,.08);color:#fff}
.vivid-rail-load:disabled{opacity:.45;cursor:wait}
.vivid-card-progress{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;z-index:2}
.vivid-card-progress span{display:block;height:100%;background:#fff;border-radius:inherit}
.vivid-card:focus-visible,.vivid-feature-card:focus-visible,.vivid-rail-load:focus-visible,.vivid-rail-see-all:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:3px}
@media(max-width:640px){.vivid-rail-head{gap:10px}.vivid-rail-see-all{padding:6px 9px}.vivid-rail-footer{padding-bottom:8px}}


/* Phase I — final streaming UX pass.
   The hero remains one cinematic surface: trailer{
  position:relative;
  width:100%;
  height:min(78svh,820px);
  min-height:620px;
  overflow:hidden;
  background:#090a0d;
}
.vivid-feature-strip{
  position:relative;
  z-index:7;
  left:auto;
  right:auto;
  bottom:auto;
  width:min(1440px,100%);
  margin:auto;
  padding:0 var(--vivid-page-gutter) 30px;
  background:#06070a;
}
.vivid-card{
  isolation:isolate;
}
.vivid-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .22s ease;
}
.vivid-card:hover,
.vivid-card:focus-visible{
  transform:translateY(-6px) scale(1.015);
  z-index:4;
}
.vivid-card:hover::after,
.vivid-card:focus-visible::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.vivid-card:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:3px;
}
.vivid-card-signal{
  position:absolute;
  left:8px;
  top:8px;
  z-index:3;
  max-width:calc(100% - 64px);
  padding:5px 8px;
  border-radius:999px;
  background:rgba(5,6,8,.76);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#f1f3f5;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.01em;
}
.vivid-card-info{
  min-height:58px;
}
.vivid-card-sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:900px){
  .vivid-feature-strip{padding-left:24px;padding-right:24px}
}
@media(max-width:640px){
  .vivid-feature-strip{
    padding:0 16px 18px;
  }
  .vivid-card:hover,
  .vivid-card:focus-visible{
    transform:translateY(-3px);
  }
}
@media(prefers-reduced-motion:reduce){
  .vivid-card,.vivid-card::after,.vivid-card-media img,.vivid-feature-track{transition:none;transform:none!important}
}


/* Final placement: featured hero cards sit directly below the cinematic hero frame. */
.vivid-feature-strip{position:relative;z-index:7;width:min(1440px,100%);margin:0 auto;padding:14px var(--vivid-page-gutter) 28px;background:#06070a;pointer-events:auto}
.vivid-feature-viewport{width:100%;padding:0;overflow:hidden}
.vivid-feature-track{justify-content:flex-start;overflow-x:auto}
@media(max-width:640px){.vivid-feature-strip{padding:8px 16px 18px}.vivid-feature-track{justify-content:flex-start}}


/* Final responsive hero-card and mobile-scroll stability pass. */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
body.vivid-cinema-home{
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch;
}
.vivid-feature-strip, .vivid-section-wrap{
  max-width:100%;
}
.vivid-feature-track{
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-width:none;
}
.vivid-feature-card{
  flex:0 0 clamp(210px,18vw,270px);
  height:152px;
}
@media(max-width:900px){
  .vivid-feature-card{
    flex-basis:190px;
    height:107px;
  }
}
@media(max-width:640px){
  .vivid-feature-strip{
    padding:12px 16px 20px;
    overflow:hidden;
  }
  .vivid-feature-viewport{
    overflow:hidden;
  }
  .vivid-feature-track{
    gap:10px;
    padding:4px 1px 8px;
  }
  .vivid-feature-card{
    flex-basis:172px;
    height:97px;
    border-radius:14px;
  }
}


/* Desktop hover is owned by vivid-atmosphere.css. Keep only the hero-card scroll choreography here. */
@media (hover:hover) and (pointer:fine){
  .vivid-feature-track{
    padding-top:18px;
    padding-bottom:20px;
    transform:none;
    will-change:transform;
  }
}
@media (hover:none), (pointer:coarse){
  .vivid-feature-track{transform:none!important}
}


/* Bottom catalogue index — streaming-service style A–Z browsing. */
.vivid-alphabet{margin-top:20px;padding:34px 0 48px;border-top:1px solid rgba(255,255,255,.06)}
.vivid-alphabet-head h2{margin:5px 0 0;font-size:clamp(1.45rem,2.4vw,2rem);letter-spacing:-.035em}
.vivid-alphabet-head p{margin:6px 0 0;color:#858b95;font-size:.86rem}
.vivid-alphabet-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.vivid-alphabet-list button{min-width:38px;height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.035);color:#aeb4bd;font:600 .78rem/1 inherit;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.vivid-alphabet-list button:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
.vivid-alphabet-list button.is-active{color:#08090b;background:#fff;border-color:#fff}
.vivid-alphabet-status{min-height:20px;margin:16px 2px 4px;color:#777e89;font-size:.76rem}
.vivid-alphabet .vivid-rail{padding-top:14px}
@media(max-width:640px){.vivid-alphabet{padding:28px 0 34px}.vivid-alphabet-list{gap:6px;margin-top:18px}.vivid-alphabet-list button{min-width:36px;height:36px;padding:0 8px}}
.vivid-cinema-home .vivid-meta, .vivid-cinema-home .vivid-actions{
  animation:vividHeroContentIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.vivid-cinema-home .vivid-meta{animation-delay:35ms}
.vivid-cinema-home .vivid-actions{animation-delay:120ms}
@keyframes vividHeroContentIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
.vivid-cinema-home .vivid-feature-track{
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
}
.vivid-cinema-home .vivid-feature-card{
  scroll-snap-align:start;
}
.vivid-cinema-home .vivid-feature-card.is-active{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.36);
}
@media(prefers-reduced-motion:reduce){
  .vivid-cinema-home .vivid-meta, .vivid-cinema-home .vivid-actions{animation:none;transition:none}
  .vivid-cinema-home .vivid-feature-track{scroll-behavior:auto;scroll-snap-type:none}
}


/* Stability correction: catalogue cards stay planted while the page scrolls. */
.vivid-rail{
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scroll-snap-type:none;
}
.vivid-card{
  transform:none;
  will-change:auto;
}
.vivid-card:hover{
  transform:translateY(-3px);
}
@media (hover:hover) and (pointer:fine){
  .vivid-rail{
    padding-top:14px;
    padding-bottom:18px;
  }
  .vivid-card{
    transform:none;
  }
  .vivid-card:hover,
  .vivid-card:focus-visible{
    transform:translateY(-8px) scale(1.045);
  }
}
@media (max-width:640px){
  .vivid-rail{
    padding-top:2px;
    padding-bottom:10px;
    touch-action:pan-x pan-y;
    scroll-snap-type:none;
  }
  .vivid-rails{
    padding-top:18px;
    padding-bottom:2px;
  }
  .vivid-card{
    transform:none!important;
  }
}


/* Global catalogue discovery: curated entry points stay lightweight on home. */
.vivid-catalogue-explore{
  width:min(1440px,100%);
  margin:0 auto;
  padding:18px var(--vivid-page-gutter) 10px;
}
.vivid-catalogue-explore-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.vivid-catalogue-explore-head>div>span{
  color:#858c97;
  font-size:.68rem;
  letter-spacing:.16em;
}
.vivid-catalogue-explore-head h2{
  margin:6px 0 6px;
  font-size:clamp(1.35rem,2.5vw,2rem);
  letter-spacing:-.035em;
}
.vivid-catalogue-explore-head p{
  margin:0;
  color:#777e89;
  font-size:.84rem;
}
.vivid-catalogue-explore-head>a{
  flex:0 0 auto;
  color:#c5cad2;
  text-decoration:none;
  font-size:.76rem;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}
.vivid-catalogue-explore-head>a:hover{color:#fff;background:rgba(255,255,255,.08)}
.vivid-catalogue-chips{
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:2px 2px 9px;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.vivid-catalogue-chips::-webkit-scrollbar{display:none}
.vivid-catalogue-chips a{
  flex:0 0 auto;
  color:#b8bec7;
  text-decoration:none;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  font-size:.76rem;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.vivid-catalogue-chips a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-2px);
}
@media(max-width:640px){
  .vivid-catalogue-explore{padding:12px 16px 4px}
  .vivid-catalogue-explore-head{align-items:start;flex-direction:column;gap:12px}
  .vivid-catalogue-explore-head>a{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .vivid-catalogue-chips a{transition:none}
}

.vivid-explore-section .vivid-section-heading>p{margin:7px 0 0;color:var(--vivid-text-subtle);font-size:.82rem}.vivid-explore-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.vivid-explore-link{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.045);color:#e8ebef;text-decoration:none;font-size:.82rem;font-weight:600;transition:transform .18s ease,background .18s ease,border-color .18s ease}.vivid-explore-link i{font-size:.75rem;color:#8e96a2}.vivid-explore-link:hover,.vivid-explore-link:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);outline:none}@media(max-width:640px){.vivid-explore-links{gap:8px}.vivid-explore-link{min-height:40px;padding-inline:13px;font-size:.78rem}}

.vivid-tonight{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:28px;align-items:center;margin:0 auto 34px;padding:30px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(115deg,rgba(255,255,255,.065),rgba(255,255,255,.025));overflow:hidden}.vivid-tonight-copy h2{margin:7px 0 8px;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em}.vivid-tonight-copy p{max-width:620px;margin:0;color:rgba(255,255,255,.64);line-height:1.6}.vivid-tonight-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.vivid-tonight-actions a,.vivid-tonight-actions button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:#fff;font:inherit;font-size:.82rem;font-weight:650;text-decoration:none;cursor:pointer}.vivid-tonight-actions .vivid-tonight-primary{display:inline-flex;align-items:center;background:#fff;color:#08090b;border-color:#fff}.vivid-tonight-poster{justify-self:end;width:180px;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 20px 55px rgba(0,0,0,.35)}.vivid-tonight-poster img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:640px){.vivid-tonight{grid-template-columns:minmax(0,1fr) 105px;gap:16px;padding:20px;border-radius:20px}.vivid-tonight-poster{width:105px}.vivid-tonight-actions{gap:7px}.vivid-tonight-actions a,.vivid-tonight-actions button{min-height:36px;padding-inline:12px;font-size:.76rem}}
.vivid-tonight-inline{border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:20px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));overflow:hidden}
.vivid-section-kicker{display:block;color:rgba(255,255,255,.42);font-size:.65rem;font-weight:800;letter-spacing:.14em;margin-bottom:5px}
.vivid-tonight-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.vivid-tonight-card{display:flex;justify-content:flex-end;margin-top:-20px;pointer-events:none}
.vivid-tonight-card img{width:120px;aspect-ratio:2/3;object-fit:cover;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
@media(max-width:640px){.vivid-tonight-inline{padding:16px}.vivid-tonight-card{margin-top:12px;justify-content:flex-start}.vivid-tonight-card img{width:92px}.vivid-tonight-actions{justify-content:flex-start}}

/* First-entry taste gate: keep the catalogue hidden until Vivid has offered personalization. */
body.vivid-onboarding-active > *:not(.vivid-onboarding-modal){visibility:hidden!important}
body.vivid-onboarding-active{overflow:hidden;background:#06070a!important}
.vivid-onboarding-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0,rgba(120,140,255,.14),transparent 42%),rgba(4,5,8,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:auto}
.vivid-onboarding-dialog{width:min(940px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:rgba(13,15,20,.9);box-shadow:0 30px 100px rgba(0,0,0,.55)}
.vivid-onboarding-head{display:flex;gap:20px;align-items:flex-start}.vivid-onboarding-head>div{min-width:0}.vivid-onboarding-head span{font-size:.66rem;letter-spacing:.2em;color:#8e96a4}.vivid-onboarding-head h2{margin:7px 0 8px;font-size:clamp(1.7rem,4vw,2.7rem);letter-spacing:-.045em}.vivid-onboarding-head p{margin:0;color:#8e96a4;line-height:1.5}.vivid-onboarding-close{margin-left:auto;flex:0 0 auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;cursor:pointer}.vivid-onboarding-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}.vivid-onboarding-card{position:relative;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;background:#101217;color:#fff;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.vivid-onboarding-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}.vivid-onboarding-card span{display:block;padding:9px 10px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vivid-onboarding-card.is-selected{border-color:rgba(255,255,255,.8);transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.35)}.vivid-onboarding-card.is-selected::after{content:"✓";position:absolute;top:9px;right:9px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#08090b;font-weight:800}.vivid-onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.vivid-onboarding-actions small{color:#777f8b}.vivid-onboarding-actions>div{display:flex;gap:9px}.vivid-onboarding-actions .vivid-button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:700px){.vivid-onboarding-dialog{padding:18px;border-radius:22px}.vivid-onboarding-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0}.vivid-onboarding-card span{padding:7px 8px;font-size:.68rem}.vivid-onboarding-actions{position:sticky;bottom:-18px;margin:0 -18px -18px;padding:14px 18px;background:rgba(13,15,20,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
@media(max-width:420px){.vivid-onboarding-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vivid-onboarding-head h2{font-size:1.7rem}.vivid-onboarding-actions{align-items:center}.vivid-onboarding-actions>div{flex:1}.vivid-onboarding-actions .vivid-button{flex:1}}


/* Tonight's Pick — desktop composition pass.
   Keep the recommendation as one deliberate module: copy/actions on the left,
   the selected title artwork on the right. */
.vivid-tonight-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  grid-template-areas:"copy poster";
  align-items:stretch;
  gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3vw,40px) 0;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.vivid-tonight-inline .vivid-rail-head{
  grid-area:copy;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  margin:0;
  min-width:0;
}
.vivid-tonight-inline .vivid-rail-head > div:first-child{max-width:680px}
.vivid-tonight-inline .vivid-section-kicker{
  display:block;
  margin-bottom:9px;
  color:#8f96a0;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.2;
}
.vivid-tonight-inline .vivid-rail-head h2{
  margin:0;
  max-width:100%;
  font-size:clamp(1.8rem,3.2vw,3.15rem);
  line-height:1;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.vivid-tonight-inline .vivid-rail-head p{
  margin:12px 0 0;
  max-width:52ch;
  color:#9299a4!important;
  font-size:.9rem!important;
  line-height:1.55;
}
.vivid-tonight-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:22px;
}
.vivid-tonight-actions .vivid-rail-see-all{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
}
.vivid-tonight-actions #tonight-watch{
  background:#fff!important;
  border-color:#fff!important;
  color:#08090b!important;
  font-weight:700;
}
.vivid-tonight-card{
  grid-area:poster;
  width:100%;
  aspect-ratio:2/3;
  max-height:360px;
  justify-self:end;
  align-self:center;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:#101217;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.vivid-tonight-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:760px){
  .vivid-tonight-inline{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "poster";
    gap:18px;
    padding:24px 0 20px;
  }
  .vivid-tonight-inline .vivid-rail-head h2{font-size:clamp(1.7rem,9vw,2.35rem)}
  .vivid-tonight-actions{margin-top:18px}
  .vivid-tonight-card{
    width:min(100%,220px);
    max-height:none;
    justify-self:start;
  }
}
.vivid-meta{
  margin:14px 0;
  gap:7px;
}
.vivid-actions{gap:8px}
.vivid-feature-strip{padding-top:8px;padding-bottom:20px}
.vivid-feature-card{
  flex-basis:clamp(170px,16vw,220px);
  height:124px;
}
@media(max-width:900px){
  .vivid-feature-card{flex-basis:180px;height:102px}
}
@media(max-width:640px){
  .vivid-meta{margin:9px 0}
  .vivid-feature-strip{padding:8px 12px 14px}
  .vivid-feature-card{flex-basis:150px;height:86px}
}