/* A moving banner with a still-image fallback, followed by editorial rows. */
html:has(body.product-page){height:auto;overflow:auto;overscroll-behavior:auto}
body.product-page{height:auto;min-height:100vh;overflow:visible;background:#071a21;--product-banner-height:clamp(540px,72svh,700px)}
.product-page:before,.product-page:after{content:none}
.product-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:url('assets/pocket-hopper-banner.webp') center/cover no-repeat}
.product-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#031820c9,#03182025 60%),linear-gradient(0deg,#031820bb,transparent 65%)}
.product-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#071a21;opacity:0;transition:opacity .4s ease}
.product-video.is-ready{opacity:1}
.product-banner{position:relative;isolation:isolate;min-height:var(--product-banner-height);display:flex;align-items:center;border-bottom:1px solid #52717a66}
.product-video-toggle{position:absolute;right:max(6vw,calc((100vw - 1160px)/2));bottom:18px;padding:9px 13px;border:1px solid #78949a80;border-radius:3px;background:#071a21d9;color:var(--cream);font:11px/1.3 var(--sans)}
.product-video-toggle:hover{border-color:var(--gold)}
.product-video-toggle[hidden]{display:none}
.product-banner-inner{width:min(1160px,88%);margin:0 auto;padding:calc(var(--top-height) + 40px) 0 45px}
.product-copy{max-width:460px;text-shadow:0 2px 16px #00121d90}
.product-title{margin:0 0 18px}
.product-title-art{display:block;width:min(100%,280px);height:auto;max-height:105px;object-fit:contain;object-position:left center}
.product-tagline{font:500 clamp(36px,3.5vw,50px)/1.02 var(--serif);letter-spacing:-1.4px;color:var(--cream);margin:0 0 18px}
.product-description{font-size:15px;line-height:1.65;color:#d5e0de;max-width:390px;margin:0 0 16px}
.app-store-link{display:inline-block;margin:14px 0;padding:0;border-radius:8px}
.app-store-link img{display:block;width:162px;height:auto}
.product-news-surface{position:relative;isolation:isolate;background:#071a21}
.product-news-surface:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/news-hex.svg') right top/24px 42px;mask-image:radial-gradient(ellipse at 100% 0,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 100% 0,#000,transparent 75%);opacity:.15;animation:hex-breathe 12s ease-in-out infinite}
.product-updates{width:min(1080px,88%);margin:0 auto;padding:52px 0 55px}
.product-updates-heading{margin-bottom:28px}
.product-updates-heading .eyebrow{color:var(--gold);margin-bottom:10px}
.product-page main .product-updates-heading h2{font:500 clamp(28px,2.6vw,36px)/1.1 var(--serif);margin:0;color:var(--cream)}
/* All row layout, artwork, and chevron states come directly from news.css. */
.product-page main .news-row h3{font-size:23px;line-height:1.2;margin:0 0 8px;text-wrap:balance}
.product-news-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px}
.product-news-footer p{font:12px/1.7 var(--sans);color:#8aa5ae;margin:0}
.product-news-footer .text-link{white-space:nowrap}
.product-footer{width:100%;margin:0;background:#071a21;padding:30px max(6vw,calc((100vw - 1080px)/2)) max(30px,env(safe-area-inset-bottom));border-top:1px solid #42616a66}
@media(max-width:900px){.product-page main .news-row h3{font-size:21px}}
@media(max-width:700px){.product-banner-inner{padding:calc(var(--top-height) + 35px) 0 36px}.product-art{background-position:62% center}.product-title-art{width:230px;max-height:95px}.product-tagline{font-size:38px}.product-updates{width:90%;padding:36px 0 40px}.product-updates-heading{margin-bottom:24px}.product-page main .news-row h3{font-size:20px}.product-news-footer{align-items:start}.product-footer{padding-inline:5%}}
@media(max-width:380px){.product-page main .news-row h3{font-size:18px}}
@media(max-height:540px){.product-banner-inner{padding-top:calc(var(--top-height) + 28px)}.product-title-art{max-height:85px}.product-tagline{font-size:36px}}
@media(prefers-reduced-motion:reduce){.product-news-surface:before{animation:none}}