/* Max is always a transparent foreground; the empty studio is a separate layer. */
.hero{background:radial-gradient(ellipse at 65% 40%,#171a1e 0%,#08090a 70%)}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#08090abf,transparent 65%);pointer-events:none}.hero .hero-render{inset:auto;left:auto;right:var(--page-inset);top:20px;bottom:auto;width:45%;height:calc(100% - 70px);object-fit:contain;object-position:center;transform:none;mask-image:none;mix-blend-mode:normal}.hero .hero-copy{width:56%;padding-top:clamp(80px,10vh,135px)}
.closer-look{background:linear-gradient(145deg,#fff,#f5f5f7)}.closer-image{height:740px;position:relative}.closer-image img{mix-blend-mode:normal}.registered-render{position:relative}.design-media,.interface-portrait,.power-visual,.highlight-card:not(.light-card),.explore-grid>a:first-child{background:radial-gradient(ellipse at 65% 40%,#171a1e 0%,#08090a 70%)}.design-media img,.story-enhanced .design-media img,.interface-portrait img,.power-visual img{object-fit:contain;object-position:center;mask-image:none;mix-blend-mode:normal}.story-enhanced .design-media{overflow:visible}.story-enhanced .design-media img{transform:none}.design-media{border-radius:0}.highlight-card{position:relative}.highlight-card img,.highlight-card:first-child img,.highlight-card:nth-child(2) img,.highlight-card.light-card img{object-fit:contain;object-position:center;padding:100px 22px 22px;mix-blend-mode:normal}.highlight-card.light-card{background:linear-gradient(145deg,#fff,#f5f5f7)}.highlight-card h3{z-index:2}.explore-grid>a:first-child{background:linear-gradient(145deg,#fff,#f5f5f7)}.explore-grid img{object-fit:contain;mix-blend-mode:normal}.interface-portrait{padding:25px}.power-visual{height:440px}.power-visual img{height:100%;width:100%}.wordmark img{width:132px;height:31px}.phone-concept>img{width:112px;height:26px}.max-film{margin-top:45px}
@media(max-width:900px) and (min-width:601px){.hero{height:850px;min-height:850px}.hero .hero-copy{width:65%;padding-top:90px}.hero .hero-render{right:2%;top:190px;width:51%;height:600px}.closer-image{height:650px}}
@media(max-width:600px){.hero{height:900px;min-height:900px;max-height:none}.hero .hero-copy{width:100%;padding-top:40px}.hero .hero-render{left:var(--page-inset);right:var(--page-inset);top:360px;width:calc(100% - 2 * var(--page-inset));height:480px;object-fit:contain;object-position:center;transform:none;mask-image:none}.hero .hero-foot{bottom:18px}.hero .hero-copy p{max-width:335px}.closer-image{height:530px}.power-visual{height:360px}.interface-portrait{height:490px;margin:0;border-radius:18px;padding:20px}.highlight-card img,.highlight-card:first-child img,.highlight-card:nth-child(2) img,.highlight-card.light-card img{padding:100px 20px 18px}.wordmark img{width:120px;height:28px}}
@media(min-width:901px) and (max-height:720px){.hero .hero-copy{padding-top:65px}.hero .hero-render{height:calc(100% - 60px);top:15px}}

.closer-image.registered-render>img{width:auto;height:100%;max-width:none;object-fit:fill}

/* The hero retains its rendered environment so contact shadows and lighting agree. */
.hero{background:#08090a}.hero:before{display:none}.hero .hero-render{right:3%;left:auto;top:0;height:100%;width:auto;max-width:none;object-fit:contain;mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 92%,transparent 100%)}
@media(min-width:601px) and (max-width:900px){.hero .hero-render{top:220px;height:600px;right:-5%;width:auto}}
@media(max-width:600px){.hero .hero-render{top:360px;left:0;right:0;width:100%;height:480px;object-fit:cover;object-position:72% center;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}}

/* Keep image layout inside a definite box rather than an intrinsic grid track. */
.power-visual{display:block;min-width:0;min-height:0;overflow:hidden;perspective:none}.power-visual>img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;transform:none}
.design-story .design-stage:after{display:none}.story-enhanced .design-media{overflow:hidden}
.design-story .story-controls{display:inline-flex;width:fit-content;align-items:center;gap:0;padding:0 12px;min-height:52px;border-radius:40px;background:#262629}.design-story .story-controls button{width:34px;height:52px;min-height:52px;border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:24px}.design-story .story-controls button:before{content:'';width:7px;height:7px;border-radius:8px;background:#bcbcc2;transform:none}.design-story .story-controls button[aria-pressed=true]{width:54px}.design-story .story-controls button[aria-pressed=true]:before{width:32px;height:8px;background:#f5f5f7;transform:none}
@media(max-width:900px){.design-story{height:auto!important}.design-story .design-stage{position:static;display:flex;flex-direction:column;height:auto;min-height:0;gap:0;padding:35px var(--page-inset) 60px;overflow:hidden}.design-story .design-media{position:relative;display:block;flex:none;width:100%;height:460px;min-height:0;overflow:hidden;background:transparent}.design-story .design-media img{position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;mask-image:none;transform:none;mix-blend-mode:normal}.design-story .design-copy{position:static;width:100%;max-width:560px;margin:32px auto 0}.design-story .story-panels{position:static;min-height:250px}.design-story .story-panel{position:static;display:none;opacity:1;transform:none;margin:0;pointer-events:auto}.design-story .story-panel.is-active{display:block}.design-story .design-copy h2{font-size:36px}.design-story .design-copy .caption{margin-top:22px}.battery-layout{display:flex;flex-direction:column;align-items:stretch;gap:30px}.battery-layout>.power-visual{width:100%;height:380px;flex:none}.battery-layout>div{min-width:0}.section-menu nav{grid-template-columns:1fr}}
@media(max-width:380px){.design-story .design-media{height:400px}.design-story .story-panels{min-height:290px}}

.section-menu:not([open]) nav{display:none}.section-menu[open] nav{box-sizing:border-box;width:100%;min-width:0}.section-menu nav a{min-width:0;overflow-wrap:anywhere}

.closer-image{overflow:hidden}

@media(max-width:700px){.product-page .section-nav{position:fixed;top:0;left:0;right:0;width:100%;transform:translateY(-110%);visibility:hidden;transition:transform .28s ease,visibility .28s;will-change:transform}.product-page.mobile-nav-visible .section-nav{transform:translateY(0);visibility:visible}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.product-page .section-nav{transition:none}}

@media(max-width:700px){.product-page .global-nav .wordmark img{width:36px;height:36px}.product-page .global-nav nav{gap:14px;font-size:11px}.product-page .global-nav nav>a:not(.nav-action){display:inline-flex}}