/* Scoped public host landing feature. No account or billing styles. */
.host-nav { gap: 23px; }
.host-nav .host-vs-nav { gap: 5px; }
.host-vs-nav::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #be644c; margin-top: -10px; }
.host-vs-announcement { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 9px 12px 9px 9px; min-height: 44px; border: 1px solid #e8d5ca; border-radius: 30px; background: #fffaf6; color: #573c2e; font-size: 11px; font-weight: 550; }
.host-vs-announcement img { width: 24px; height: 24px; }
.host-vs-announcement svg { width: 16px; height: 16px; }
.host-vs-announcement:hover { background: #fff0e6; }
.host-vs { position: relative; isolation: isolate; overflow: hidden; margin-block: 76px 0; border-radius: 32px; color: #f8f6f2; background: #0d0d10; border: 1px solid #282125; }
.host-vs::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 850px; height: 740px; right: -270px; top: -160px; background: radial-gradient(ellipse, #97584038, #5f377929 38%, transparent 67%); }
.host-vs-main { display: grid; grid-template-columns: 1fr 1.06fr; align-items: center; gap: 34px; padding: 54px 54px 38px; }
.host-vs-copy { position: relative; z-index: 2; }
.host-vs-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; }
.host-vs-brand > img { flex: none; width: 46px; height: 46px; }
.host-vs-brand > span:not(.host-vs-new) { font-size: 21px; font-weight: 650; letter-spacing: -.9px; }
.host-vs-brand small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 2.5px; font-weight: 500; color: #b4aaa7; }
.host-vs-new { align-self: flex-start; margin: 1px 0 0 5px; padding: 5px 8px; border: 1px solid #765942; border-radius: 20px; color: #f3bb8c; font-size: 9px; font-weight: 550; }
.host-vs h2 { font-size: clamp(38px, 4.3vw, 60px); font-weight: 580; letter-spacing: -.057em; line-height: 1.04; }
.host-vs h2 em { font-style: normal; color: #f3b99e; background: linear-gradient(110deg, #f7bc87, #fda491 48%, #d9a0eb); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.host-vs-lead { max-width: 410px; font-size: 15px; line-height: 1.8; color: #c4bfc4; margin-top: 24px; }
.host-vs-positioning { color: #d0ab96; font-size: 9px; letter-spacing: 1.2px; line-height: 1.7; margin: -8px 0 18px; max-width: 420px; }
.host-vs-expertise { max-width: 410px; border-left: 2px solid #d79e83; padding-left: 14px; margin-top: 24px; }
.host-vs-expertise strong { display: block; font-size: 12px; font-weight: 550; line-height: 1.6; color: #f0dfd4; }
.host-vs-expertise p { margin-top: 6px; font-size: 11px; line-height: 1.7; color: #bfb3bc; }
.host-vs-models { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.host-vs-models span { padding: 6px 9px; border: 1px solid #ffffff22; border-radius: 20px; background: #ffffff04; color: #ead1cb; font-size: 10px; font-weight: 500; }
.host-vs-formats { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #e0d6d0; font-size: 11px; font-weight: 500; }
.host-vs-formats i { width: 3px; height: 3px; border-radius: 50%; background: #9d8378; }
.host-vs-cta { display: inline-flex; align-items: center; justify-content: center; gap: 30px; margin-top: 28px; padding: 17px 24px; min-height: 56px; background: #f4bd94; color: #201913; font-size: 13px; font-weight: 650; border-radius: 30px; box-shadow: 0 3px 30px #ea976818; transition: background .2s, transform .2s; }
.host-vs-cta:hover { background: #ffcea8; transform: translateY(-2px); }
.host-vs-cta svg { width: 19px; height: 19px; }
.host-vs-price { margin-top: 18px; }
.host-vs-price strong { display: block; font-size: 13px; font-weight: 550; color: #ede0d7; }
.host-vs-price > span { display: block; margin-top: 6px; font-size: 10px; color: #ada5a8; line-height: 1.7; }
.host-vs-optional { margin-top: 14px; max-width: 380px; font-size: 10px; line-height: 1.6; color: #ada5a8; }
.host-vs-showcase { min-width: 0; }
.host-vs-stage { height: 465px; position: relative; display: grid; place-items: center; perspective: 1100px; }
.host-vs-stage::after { content: ''; pointer-events: none; position: absolute; bottom: -20px; left: 8%; right: 8%; height: 60px; background: #0008; filter: blur(25px); }
.host-vs-side { position: absolute; width: 43%; height: 77%; object-fit: cover; border-radius: 19px; opacity: .72; border: 1px solid #ffffff30; box-shadow: 0 18px 40px #0007; }
.host-vs-side-left { left: 1%; transform: rotate(-9deg) rotateY(15deg); }
.host-vs-side-right { right: 1%; transform: rotate(9deg) rotateY(-15deg); }
.host-vs-phone { position: relative; z-index: 1; width: 256px; height: 455px; border: 1px solid #ffffff50; border-radius: 23px; overflow: hidden; background: #161618; box-shadow: 0 24px 65px #0009; }
.host-vs-phone::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(#0008, transparent 25%, transparent 52%, #000c); }
#host-vs-preview { display: block; width: 100%; height: 100%; object-fit: cover; }
.host-vs-film-tag { position: absolute; z-index: 2; left: 15px; top: 19px; right: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: 9px; font-weight: 500; text-shadow: 0 1px 5px #000; }
.host-vs-film-tag > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: #f4bd94; }
.host-vs-watch { position: absolute; z-index: 2; left: 50%; top: 48%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: transparent; color: white; font-size: 11px; font-weight: 550; white-space: nowrap; text-shadow: 0 2px 7px #000; padding: 12px; }
.host-vs-play-icon { display: grid; place-items: center; width: 55px; height: 55px; border: 1px solid #fff8; border-radius: 50%; background: #14141466; backdrop-filter: blur(8px); transition: background .2s; }
.host-vs-watch:hover .host-vs-play-icon { background: #a06542bb; }
.host-vs-play-icon svg { width: 23px; height: 23px; margin-left: 3px; }
.host-vs-caption { position: absolute; z-index: 2; bottom: 24px; left: 20px; right: 20px; }
.host-vs-caption small { display: block; color: #f1dac8; font-size: 6px; letter-spacing: 1.05px; line-height: 1.6; }
.host-vs-caption strong { display: block; margin-top: 9px; font-size: 19px; line-height: 1.15; letter-spacing: -.6px; font-weight: 550; }
.host-vs-film-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 22px; }
.host-vs-film-list > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 62px; padding: 6px; text-align: left; background: #ffffff05; color: #e1d8d9; border: 1px solid #ffffff15; border-radius: 11px; transition: border-color .2s, background .2s; }
.host-vs-film-list > button:hover { border-color: #dcb28b99; }
.host-vs-film-list > button[aria-pressed="true"] { border-color: #deae87; background: #f4bd9410; }
.host-vs-film-list img { width: 30px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.host-vs-film-list span { font-size: 9px; font-weight: 550; line-height: 1.45; }
.host-vs-film-list small { display: block; font-size: 8px; color: #b0a5a7; font-weight: 400; margin-top: 4px; }
.host-vs-media-note { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; font-size: 8px; line-height: 1.7; color: #b6acb3; text-align: center; }
.host-vs-media-note button { min-height: 38px; padding: 6px; background: transparent; border: 0; color: #dec0aa; text-decoration: underline; text-underline-offset: 3px; font-size: 9px; }
.host-vs-error { color: #f2bea1; font-size: 11px; line-height: 1.7; }
.host-vs-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-inline: 54px; padding: 26px 0 30px; border-top: 1px solid #ffffff1c; }
.host-vs-steps > div { display: flex; gap: 12px; align-items: flex-start; }
.host-vs-step-number { color: #c99c82; font-size: 10px; margin-top: 2px; }
.host-vs-steps strong { display: block; font-weight: 550; font-size: 12px; }
.host-vs-steps p > span { display: block; margin-top: 7px; font-size: 10px; line-height: 1.5; color: #b3a9b0; }
.host-vs-dialog { background: #111114; border: 1px solid #ffffff30; border-radius: 20px; padding: 18px; color: #f7f3ed; max-width: min(510px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; }
.host-vs-dialog::backdrop { background: #000c; backdrop-filter: blur(10px); }
html:has(#host-vs-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.host-vs-dialog-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.host-vs-dialog-header h2 { font-size: 16px; letter-spacing: -.4px; font-weight: 550; }
.host-vs-dialog-header button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid #ffffff20; border-radius: 50%; background: #ffffff0b; color: #fff; }
#host-vs-full { display: block; max-height: calc(100dvh - 190px); max-width: 100%; width: auto; min-width: 180px; aspect-ratio: 9/16; margin-inline: auto; background: #050505; border-radius: 10px; }
.host-vs-dialog > p { font-size: 10px; line-height: 1.6; margin-top: 14px; color: #bbb0b5; max-width: 340px; }
.host-vs :focus-visible, .host-vs-dialog :focus-visible { outline: 2px solid #f4bd94; outline-offset: 4px; }
.host-vs-media-note button { min-height: 44px; }
.host-vs-dialog-error { color: #f2bea1 !important; }
.host-vs-film-list span { font-size: 11px; }
.host-vs-film-list small { font-size: 10px; }
.host-vs-media-note { font-size: 10px; }
.host-vs-media-note button { font-size: 10px; }
@media (min-width:1031px) and (max-width:1240px) { .host-header-inner { gap: 16px; padding-inline: 22px; } .host-nav { gap: 15px; } .host-header-actions { gap: 14px; } .host-header-actions .host-guest-switch { display: none; } }
@media (max-width:1100px) { .host-vs-main { padding: 42px 34px 30px; gap: 20px; } .host-vs h2 { font-size: 46px; } .host-vs-steps { margin-inline: 34px; } .host-vs-stage { height: 424px; } .host-vs-phone { height: 414px; width: 233px; } .host-vs-film-list > button { flex-direction: column; text-align: center; gap: 5px; } .host-vs-film-list img { display: none; } }
@media (max-width:850px) { .host-vs-main { grid-template-columns: 1fr; gap: 36px; padding: 34px 30px 26px; } .host-vs-copy { max-width: 490px; margin-inline: auto; width: 100%; } .host-vs-showcase { width: 100%; max-width: 490px; margin-inline: auto; } .host-vs h2 { font-size: 52px; } .host-vs-lead { max-width: 430px; } .host-vs-stage { height: 450px; } .host-vs-phone { height: 440px; width: 248px; } .host-vs-side { width: 40%; } .host-vs-film-list > button { flex-direction: row; text-align: left; } .host-vs-film-list img { display: block; } .host-vs-steps { gap: 18px; } }
@media (max-width:580px) { .host-vs { margin-top: 44px; border-radius: 22px; } .host-vs-main { padding: 29px 22px 20px; gap: 28px; } .host-vs-brand { margin-bottom: 26px; } .host-vs-brand > img { width: 39px; height: 39px; } .host-vs-brand > span:not(.host-vs-new) { font-size: 19px; } .host-vs-brand small { font-size: 7px; } .host-vs-new { font-size: 8px; margin-left: 3px; } .host-vs h2 { font-size: clamp(36px, 9.6vw, 51px); } .host-vs-lead { margin-top: 19px; font-size: 13px; line-height: 1.8; } .host-vs-formats { margin-top: 14px; } .host-vs-cta { margin-top: 24px; width: 100%; gap: 24px; } .host-vs-price { margin-top: 16px; } .host-vs-price > span { font-size: 9px; } .host-vs-optional { font-size: 9px; } .host-vs-stage { height: 354px; margin-inline: -8px; } .host-vs-phone { height: 344px; width: 194px; border-radius: 18px; } .host-vs-side { width: 43%; border-radius: 15px; } .host-vs-caption { left: 15px; right: 15px; bottom: 19px; } .host-vs-caption small { font-size: 5px; } .host-vs-caption strong { font-size: 16px; } .host-vs-film-tag { font-size: 8px; } .host-vs-film-list { gap: 5px; margin-top: 17px; } .host-vs-film-list > button { flex-direction: column; text-align: center; min-height: 59px; } .host-vs-film-list img { display: none; } .host-vs-film-list span { font-size: 8px; } .host-vs-film-list small { font-size: 7px; } .host-vs-media-note { font-size: 7px; gap: 0 5px; } .host-vs-steps { grid-template-columns: 1fr; margin-inline: 22px; padding-block: 23px 28px; gap: 20px; } .host-vs-steps > div { gap: 16px; } .host-vs-steps p > span { margin-top: 4px; } .host-vs-announcement { font-size: 10px; gap: 8px; } }
@media (prefers-reduced-motion:reduce) { .host-vs *, .host-vs-announcement { animation: none !important; transition: none !important; } }
@media (max-width:580px) {
 .host-vs-price > span, .host-vs-optional { font-size: 11px; }
 .host-vs-film-list span { font-size: 10px; }
 .host-vs-film-list small { font-size: 9px; }
 .host-vs-media-note { font-size: 9px; }
 .host-vs-film-list > button { min-height: 65px; }
 .host-vs-steps p > span { font-size: 11px; }
 .host-vs-caption small { font-size: 7px; }
}