/* Portrait composition: retain the landscape's sweep instead of magnifying it. */
@media(max-width:650px){
 html,body,main{height:100%;overflow:hidden}
 .hero{height:100svh;min-height:0;background:#09121e}
 .header{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6% 0;background:none}
 .brand{font-size:12px;letter-spacing:.19em;white-space:nowrap}
 .menu-toggle{width:44px;height:44px;font-size:21px}
 .header nav{top:calc(58px + env(safe-area-inset-top));background:#09121ef5;backdrop-filter:blur(12px)}
 .hero-backdrop{overflow:hidden}
 .hero-backdrop img{position:absolute;top:24%;left:-58%;width:185%;height:auto;max-width:none;object-fit:contain;object-position:center;mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%)}
 .hero-shade{background:linear-gradient(180deg,#06111e00 25%,transparent 42%,#09121e15 66%,#09121e90 80%,#09121e 100%)}
 .hero-copy{top:calc(116px + env(safe-area-inset-top));left:6%;right:6%;max-width:none}
 .hero-copy .eyebrow{font-size:8px;letter-spacing:.2em;line-height:1.5;color:#bdbcb6}
 .hero h1{font-size:clamp(34px,10.4vw,62px);line-height:1.08;margin:12px 0 14px;padding-bottom:.07em;letter-spacing:-.03em}
 .hero-copy p{display:block;font-size:14px;line-height:1.45;letter-spacing:.005em;color:#d6cebf;max-width:350px}
 .hero .actions{margin-top:20px;gap:15px;flex-wrap:nowrap;align-items:center}
 .hero .primary.reference-button{width:clamp(180px,49vw,255px);height:auto;min-height:0;aspect-ratio:275/55}
 .watch-button{font-size:8px;letter-spacing:.09em;gap:8px;min-height:44px}
 .play-outline{width:35px;height:35px;min-width:35px;min-height:35px}
 .price-widget{top:calc(65px + env(safe-area-inset-top));left:6%;right:6%;display:flex;flex-direction:row;align-items:center;gap:9px;min-width:0;padding:0;border:0;text-align:left;flex-wrap:wrap}
 .price-widget>span:first-child{display:block;font-size:8px;letter-spacing:.12em;line-height:1.4;order:3;margin-left:auto}
 .price-widget .price-symbol{display:block;margin:0;font-size:11px;letter-spacing:.12em}
 .price-widget strong{font-size:19px;line-height:1.2}
 .price-widget small{font-size:9px;min-height:0;margin:0;order:4;flex-basis:100%}
 .hero-quote{display:block;top:auto;bottom:calc(29% + 32px);right:7%;font-size:14px;line-height:1.3;text-align:right;color:#ddc18e}
 .hero-quote span{margin:9px 0 0 auto;width:26px}
 .hero-features{left:6%;right:6%;bottom:calc(12px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start}
 .feature,.feature:nth-child(n){aspect-ratio:auto!important;height:auto;min-height:0;padding:0;border:0;overflow:hidden}
 .feature .tile-art{width:100%;height:auto;aspect-ratio:365/120;min-height:0;mask-image:linear-gradient(#000 50%,transparent 100%)}
 .feature h2,.feature p{position:static;clip-path:none;width:auto;height:auto;margin:0;white-space:normal;overflow:visible}
 .feature h2{font-size:10px;letter-spacing:.17em;line-height:1.5}
 .feature p{display:block;font-size:12px;line-height:1.35;letter-spacing:0;color:#bdbbc0;margin-top:4px}
 .feature p br{display:none}
 .atmosphere{display:none}
 dialog{width:calc(100vw - 32px);max-height:calc(100svh - 48px);padding:52px 24px 28px}
}
@media(max-width:650px) and (max-height:740px){
 .hero-copy{top:calc(103px + env(safe-area-inset-top))}
 .hero h1{font-size:9.8vw;margin:9px 0 10px}
 .hero-copy p{font-size:12px;line-height:1.35}
 .hero .actions{margin-top:12px}
 .hero-features{gap:9px 16px;bottom:calc(9px + env(safe-area-inset-bottom))}
 .feature .tile-art{aspect-ratio:365/95}
 .feature p{font-size:11px}
 .hero-quote{display:none}
 .hero-backdrop img{top:27%}
}
@media(max-width:650px) and (max-height:580px){
 .hero-copy p{display:none}.hero-copy{top:90px}.hero h1{font-size:9vw;margin:5px 0}
 .hero .actions{margin-top:6px}.hero-features .feature p{display:none}
 .hero-backdrop img{top:24%}.hero-features{gap:8px}
}
/* Mobile V12 — a centred cover, with room for the scene to breathe. */
@media(max-width:650px){
 .header{height:calc(66px + env(safe-area-inset-top));justify-content:center;padding:env(safe-area-inset-top) 18px 0}
 .brand{margin:0;text-align:center;font-size:11px;letter-spacing:.23em}
 .header .menu-toggle{position:absolute;right:12px;top:calc(11px + env(safe-area-inset-top));width:36px;min-width:36px;font-size:18px}
 .hero-copy{top:calc(93px + env(safe-area-inset-top));left:7%;right:7%;text-align:center;max-width:none}
 .hero-copy .eyebrow{font-size:7px;letter-spacing:.2em}
 .hero h1{font-size:clamp(34px,10.2vw,60px);line-height:1.1;margin:13px 0 15px;letter-spacing:-.035em}
 .hero-copy p{display:block;font-size:13px;line-height:1.5;max-width:300px;margin:0 auto;color:#cbc6bd}
 .hero .actions{flex-direction:column;gap:9px;margin-top:22px}
 .hero .primary.reference-button{width:220px;max-width:75vw}
 .watch-button{min-height:32px;font-size:9px;letter-spacing:.19em;display:block;padding:0}
 .watch-button .play-outline{display:none}
 .watch-button>span:last-child{padding:5px 0 6px;border-bottom-color:#d8b77a66}
 .hero-backdrop img{top:33%;left:-44%;width:170%;height:auto;mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 69%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 69%,transparent 100%)}
 .hero-shade{background:linear-gradient(180deg,#09121e00 36%,transparent 54%,#09121e40 72%,#09121ee8 86%,#09121e 100%)}
 .hero-quote{display:none}
 .price-widget{top:auto;bottom:calc(100px + env(safe-area-inset-bottom));left:12%;right:12%;justify-content:center;gap:8px;text-align:center;flex-wrap:wrap}
 .price-widget>span:first-child{order:0;flex-basis:100%;margin:0;text-align:center;font-size:8px;letter-spacing:.18em}
 .price-widget .price-symbol{order:1;font-size:11px;color:#c7bb9f}
 .price-widget strong{order:2;font-size:23px;font-weight:400;color:#e8d5b0}
 .price-widget small{order:3;text-align:center}
 .hero-features{left:8%;right:8%;bottom:calc(23px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:15px 12px;padding-top:17px;border-top:1px solid #dec28b30}
 .hero-features .feature,.hero-features .feature:nth-child(n){text-align:center;min-height:0;height:auto;aspect-ratio:auto!important}
 .hero-features .tile-art,.hero-features .feature p{display:none}
 .hero-features .feature h2{display:block;font-size:10px;font-weight:400;letter-spacing:.17em;line-height:1.4;color:#d3c9b7;margin:0}
}
@media(max-width:650px) and (max-height:740px){
 .hero-copy{top:calc(79px + env(safe-area-inset-top))}.hero h1{margin:9px 0 11px;font-size:9.7vw}
 .hero-copy p{font-size:12px;max-width:290px}.hero .actions{margin-top:15px;gap:5px}
 .hero .primary.reference-button{width:205px}.hero-backdrop img{top:34%;width:165%;left:-41%}
 .price-widget{bottom:calc(88px + env(safe-area-inset-bottom))}.price-widget strong{font-size:20px}
 .hero-features{bottom:calc(15px + env(safe-area-inset-bottom));gap:12px;padding-top:12px}
}
@media(max-width:650px) and (max-height:580px){
 .hero-copy{top:65px}.hero-copy .eyebrow{display:none}.hero h1{font-size:9vw;margin:5px 0 9px}.hero-copy p{font-size:11px;max-width:280px}
 .hero .actions{margin-top:9px;gap:2px}.hero .primary.reference-button{width:185px}
 .hero-backdrop img{top:33%}.price-widget{bottom:78px}.hero-features{bottom:12px;gap:9px;padding-top:9px}
}