/* Editorial storefront: imagery first, restrained surfaces and consistent rhythm. */
:root{--canvas:#08090b;--surface:#141518;--ink:#f5f5f7;--muted:#98999f;--accent:#2997ff}
body{background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
header{height:72px;border-color:#ffffff0c;gap:64px}
.brand{font-size:24px;letter-spacing:-1px}.brand span{color:var(--accent)}
nav{color:#b5b5ba;font-size:12px;gap:34px}nav a{padding:26px 0}nav .active{color:white;border:0}
.account{border:0;background:#202125;padding:10px 18px}.account span{color:#aeb0b7}
.hero{display:block;min-height:0;text-align:center;padding:92px 24px 74px;background:none;overflow:visible}
.hero-copy{max-width:800px;margin:auto}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:2px;font-weight:500}
h1{font-size:clamp(44px,5.4vw,72px);line-height:1.15;letter-spacing:-3px;font-weight:650;margin:22px 0}
h1 span{font-size:.64em;letter-spacing:-1px;color:#a0a1a8;margin-top:16px;font-weight:500}
.intro{font-size:16px;color:#a2a3ab;line-height:1.8}.hero-actions{justify-content:center;margin:30px 0 35px;gap:18px}
.button{border-radius:28px;font-size:14px;padding:13px 23px;min-height:46px;gap:16px}
.primary{background:#0071e3;border:0;box-shadow:none}.primary:hover{background:#147ce5}
.ghost{background:transparent;border:0;color:var(--accent);box-shadow:none}.ghost:hover{text-decoration:underline}
.platform-strip{justify-content:center;gap:28px;color:#c3c3c8;font-size:15px}.platform-strip .max{font-size:24px}.platform-strip span{color:#77797f}
.section{padding:48px 40px 32px}.section-heading{margin-bottom:30px;align-items:center}h2{font-size:32px;line-height:1.3;font-weight:600;letter-spacing:-1px}
.section-heading .eyebrow{margin-bottom:12px}.muted{color:var(--muted)}
.poster-grid{grid-auto-columns:calc((100% - 72px)/4);gap:24px;padding:0 0 20px;scrollbar-color:#35363c transparent;scroll-padding-inline:0}
.poster-frame{border:0;border-radius:12px;background:#111215;aspect-ratio:2/3;transition:transform .25s ease,box-shadow .25s ease}
.poster-frame img{object-fit:contain}.poster-platform{left:12px;top:12px;background:#101114cc;border:1px solid #ffffff18;backdrop-filter:blur(10px);padding:5px 9px;border-radius:20px;font-size:10px}
.poster-upcoming{right:12px;bottom:12px;background:#f5f5f7;color:#202124;border-radius:20px;padding:6px 10px;font-size:10px}
.poster-card h3{font-size:16px;font-weight:550;margin:16px 0 7px}.poster-card p{font-size:12px;color:#96979f;line-height:1.6}
.poster-grid:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
@media(hover:hover){.poster-card:hover .poster-frame{transform:translateY(-3px);box-shadow:0 12px 25px #0005}}
.availability{color:#85868f;font-size:11px;max-width:760px;margin:18px 0 0;line-height:1.9}.availability a{color:var(--accent)}
.subscription-grid{gap:16px}.subscription-card{background:var(--surface);border:0;border-radius:20px;padding:34px 20px 24px}
.subscription-card img{width:64px;height:64px;border-radius:14px;margin-bottom:10px}.subscription-card h3{font-size:19px;font-weight:550}.subscription-card p{color:#9899a1;font-size:12px;margin-bottom:20px}
.detail{background:transparent;border:0;color:var(--accent);border-radius:20px;padding:12px;font-size:13px;min-height:44px}.detail:hover{background:#ffffff07;border:0}
.device-grid{gap:20px}.device-card{border:0;border-radius:20px;background:var(--surface)}.product-art{height:220px;background:radial-gradient(ellipse at 50% 80%,#353840,#17181c 74%)}
.mini-box{top:68px}.mini-remote{top:52px}.device-copy{padding:26px}.device-copy h3{font-size:22px;font-weight:550}.device-copy p{font-size:13px;color:#9899a1}.pill{color:#94969d;letter-spacing:.8px}.device-copy .detail{padding:12px 0;background:transparent}
.guide{background:var(--surface);border:0;border-radius:24px;margin:52px 40px 80px;padding:44px;gap:60px}.guide h2{font-size:30px}.guide li{padding:20px 0}.guide li>span{color:#777982}.guide li p{color:#9899a1;font-size:12px}.guide .button{padding-left:0}
footer{border-color:#ffffff0c;padding:36px 0 44px}footer p,footer>a:not(.brand){color:#96979f}footer small{color:#73747c}
dialog{background:#191a1e;border:1px solid #ffffff15;border-radius:24px;padding:38px}dialog p:not(.eyebrow){color:#a5a6ad}
@media(max-width:1000px){header{padding:0 24px;gap:30px}.hero{padding:76px 24px 50px}.section{padding:38px 24px 26px}.poster-grid{grid-auto-columns:calc((100% - 40px)/3);gap:20px}.guide{margin:35px 24px 55px;padding:32px;gap:30px}.subscription-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){header{height:64px;padding:0 22px}.brand{font-size:23px}.account{font-size:11px}.hero{padding:58px 22px 38px}h1{font-size:43px;letter-spacing:-2px}h1 span{font-size:27px;letter-spacing:-.8px;line-height:1.4}.intro{font-size:13px;margin-top:24px}.hero-actions{gap:5px;margin:26px 0 30px;flex-wrap:wrap}.button{font-size:12px;padding:12px 17px}.platform-strip{gap:22px;font-size:13px}.platform-strip .netflix{font-size:12px}.platform-strip .max{font-size:22px}.section{padding:32px 22px 24px}h2{font-size:26px;letter-spacing:-.8px}.section-heading{margin-bottom:24px}.eyebrow{font-size:10px}.poster-grid{grid-auto-columns:72%;gap:16px}.poster-frame{border-radius:10px}.poster-card h3{font-size:16px}.poster-card p{font-size:12px}.subscription-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.subscription-card{padding:26px 14px 18px;border-radius:18px}.subscription-card h3{font-size:18px}.subscription-card p{font-size:11px}.device-card{display:block}.product-art{height:205px;min-height:0}.mini-box{left:calc(50% - 80px);width:130px;height:95px;top:55px}.mini-remote{left:calc(50% + 65px);right:auto;top:40px;width:31px;height:122px}.art-two .mini-box{width:125px;height:105px}.device-copy{padding:24px}.device-copy h3{font-size:22px}.device-copy p{font-size:13px}.guide{margin:28px 22px 45px;padding:28px;gap:14px}.guide h2{font-size:26px}footer{margin:0 22px}.availability{font-size:11px}}
.platform-strip{gap:32px;align-items:center}
.platform-strip .wordmark{display:flex;position:relative;align-items:center;justify-content:center;width:100px;height:54px;flex:0 0 auto;overflow:hidden}
.wordmark img{display:block;object-fit:contain;width:100%;height:auto;max-height:48px}
.wordmark-netflix img{width:130px;max-width:none;max-height:none;flex-shrink:0}
.wordmark-disney img{width:88px;filter:invert(1)}
.wordmark-max img{width:70px}
.wordmark-prime img{width:136px;max-width:none;max-height:none;flex-shrink:0}
@media(max-width:640px){.platform-strip{gap:clamp(12px,4vw,20px)}.platform-strip .wordmark{display:flex;width:64px;height:44px}.wordmark-netflix img{width:83px}.wordmark-disney img{width:64px}.wordmark-max img{width:52px}.wordmark-prime img{width:64px}}
.poster-grid{grid-auto-columns:29%;padding:5px 20px 20px;scroll-snap-type:none;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.poster-grid::-webkit-scrollbar{display:none}
.poster-frame{aspect-ratio:4/5}.poster-frame img{object-fit:cover}
.poster-controls{display:flex;gap:8px;flex-shrink:0}.poster-controls button{border:1px solid #ffffff12;border-radius:24px;background:#1b1c20;color:#e8e8ed;height:38px;min-width:38px;padding:0 12px;font-size:13px}.poster-controls button:hover{background:#303137}
@media(max-width:640px){.poster-grid{grid-auto-columns:78%;padding-left:10px;padding-right:10px;mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)}#recommendations .section-heading{align-items:flex-start;flex-wrap:wrap;gap:16px}.poster-controls button{height:34px;min-width:34px}}
.wordmark-prime img{transform:translateY(-2px)}
@media(max-width:640px){.wordmark-prime img{width:88px}}
.poster-grid{grid-auto-columns:36%}
@media(max-width:640px){.poster-grid{grid-auto-columns:78%}}
.product-photo{height:250px;display:flex;align-items:center;justify-content:center;background:#fff;padding:22px}
.product-photo img{width:100%;height:100%;object-fit:contain;display:block}
.device-copy h3{min-height:54px;font-size:21px;display:flex;align-items:center}
@media(max-width:640px){.product-photo{height:240px;padding:20px}.device-copy h3{min-height:0}}
@media(prefers-reduced-motion:reduce){.poster-frame{transition:none}}

/* Complete wordmark: preserve native geometry and a single blue color. */
.platform-strip .wordmark-prime img{width:100%;max-width:100%;height:auto;max-height:38px;transform:none;flex-shrink:1}
.product-photo{height:260px;padding:22px;overflow:hidden;background:#fff}
.product-photo img{object-fit:contain;max-width:none}
.product-photo-google img{transform:scale(1.08)}
.product-photo-apple img{transform:scale(1.22) translateY(5%)}
.product-photo-onn img{transform:scale(1.3)}
@media(max-width:640px){.product-photo{height:250px;padding:24px}.platform-strip .wordmark-prime img{width:100%;max-height:28px}}
.poster-grid-square .poster-frame{aspect-ratio:1}
.poster-grid-landscape .poster-frame{aspect-ratio:16/9}
.poster-grid-square{grid-auto-columns:30%}
.poster-grid-landscape{grid-auto-columns:58%}
.poster-subheading{font-size:23px;font-weight:600;margin:42px 20px 20px;letter-spacing:-.4px}
@media(max-width:640px){.poster-grid-square{grid-auto-columns:78%}.poster-grid-landscape{grid-auto-columns:88%}.poster-subheading{font-size:20px;margin:32px 12px 16px}}

.wordmark-paramount img{width:46px;height:46px;border-radius:50%}.platform-strip{flex-wrap:wrap}@media(max-width:640px){.platform-strip .wordmark{width:52px}.wordmark-paramount img{width:36px;height:36px}}

#netflix-popular{scroll-margin-top:30px}.rail-controls{justify-content:flex-end;margin:-48px 20px 20px}.rail-controls button{width:auto;padding:8px 14px;font-size:11px}@media(max-width:640px){.rail-controls{margin:0 12px 12px}}

.wordmark-paramount img{width:100px;height:32px;border-radius:0;filter:brightness(0) invert(1)}@media(max-width:640px){.wordmark-paramount img{width:52px;height:28px}}
/* Preserve each official wordmark in full at every viewport width. */
.platform-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(600px,100%);gap:clamp(10px,2.5vw,28px);margin-inline:auto;align-items:center}.platform-strip .wordmark{display:flex;width:100%;min-width:0;height:56px;overflow:visible}.platform-strip .wordmark img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:1;transform:none;border-radius:0}.platform-strip .wordmark-max img{max-width:80%}.platform-strip .wordmark-disney img{max-width:90%}@media(max-width:640px){.platform-strip{gap:clamp(8px,2.4vw,15px)}.platform-strip .wordmark{width:100%;height:42px}.platform-strip .wordmark img{width:100%;height:100%;max-height:42px}.hero h1{font-size:clamp(30px,8.5vw,43px);letter-spacing:-1px}.hero h1 span{font-size:clamp(22px,6vw,29px)}.hero-actions .button{min-height:44px;line-height:1.5}.hero-actions{gap:10px}.section-heading{min-width:0}.section-heading h2{overflow-wrap:anywhere}}@media(max-width:360px){.hero,.section{padding-left:16px;padding-right:16px}.hero-actions{flex-direction:column}.platform-strip .wordmark{height:34px}}

/* Square platform icons share one scale; wordmarks remain in brand strips. */
.subscription-card img{object-fit:contain;flex-shrink:0}
@media(max-width:640px){.subscription-card:last-child{grid-template-columns:64px minmax(0,1fr);column-gap:20px}.subscription-card:last-child img{width:64px;height:64px;border-radius:14px;filter:none}}

/* Rail controls belong below the content, centered on desktop. Touch layouts swipe directly. */
#recommendations .poster-controls{justify-content:center;margin:16px auto 30px;gap:10px}
#recommendations .poster-controls button{min-height:40px;padding-inline:16px}
@media(max-width:767px),(hover:none) and (pointer:coarse){#recommendations .poster-controls{display:none}}

/* Six subscriptions share the same card rhythm on every screen. */
.subscription-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.subscription-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.subscription-card .detail{margin-top:auto}.subscription-card:last-child{grid-column:auto;display:flex;text-align:center}.subscription-card:last-child img{margin:0 0 10px}.subscription-card:last-child h3{margin:1em 0}.subscription-card:last-child p{margin:0 0 20px}.subscription-card:last-child button{width:auto}.subscription-card img[alt="全家桶"]{border-radius:0;object-fit:contain}@media(max-width:640px){.subscription-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subscription-card:last-child{grid-column:auto;display:flex}.subscription-card:last-child img{width:64px;height:64px}}
/* Optical sizing: the carton has a transparent silhouette rather than a filled app tile. */
.subscription-card img[alt="全家桶"]{transform:scale(1.4);transform-origin:50% 50%;overflow:visible}
.subscription-card h3,.subscription-card:last-child h3{margin:18px 0 10px}
.subscription-card p,.subscription-card:last-child p{min-height:38px;margin:0 0 20px}
@media(min-width:641px){.subscription-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:210px;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 0 18px;scrollbar-width:thin;scrollbar-color:#424751 transparent}.subscription-card{min-height:265px;scroll-snap-align:start;padding:30px 20px 24px}.subscription-card:last-child{grid-column:auto}}
@media(max-width:640px){.subscription-card,.subscription-card:last-child{padding:20px 10px 16px;min-height:0;aspect-ratio:1/1.22;justify-content:center}.subscription-card img,.subscription-card:last-child img{width:52px;height:52px;margin:0 0 5px}.subscription-card h3,.subscription-card:last-child h3{font-size:16px;margin:10px 0 6px}.subscription-card p,.subscription-card:last-child p{min-height:0;font-size:10px;line-height:1.45;margin:0 0 10px}.subscription-card .detail{font-size:11px;padding:8px 2px;margin-top:auto}.subscription-card img[alt="全家桶"]{transform:scale(1.3)}header nav{display:flex;margin-left:auto;gap:14px}header nav a[href="/"]{display:none}header .account{margin-left:0}header{gap:14px}.brand{flex-shrink:0}}
/* Public brand images are discoverable in HTML and paint directly from cache. */
[data-brand-src]{opacity:1}

header .account,header .account.nav-destination{background:transparent;border:0;border-radius:0;padding:0;color:inherit;box-shadow:none}header .nav-destination{font-size:14px;font-weight:500}

/* Match perceived weight rather than identical image rectangles. */
.platform-strip .wordmark-netflix img{max-width:88%}