/* Spacious product scenes: copy, admin iPad, consumer iPhone and customer photograph. */
html body .xp-hub:has(.app-showcase-list){padding-bottom:0!important}
html body .xp-hub>.xp-wrap:has(.app-showcase-list){width:100%!important;max-width:none!important}
html body .xp-hub>.xp-wrap:has(.app-showcase-list)>:is(h2,p){width:min(1240px,calc(100% - 80px));margin-inline:auto}
html body.xp-cleanup-hub .xp-hub>.xp-wrap:has(.app-showcase-list)>p,html body .xp-hub>.xp-wrap:has(.app-showcase-list)>p{margin-left:calc((100% - min(1240px,100% - 80px))/2)!important;margin-right:auto!important;width:auto!important;max-width:min(72ch,calc(100% - 80px))!important}
.app-showcase-list{margin-top:48px}
.app-showcase{--app-strong:color-mix(in srgb,var(--app-color),#000 32%);--app-light:color-mix(in srgb,var(--app-color),#fff 40%);position:relative;isolation:isolate;overflow:hidden;padding:90px 0;background:#0b0715 url('/img/showcase/shared/cosmic-galaxy.webp') center/cover;color:#fff}
.app-showcase:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 22% 52%,color-mix(in srgb,var(--app-color),transparent 78%),transparent 60%),linear-gradient(90deg,#0b0715a6,#0b0715d9)}
.app-showcase:nth-child(even){background-image:url('/img/showcase/shared/cosmic-supernova.webp')}
.app-showcase__layout{width:min(1240px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:54px}
.app-showcase__copy{container-type:inline-size;padding:36px 30px;border:1px solid color-mix(in srgb,var(--app-color),transparent 24%);border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--app-color),#14101b 91%),#0c0815);box-shadow:0 20px 65px color-mix(in srgb,var(--app-color),transparent 87%)}
.app-showcase__logo{display:block;max-width:100%;width:350px;height:auto;max-height:115px;object-fit:contain;object-position:left;margin-bottom:24px}
html body .app-showcase .app-showcase__copy h3{font:600 clamp(30px,3.1vw,44px)/1.18 Oswald,'Arial Narrow',sans-serif;color:#fff!important;letter-spacing:-.02em;margin:0}
html body .app-showcase .app-showcase__copy h3 span{color:var(--app-light)!important;-webkit-text-fill-color:currentColor;background:none}
html body .app-showcase .app-showcase__copy p{font:400 17px/1.75 Lato,Arial,sans-serif;color:#e9e5ec!important;margin:24px 0}
.app-showcase__proof{display:inline-flex;align-items:center;gap:10px;color:#fff!important;font:700 14px/1.5 Lato,Arial,sans-serif;text-underline-offset:4px}
.app-showcase__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
html body .app-showcase__actions a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 18px;border-radius:11px;border:1px solid var(--app-light);font:700 14px/1.4 Lato,Arial,sans-serif;color:#fff!important;text-decoration:none;background:var(--app-strong)}
html body .app-showcase__actions a:last-child{background:#ffffff0d;border-color:#ffffff66}
.app-showcase__actions a:hover{filter:brightness(1.15)}
.app-showcase :is(a,video):focus-visible{outline:3px solid var(--app-light);outline-offset:5px}
.app-showcase__media{position:relative;display:grid;grid-template-columns:1fr;gap:0;padding-left:32px}
.app-device{margin:0;min-width:0}
.app-device__frame{position:relative;background:#121319;border:8px solid #202127;border-radius:26px;padding:4px;box-shadow:0 0 0 1px #73747a,0 18px 45px #0006;overflow:hidden}
.app-device--admin .app-device__frame{aspect-ratio:4/3}
.app-device video{display:block;width:100%;height:100%;object-fit:contain;background:#fff;border-radius:12px}
.app-device--admin video{aspect-ratio:4/3}
.app-device--consumer{position:absolute;width:clamp(180px,17vw,240px);left:-76px;top:30%;z-index:3}
.app-device--consumer .app-device__frame{box-shadow:0 0 0 1px #73747a,18px 12px 30px #0007,6px 5px 12px #0005;border-width:6px;border-radius:30px;padding:2px;aspect-ratio:390/844}
.app-device--consumer .app-device__frame:after{content:'';position:absolute;top:7px;left:32%;width:36%;height:9px;background:#17181d;border-radius:20px;pointer-events:none}
.app-device--consumer video{aspect-ratio:390/844;border-radius:21px}
.app-showcase__photo{position:relative;z-index:2;width:78%;justify-self:end;margin:-38px 0 0;transform:translateX(38px)}
.app-showcase__photo :is(img,video){display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:20px;border:1px solid color-mix(in srgb,var(--app-color),transparent 40%)}
@media(max-width:1000px){.app-showcase__layout{width:calc(100% - 48px);gap:36px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.app-showcase__copy{padding:28px 22px}.app-showcase__media{padding-left:16px}.app-device--consumer{width:180px;left:-52px;top:30%}.app-showcase__photo{width:82%;transform:translateX(20px)}}
@media(max-width:900px){html body .xp-hub>.xp-wrap:has(.app-showcase-list)>:is(h2,p){width:calc(100% - 36px)}.app-showcase{padding:48px 0}.app-showcase__layout{width:calc(100% - 36px);grid-template-columns:1fr;gap:30px}.app-showcase__copy{padding:28px 24px;border-radius:22px}.app-showcase__media{padding-left:0;gap:0;padding-bottom:8px}.app-device--consumer{width:38%;min-width:120px;left:0;top:20%}.app-showcase__photo{width:66%;margin-top:-24px;transform:translateX(10px)}.app-device__frame{border-width:6px;border-radius:20px}.app-showcase__actions a{flex:1;padding-inline:12px}.app-showcase__logo{width:285px}.app-showcase__photo :is(img,video){aspect-ratio:4/3}}

/* Fine brand traces connect consecutive scenes without competing with the media. */
.app-showcase:not(:last-child):after{content:'';position:absolute;inset:auto 0 0;height:1px;z-index:4;background:linear-gradient(90deg,var(--app-color) 0%,var(--app-color) 45%,var(--app-next-color) 75%,var(--app-next-color) 100%);opacity:.8;pointer-events:none}
.app-showcase__connections{position:absolute;inset:0;z-index:-1;opacity:.28;pointer-events:none}
.app-showcase__connections svg{display:block;width:100%;height:100%;overflow:hidden}
@media(max-width:900px){.app-showcase__connections{opacity:.16}}

/* Equal icon boxes and letter heights; no width-fit shrinking in the hero cluster. */
.ex-hero .mf-mosaic{aspect-ratio:100/56}
.ex-hero .mf-tile{width:32%;aspect-ratio:2.7/1}
.ex-hero .mf-tile__in{padding:0;animation:app-logo-float 8s ease-in-out infinite;translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px)}
.ex-hero .mf-tile__logo{width:auto!important;max-width:none!important;height:clamp(22px,3.2vw,44px)!important;object-fit:contain;overflow:visible}
@keyframes app-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:980px){.ex-hero .mf-tile__logo{height:clamp(22px,7vw,44px)!important}}
@media(prefers-reduced-motion:reduce){.ex-hero .mf-tile__in{animation:none}}

/* The hero is a single catalog: the established eleven plus seven new product identities. */
.ex-hero .mf-mosaic--apps18{aspect-ratio:100/80}
.ex-hero .mf-mosaic--apps18 .mf-tile{width:32%;aspect-ratio:2.7/1}
@media(max-width:980px){.ex-hero .mf-mosaic--apps18{max-width:620px;aspect-ratio:100/82}}

/* Three deliberate collage arrangements; the product card stays on the left. */
.app-showcase[data-scene="phone-right"] .app-showcase__media{padding-right:64px}
.app-showcase[data-scene="phone-right"] .app-device--consumer{width:clamp(160px,16vw,230px);left:auto;right:-38px;top:14%}
.app-showcase[data-scene="phone-right"] .app-showcase__photo{width:86%;justify-self:start;transform:translateX(-12px)}
.app-showcase[data-scene="photo-top"] .app-showcase__photo{grid-row:1;margin:0 0 -38px}
.app-showcase[data-scene="photo-top"] .app-device--admin{grid-row:2}
.app-showcase[data-scene="photo-top"] .app-device--consumer{top:24%}
@media(max-width:1000px) and (min-width:901px){.app-showcase[data-scene="phone-right"] .app-device--consumer{right:-20px}.app-showcase[data-scene="phone-right"] .app-showcase__media{padding-right:40px}}
@media(max-width:900px){.app-showcase[data-scene="phone-right"] .app-showcase__media{padding-right:0}.app-showcase[data-scene="phone-right"] .app-device--consumer{width:38%;right:0;top:20%}.app-showcase[data-scene="phone-right"] .app-showcase__photo{width:66%;transform:translateX(-10px)}.app-showcase[data-scene="photo-top"] .app-showcase__photo{margin:0 0 -24px}.app-showcase[data-scene="photo-top"] .app-device--consumer{top:20%}}

/* Consistent mark and letter scale in every product card, including narrow phones. */
.app-showcase .app-showcase__logo{width:auto;max-width:none;height:clamp(56px,25cqw,96px);max-height:none}