/* Final product polish: full-bleed photography, restrained type and natural media scale. */
.qx-header .qx-brand img,
.brand-logo img,
.wordmark img,
.footer .brand img,
.footer-brand img{width:auto;height:43px;max-width:none;object-fit:contain}
.wordmark,.footer-brand .wordmark{width:auto}

/* Content retains its 1440px limit while hero photographs reach both viewport edges. */
body[data-page="landing"] .hero-gallery{inset:0;width:100%;height:100%;max-width:none;transform:none}
body[data-page="landing"] .hero-gallery img{object-position:60% center}
body[data-page="landing"] .hero-main{min-height:min(680px,82svh);padding-block:80px 100px}
body[data-page="landing"] .hero h1{font-size:clamp(34px,4.45vw,66px);line-height:1.1;letter-spacing:-.052em;max-width:850px;width:100%;text-wrap:balance}
body[data-page="landing"] .hero::after{background:linear-gradient(90deg,rgba(8,8,8,.91),rgba(8,8,8,.76) 32%,rgba(8,8,8,.32) 65%,rgba(8,8,8,.08)),linear-gradient(0deg,#080808,transparent 36%)}
.v5-catalog>.hero{position:relative;isolation:isolate;display:block;max-width:none;min-height:0;overflow:hidden;background:#090909}
.v5-catalog>.hero .hero-art{position:absolute;inset:0;z-index:-2;min-height:0;max-height:none;width:100%;height:100%;pointer-events:none}
.v5-catalog>.hero .hero-art img{height:100%;width:33.3333%;object-fit:cover;filter:brightness(.8)}
.v5-catalog>.hero .hero-art:after{display:none}
.v5-catalog>.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(9,9,9,.94),rgba(9,9,9,.8) 34%,rgba(9,9,9,.32) 70%,rgba(9,9,9,.1)),linear-gradient(0deg,#090909,transparent 35%)}
.v5-catalog>.hero .hero-copy{width:min(1440px,calc(100% - 2*var(--content-gutter)));margin-inline:auto;padding:76px 0 85px;min-height:580px;position:relative;z-index:1}
.v5-catalog .hero-copy h1{font-size:clamp(34px,4.15vw,62px);line-height:1.12;letter-spacing:-.048em;max-width:850px;width:100%;text-wrap:balance;margin-block:24px}
.v5-catalog .hero-copy p{max-width:590px}

/* Headings remain complete: the small typography module fits text, never clips it. */
h1,h2,h3{text-wrap:balance}
.how-head h2{font-size:clamp(30px,3.1vw,48px)}
.statement h2,.inside-header h2,.community-head h2,.create h2,.explore-wrap h2{font-size:clamp(32px,3.5vw,54px)}
.get-app h2{font-size:clamp(36px,4.1vw,62px)}
.audience-intro h2{font-size:clamp(34px,3.5vw,54px)}

/* A shared cover fits a laptop's visible area instead of forcing a full-page portrait. */
@media(min-width:951px){
 .v5-share .shared-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;align-items:start}
 .v5-share .shared-photo{aspect-ratio:auto;min-height:0;height:auto;max-height:calc(100svh - 175px);margin-block:12px;display:flex;align-items:center;justify-content:center;background:transparent}
 .v5-share .shared-photo>img{position:relative;inset:auto;width:100%;height:auto;max-height:calc(100svh - 175px);object-fit:contain}
 .v5-share .shared-photo:after{display:none}
 .v5-share .shared-photo .corner{bottom:15px;left:24px;text-shadow:0 1px 6px #000}
 .v5-share .shared-copy{padding:38px clamp(30px,4.3vw,68px);min-height:0}
 .v5-share .shared-copy h1{font-size:clamp(32px,3.6vw,54px);line-height:1.12}
 .v5-share .shared-copy .description{font-size:16px;margin-block:18px;line-height:1.65}
 .v5-share .quest-metadata{padding-block:16px}
 .v5-share .shared-note{margin-block:9px}
}

/* Real app media stands on its own: no square panel and no decorative yellow circle. */
.create .create-image{min-height:0;background:transparent;padding:15px 0;overflow:visible;align-items:center}
.create .create-image:after{content:none;display:none}
.create .create-image img.authentic-screen{height:min(560px,68svh);width:auto;max-width:100%;object-fit:contain;border-radius:30px;transform:rotate(3deg);filter:drop-shadow(0 20px 24px #00000024);transition:transform .3s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.create .create-image:hover img.authentic-screen{transform:translateY(-6px) rotate(0)}}
@media(max-width:950px) and (min-width:651px){
 .v5-share .shared-photo{height:min(500px,calc(100svh - 170px));min-height:0;max-height:none;aspect-ratio:auto}
 .v5-share .shared-photo>img{object-fit:contain}
}
@media(max-width:760px){
 body[data-page="landing"] .hero-main{min-height:690px;padding-block:58px 95px}
 body[data-page="landing"] .hero-gallery img{object-position:88% center}
 body[data-page="landing"] .hero::after{background:linear-gradient(90deg,#080808da,#08080870),linear-gradient(0deg,#080808,transparent 35%)}
 body[data-page="landing"] .hero h1{font-size:clamp(32px,8.7vw,42px);margin-block:22px 20px}
 body[data-page="landing"] .hero-intro{max-width:430px}
 .v5-catalog>.hero .hero-copy{width:calc(100% - 42px);min-height:550px;padding-block:55px 65px}
 .v5-catalog .hero-copy h1{font-size:clamp(32px,8.4vw,42px)}
 .v5-catalog>.hero:after{background:linear-gradient(90deg,#090909eb,#0909098c),linear-gradient(0deg,#090909,transparent 35%)}
 .v5-share .shared-photo{height:min(520px,calc(100svh - 170px));min-height:0;max-height:none;aspect-ratio:auto;background:#0c0c0c}
 .v5-share .shared-photo>img{object-fit:contain}
 .v5-share .shared-copy h1{font-size:clamp(30px,8.4vw,42px)}
 .create .create-image img.authentic-screen{height:min(480px,64svh);border-radius:27px;transform:rotate(2deg)}
}
@media(prefers-reduced-motion:reduce){.create .create-image img.authentic-screen{transition:none;transform:none}}

/* Keep the swipe rail within the mobile canvas: its gutter is 21px, not 24px. */
@media(max-width:760px){
 .featured-screens{margin-inline:calc(-1 * var(--gutter,21px));padding-inline:var(--gutter,21px);max-width:calc(100% + 2 * var(--gutter,21px))}
}

/* Catalog controls share the content edges; divider rules span the viewport. */
.v5-catalog #collection>.filterbar{width:100%;max-width:none;margin-inline:0;padding-inline:max(var(--content-gutter),calc((100% - 1440px)/2));box-sizing:border-box}
.v5-catalog #collection>.section-head,.v5-catalog #collection>.catalog-grid{width:min(1440px,calc(100% - 2 * var(--content-gutter)));max-width:1440px;margin-inline:auto;padding-inline:0}

/* Shared challenge: portrait cover anchored left and an unboxed information column. */
.v5-share .shared-copy{background:transparent}
@media(min-width:951px){
 .v5-share>.shared-hero{grid-template-columns:minmax(0,min(48%,calc((100svh - 175px) * .8))) minmax(0,1fr);align-items:start}
 .v5-share .shared-photo{width:100%;height:auto;aspect-ratio:4/5;max-height:none;margin-block:12px;display:block}
 .v5-share .shared-photo>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
}
@media(max-width:950px){
 .v5-share .shared-photo{width:100%;max-width:calc((100svh - 170px) * .8);height:auto;aspect-ratio:4/5;max-height:none;margin-right:auto}
 .v5-share .shared-photo>img{object-fit:cover}
}

/* Full-width fact dividers; preserve inner information alignment. */
.v5-share .shared-facts{width:100%;border-block:1px solid #333;margin-block:16px}
.v5-share .shared-facts .fact-strip{border:0;margin-block:0}

.quest-location{padding-block:40px 32px}
.quest-location h2{margin-block:12px 24px;font-size:clamp(25px,3vw,38px)}
.quest-location-map{height:400px;width:100%;background:#171717;isolation:isolate;z-index:0;border-radius:18px;overflow:hidden}
.quest-location-map .leaflet-tile-pane{filter:grayscale(1) brightness(.65) contrast(1.15)}
.quest-location-map .leaflet-bar{border:0;box-shadow:0 2px 10px #0006}
.quest-location-map .leaflet-bar a{background:#171717;color:#FFD400;border-color:#444}
.quest-location-map .leaflet-control-attribution{background:#111e;color:#aaa;font-size:10px}
.quest-location-map .leaflet-control-attribution a{color:#ddd}
@media(max-width:650px){.quest-location-map{height:310px;border-radius:12px}}

.web-participation-note{margin:8px 0 22px;padding-left:16px;border-left:2px solid var(--yellow);max-width:650px}
.web-participation-note strong{font-size:13px;color:var(--yellow)}
.web-participation-note p{margin:7px 0 0;font-size:14px;line-height:1.65;color:#bcbcbc}

/* Full-resolution collage; both panel edges share the same slope. */
.v5-catalog>.hero .hero-collage{display:block;background:#090909;overflow:hidden}
.v5-catalog>.hero .hero-collage .collage-panel{position:absolute;inset:0}
.v5-catalog>.hero .hero-collage .panel-girl{clip-path:polygon(0 0,76% 0,66% 100%,0 100%)}
.v5-catalog>.hero .hero-collage .panel-dog{clip-path:polygon(calc(76% + 12px) 0,100% 0,100% 100%,calc(66% + 12px) 100%)}
.v5-catalog>.hero .hero-collage img{position:absolute;top:0;height:100%;max-width:none;filter:none;object-fit:cover}
.v5-catalog>.hero .hero-collage .collage-girl{left:0;width:76%;object-position:70% center;clip-path:none}
.v5-catalog>.hero .hero-collage .collage-dog{right:0;width:34%;object-position:36% center;clip-path:none}
.v5-catalog>.hero:after{background:linear-gradient(90deg,rgba(9,9,9,.93),rgba(9,9,9,.78) 25%,rgba(9,9,9,.4) 44%,rgba(9,9,9,.06) 65%,transparent 80%),linear-gradient(0deg,rgba(9,9,9,.28),transparent 30%)}
@media(max-width:760px){
 .v5-catalog>.hero .hero-collage .panel-girl{clip-path:polygon(0 0,70% 0,60% 100%,0 100%)}
 .v5-catalog>.hero .hero-collage .panel-dog{clip-path:polygon(calc(70% + 8px) 0,100% 0,100% 100%,calc(60% + 8px) 100%)}
 .v5-catalog>.hero .hero-copy{padding-bottom:320px;min-height:800px}
 .v5-catalog>.hero .hero-collage{top:auto;bottom:0;height:290px}
 .v5-catalog>.hero .hero-collage .collage-girl{width:70%;object-position:75% center;clip-path:none}
 .v5-catalog>.hero .hero-collage .collage-dog{width:44%;object-position:35% center;clip-path:none}
 .v5-catalog>.hero:after{background:linear-gradient(180deg,#090909 0%,#090909 58%,rgba(9,9,9,.16) 76%,transparent 100%)}
}