.case-intro{position:relative;margin-bottom:0;z-index:3;align-items:center}
.case-intro h1{font-size:60px;line-height:1.05}
.phone-home-return{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;border:0;background:none;color:#373d34;font:inherit;font-size:14px;cursor:pointer}
.phone-home-return[hidden]{display:none}
.phone-home-return svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.phone-home-return:hover{color:#697343}
.single-phone-canvas{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:3}
.single-phone-fallback{position:fixed;border:4px solid #a39c90;border-radius:46px;background:#08090b;box-shadow:inset 0 0 0 1px #faf9f5a8,2px 1px 0 #5e5b55,0 13px 23px #25282416;pointer-events:none;z-index:1}
.single-phone-fallback:before{content:'';position:absolute;left:-6px;top:20%;height:13%;width:3px;border-radius:2px;background:#8f8b82}
.single-phone-fallback:after{content:'';position:absolute;right:-6px;top:28%;height:12%;width:3px;border-radius:2px;background:#8f8b82}
.single-phone-scene[data-renderer=webgl] .single-phone-fallback{visibility:hidden}
.single-display{position:fixed;z-index:2;overflow:clip;background:#173b45;isolation:isolate;font-family:-apple-system,BlinkMacSystemFont,'Arial','PingFang SC','Microsoft Yahei',sans-serif;--display-status:42px;--display-home:20px}
.single-status{height:var(--display-status);position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:2px 7% 0;color:white;z-index:4;pointer-events:none;background:transparent}
.single-time{font-size:12px;font-weight:650;letter-spacing:-.03em}
.single-island{width:29%;height:60%;max-width:106px;background:#050505;border-radius:30px;position:absolute;left:50%;top:21%;transform:translateX(-50%);box-shadow:inset 0 0 0 1px #171717}
.single-island:after{content:'';position:absolute;right:10%;top:35%;width:8%;aspect-ratio:1;background:#11141e;border-radius:50%;box-shadow:inset 0 0 0 2px #0c0d13}
.single-indicators{display:flex;align-items:center;gap:4px}
.single-indicators svg{width:15px;height:12px;fill:currentColor}
.single-indicators svg:last-child{width:23px}
.single-desktop{position:absolute;inset:0;background:#07090b url('../../assets/social-wallpaper/liquid-poster.jpg') center/cover;transform-origin:center;display:flex;align-items:center;flex-direction:column;padding-top:calc(var(--display-status) + 23px)}
.desktop-clock{display:flex;align-items:center;flex-direction:column;color:#f8fbf9;text-shadow:0 1px 8px #07252b22}
.desktop-clock>span{font-size:14px;font-weight:500}
.desktop-clock>strong{font-size:clamp(52px,9svh,86px);font-weight:550;line-height:1.2;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.desktop-apps{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 14px;margin-top:38px}
.desktop-apps>button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 0 8px;background:none;border:0;cursor:pointer;min-width:0;color:white;text-shadow:0 1px 4px #001d26a8;font-family:inherit;font-size:12px;line-height:1.2}
.desktop-apps img{display:block;width:min(100%,57px);aspect-ratio:1;border-radius:25%;box-shadow:0 3px 10px #092d3b25;object-fit:contain;background:white}
.desktop-apps [data-launch=island] img{background:#050505;padding:9px}
.desktop-apps>button:hover img{filter:brightness(1.08)}
.desktop-apps>button:active img{filter:brightness(.85)}
.desktop-apps>button:focus-visible{outline:2px solid white;outline-offset:5px;border-radius:14px}
.desktop-page-dot{position:absolute;bottom:calc(var(--display-home) + 22px);width:6px;height:6px;border-radius:50%;background:#ffffffd1}
.desktop-home-indicator{position:absolute;width:34%;height:4px;bottom:7px;left:33%;border-radius:4px;background:#fff;z-index:5;pointer-events:none}
.single-app-window{position:absolute;top:var(--display-status);bottom:var(--display-home);left:0;right:0;background:#fff;z-index:2;overflow:clip}
.single-app-window[hidden]{display:none}
.single-live-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.single-display[data-app=ping],.single-display[data-app=meet]{background:#fff}
.single-display[data-app=ping] .single-status,.single-display[data-app=meet] .single-status{background:#fff;color:#121212}
.single-display[data-app=voice],.single-display[data-app=voice] .single-status{background:#1c1d22;color:#f5f5f5}
.single-display[data-app=island],.single-display[data-app=island] .single-status{background:#080808;color:white}
.single-display[data-app] .desktop-home-indicator{display:none}
.single-home-gesture{position:absolute;bottom:0;left:0;width:100%;height:var(--display-home);border:0;background:transparent;z-index:5;cursor:pointer;padding:0;display:grid;align-items:end;justify-items:center}
.single-home-gesture[hidden]{display:none}
.single-home-gesture>span{width:34%;height:4px;background:#111;border-radius:5px;margin-bottom:7px}
.single-display[data-app=island] .single-home-gesture>span,.single-display[data-app=voice] .single-home-gesture>span{background:white}
.single-home-gesture:focus-visible{outline:2px solid #89946b;outline-offset:-3px}
.single-load-state{position:absolute;inset:0;background:#fff;color:#26332a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:3;padding:20px;text-align:center}
.single-load-state[hidden]{display:none}
.single-load-state img{width:52px;height:52px;border-radius:13px}
.single-load-state strong{font-size:22px}
.single-load-state p{font-size:13px;line-height:1.5;margin:0}
.single-load-state button{border:0;border-radius:24px;background:#263b2e;color:white;padding:12px 20px;min-height:44px;font:inherit;font-size:14px;cursor:pointer}
.single-load-state button[hidden]{display:none}
.single-display[data-app=voice] .single-load-state{background:#1c1d22;color:#f5f5f5}
.single-display[data-app=island] .single-load-state{background:#080808;color:#f5f5f5}
.phone-launch-error{position:absolute;left:50%;top:45%;transform:translateX(-50%);z-index:6;background:#fff;color:#30382d;padding:20px;max-width:300px;box-shadow:0 4px 20px #0001}
.phone-launch-error[hidden]{display:none}
@media(max-width:1100px) and (min-width:701px){.case-intro h1{font-size:45px}
.phone-home-return{position:absolute;top:108px;left:0}}
@media(max-width:700px){.case-intro{width:calc(100% - 40px);margin:0 auto 10px;min-height:34px;gap:8px}
.case-intro h1{font-size:26px;line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.case-intro h1 br{display:none}
.phone-home-return{font-size:12px;gap:3px;min-height:34px;white-space:nowrap}
.phone-home-return svg{width:15px;height:15px}
.desktop-apps{padding:0 12px;gap:5px;margin-top:30px}
.desktop-apps img{width:min(100%,53px)}
.desktop-apps>button{font-size:11px;gap:7px}
.desktop-clock>span{font-size:12px}
.desktop-clock>strong{font-size:clamp(46px,9svh,76px)}
.single-time{font-size:11px}
.single-indicators{gap:3px}
.single-indicators svg{width:12px;height:10px}
.single-indicators svg:last-child{width:20px}
.single-home-gesture>span,.desktop-home-indicator{height:3px}}
@media(max-width:359px){.case-intro{width:calc(100% - 28px)}
.case-intro h1{font-size:23px}
.phone-home-return{font-size:11px}
.desktop-apps{padding:0 10px;gap:4px;margin-top:24px}
.desktop-apps>button{font-size:10px}
.single-desktop{padding-top:calc(var(--display-status) + 15px)}}
.single-display{user-select:none;-webkit-user-select:none}
.single-display .desktop-apps button{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.desktop-app-icon{width:min(100%,57px);aspect-ratio:1;background:var(--icon-color);border-radius:22.5%;display:block;overflow:hidden;box-shadow:0 2px 5px #00121d24;flex:none}
.desktop-apps img{width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;object-fit:contain;-webkit-user-drag:none}
.desktop-apps [data-launch=island] img{padding:0}
.desktop-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.desktop-wallpaper.is-static{visibility:hidden}
.single-desktop:after{content:'';position:absolute;inset:0;background:linear-gradient(#0000000a,transparent 50%,#00000012);pointer-events:none;z-index:0}
.desktop-clock,.desktop-apps,.desktop-page-dot{z-index:1;position:relative}
.desktop-page-dot{position:absolute}
.desktop-apps img{filter:none}
.desktop-apps>button:hover img{filter:brightness(1.05)}
.phone-enter-hit{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:absolute;inset:0;z-index:9;border:0;background:transparent;color:transparent;cursor:grab;padding:0;border-radius:inherit}
.phone-enter-hit[hidden]{display:none}
.phone-enter-hit:focus-visible{outline:3px solid #d9e69f;outline-offset:-6px}
.phone-app-open{overflow:hidden}
.single-experience{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden;animation:none!important;color:#22271f;--phone-shade:0}
.single-experience[open]{display:block;animation:none!important}
.single-experience::backdrop{background:rgba(255,255,255,var(--phone-shade))}
.single-experience .single-phone-fallback{visibility:visible}
.single-experience[data-renderer=webgl] .single-phone-fallback{visibility:hidden}
.single-experience-header{position:absolute;z-index:6;inset:0 0 auto;min-height:55px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:7px 24px;gap:10px}
.single-experience-header>button{justify-self:start;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 0;border:0;background:none;color:#30382c;font:inherit;font-size:14px;cursor:pointer}
.single-experience-header>button:last-child{justify-self:end}
.single-experience-header>button[hidden]{visibility:hidden;display:flex}
.single-experience-header h2{font-size:15px;font-weight:500;margin:0}
.single-experience .single-display{user-select:auto;-webkit-user-select:auto}
.single-load-state{gap:22px;padding:26px}
.launch-brand{display:flex;flex-direction:column;align-items:center;gap:15px}
.single-load-state .launch-brand img{width:70px;height:70px;border-radius:22.5%}
.single-load-state .launch-brand strong{font-size:25px;letter-spacing:-.035em;font-weight:650}
.launch-spinner{display:block;width:19px;height:19px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.4;animation:app-launch-spin .8s linear infinite}
.single-load-state>p:empty{display:none}
.single-load-state>p{font-size:13px;color:#78816f;max-width:220px}
.single-display[data-launch=error] .launch-spinner{display:none}
.single-display[data-app=voice] .launch-brand strong{color:#f5f5f8}
.single-display[data-app=island] .launch-brand img{padding:0;background:#080808}
.single-display[data-app=island] .single-load-state>p,.single-display[data-app=voice] .single-load-state>p{color:#adb3ac}
.single-live-frame{opacity:0}
.single-display[data-launch=active] .single-live-frame{opacity:1}
.social-product-tip{position:fixed;inset:auto;z-index:40;margin:0;padding:25px;border:1px solid #dedfd9;border-radius:13px;background:white;color:#272c24;box-shadow:0 14px 48px #1c271b1c;width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;animation:product-tip-in .18s ease-out;font-family:var(--font)}
.social-product-tip::backdrop{background:transparent}
.social-product-tip header{display:flex;gap:12px;align-items:center}
.social-product-tip header>img{width:43px;height:43px;border-radius:12px}
.social-product-tip header>div{flex:1;min-width:0}
.social-product-tip header small{font-size:11px;color:#7c8177;display:block;margin-bottom:4px}
.social-product-tip h2{margin:0;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.025em}
.product-tip-close{align-self:start;border:0;background:none;color:#737b6b;width:32px;height:32px;font-size:25px;cursor:pointer}
.product-tip-intro{font-size:13px;color:#747c6d;margin:17px 0 22px;line-height:1.7}
.social-product-tip dl{margin:0}
.social-product-tip dl>div{padding:13px 0;border-bottom:1px solid #eceee7}
.social-product-tip dl>div:last-child{border:0}
.social-product-tip dt{font-size:14px;font-weight:550;margin-bottom:4px}
.social-product-tip dd{font-size:12px;line-height:1.8;color:#777f70;margin:0}
.social-product-tip footer{margin-top:18px}
.social-product-tip footer>p{font-size:10px;line-height:1.7;color:#909686;margin:0 0 15px}
.product-tip-launch{width:100%;min-height:44px;border:0;border-radius:30px;background:#232c20;color:#fff;font:inherit;font-size:13px;cursor:pointer;padding:12px 18px}
.product-tip-launch:hover{background:#3a4633}
@keyframes app-launch-spin{to{transform:rotate(360deg)}}
@keyframes product-tip-in{from{opacity:0;translate:0 5px}
to{opacity:1;translate:0 0}}
@media(max-width:700px){.desktop-app-icon{width:min(100%,53px)}
.single-experience-header{padding:7px 15px}
.single-experience-header>button{font-size:12px;gap:5px}
.single-experience-header h2{font-size:14px}
.social-product-tip{padding:21px}
.social-product-tip h2{font-size:19px}
.single-desktop{padding-top:calc(var(--display-status) + 23px)}}
@media(max-width:359px){.single-experience-header>button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.launch-spinner,.social-product-tip{animation:none}
.desktop-wallpaper{visibility:hidden}}
.single-display{container-type:inline-size}
.desktop-clock>strong{font-size:clamp(40px,22cqw,86px)}
.social-product-tip header>img[src*="/social-community/"]{background:#080808;padding:6px}

/* Mobile-first: one horizontal composition; neutral page colors. */
.social-page{--paper:#fff;--ink:#111;--social-accent:#111;--social-muted:#666;background:#fff;color:#111}
.social-page .build-header{color:#111}.social-page .menu-orb{background:#f3f3f3;color:#111}
.social-page .mobile-dock{background:#f5f5f5;color:#111;box-shadow:none;backdrop-filter:none}
.social-cases{display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);align-items:center;min-height:100svh;padding:80px 0 94px;background:#fff;color:#111;overflow:clip}
.social-offer{position:relative;z-index:3;min-width:0;padding:0 8px 0 18px}
.social-offer h1{margin:0 0 22px;font-size:clamp(22px,6.2vw,28px);line-height:1.14;letter-spacing:-.045em;font-weight:400;white-space:normal}
.social-offer h1 br{display:block}
.social-price{display:flex;align-items:baseline;gap:4px;margin:0;color:#111;line-height:1;white-space:nowrap}
.social-price strong{font-size:clamp(42px,13.4vw,60px);font-weight:400;letter-spacing:-.075em;flex:none}
.social-price>span{font-size:12px;display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.social-price small{font-size:10px;margin:0}
.social-price-consult{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;margin-top:20px;padding:10px 14px;border:0;border-radius:30px;background:#111;color:#fff;white-space:nowrap;font:inherit;font-size:12px;cursor:pointer}
.social-price-consult>span{font-size:16px}.social-price-consult:hover{background:#333}
.social-products{display:flex;flex-direction:column;gap:0;max-width:none;margin-top:30px}
.social-products h2{font-size:10px;font-weight:400;color:#777;margin:0 0 10px;line-height:1.4}
.social-products>button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;min-height:44px;padding:8px 0;border:0;border-radius:0;background:none;color:#222;font:inherit;font-size:clamp(12px,3.3vw,14px);letter-spacing:-.02em;text-align:left;cursor:pointer}
.social-products>button>span{white-space:nowrap}
.social-products svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25;opacity:.55}
.social-products>button:after{content:'';position:absolute;bottom:2px;left:0;width:100%;height:1px;background:#999;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.social-products>button:is(:hover,:focus-visible,[aria-expanded=true]):after{transform:scaleX(1)}
.single-phone-scene{position:relative;align-self:center;width:100%;height:calc(100svh - 174px);min-height:400px;max-height:850px;margin:0;min-width:0}
.single-phone-scene .single-status{padding-inline:7%;padding-top:1px}.single-phone-scene .single-time{font-size:clamp(6px,3.5cqw,11px)}
.single-phone-scene .single-indicators{gap:2px}.single-phone-scene .single-indicators svg{width:clamp(7px,4cqw,12px);height:9px}.single-phone-scene .single-indicators svg:last-child{width:clamp(12px,6.5cqw,20px)}
.single-phone-scene .single-desktop{padding-top:calc(var(--display-status) + 15px)}
.single-phone-scene .desktop-clock>span{font-size:clamp(8px,3.5cqw,12px)}
.single-phone-scene .desktop-apps{padding-inline:10px;gap:4px;margin-top:20px}
.single-phone-scene .desktop-apps>button{font-size:clamp(8px,3.3cqw,11px);gap:6px}
.social-product-tip{background:#fff;color:#111;border-color:#ddd;box-shadow:0 14px 48px #0000001a}
.social-product-tip header small{color:#777}.social-product-tip h2,.social-product-tip dt{color:#222}
.product-tip-close{color:#777}.product-tip-intro,.social-product-tip dd{color:#666}.social-product-tip dl>div{border-color:#eee}
.social-product-tip footer>p{color:#888}.product-tip-launch{background:#111;color:#fff}.product-tip-launch:hover{background:#333}
.single-experience-header>button{color:#333}.single-home-gesture:focus-visible{outline-color:#888}.phone-enter-hit:focus-visible{outline-color:#888}
.single-load-state{color:#222}.single-load-state>p{color:#777}.single-load-state button{background:#111}
.phone-launch-error{color:#333;box-shadow:0 4px 20px #0000001a}
@media(max-width:359px){.social-offer{padding-left:14px;padding-right:6px}.social-offer h1{font-size:23px;margin-bottom:21px}.social-price-consult{font-size:11px;padding-inline:12px}.social-products{margin-top:26px}.social-products svg{width:12px;height:12px}.single-phone-scene .desktop-apps{padding-inline:8px;gap:3px}}
@media(min-width:701px){.social-cases{padding:100px 0 32px}.social-offer{padding-left:38px;padding-right:26px}.social-offer h1{font-size:35px;margin-bottom:35px}.social-offer h1 br{display:none}.social-price{gap:8px}.social-price strong{font-size:88px}.social-price>span{font-size:21px;gap:5px}.social-price small{font-size:16px}.social-price-consult{min-width:180px;min-height:52px;margin-top:27px;padding:14px 27px;font-size:15px;gap:30px}.social-price-consult>span{font-size:20px}.social-products{margin-top:36px;max-width:360px}.social-products h2{font-size:13px;margin-bottom:14px}.social-products>button{font-size:21px;min-height:53px;padding:9px 0;gap:20px}.social-products svg{width:20px;height:20px}.single-phone-scene{height:calc(100svh - 132px);min-height:600px}.single-phone-scene .single-desktop{padding-top:calc(var(--display-status) + 23px)}.single-phone-scene .desktop-apps{padding-inline:14px;gap:6px;margin-top:38px}}
@media(min-width:1101px){.social-offer{padding-left:max(56px,calc((100vw - 1328px)/2))}.social-offer h1{font-size:clamp(34px,3.5vw,54px)}.social-price strong{font-size:clamp(82px,8vw,120px)}.social-price>span{font-size:25px}.social-price small{font-size:18px}.social-products>button{font-size:24px}}

.single-display[data-app=ping][data-ping-theme=dark],.single-display[data-app=ping][data-ping-theme=dark] .single-status,.single-display[data-app=ping][data-ping-theme=dark] .single-load-state{background:#141719;color:#edf0f2}
.single-display[data-app=ping][data-ping-theme=dark] .single-home-gesture span{background:#edf0f2}

/* Keep the live App painted while its window returns to the Home Screen icon. */
.single-display[data-app-transition] .single-app-window,
.single-display[data-app-transition] .single-desktop{will-change:transform,opacity}
.single-display[data-app=voice] .single-app-window{background:#1c1d22}
.single-display[data-app=island] .single-app-window{background:#080808}
.single-display[data-app][data-app-transition=closing] .single-status{background:transparent;color:#fff;transition:background-color .3s,color .3s}
.single-display[data-app-transition=closing] .single-home-gesture>span{background:#fff;transition:background-color .3s}
.app-return-icon{position:absolute;display:block;left:0;top:50%;width:100%;height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:22.5%;background:var(--icon-color);overflow:hidden;opacity:0;z-index:5;pointer-events:none}
.app-return-icon>img{display:block;width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.single-display[data-app-transition=closing] .single-status,.single-display[data-app-transition=closing] .single-home-gesture>span{transition:none}}

/* Physical exhibit interaction; live App surfaces keep their normal touch behavior. */
.single-display{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.single-phone-scene[data-grab=held] .phone-enter-hit,.single-phone-scene[data-grab=dragging] .phone-enter-hit{cursor:grabbing}
.single-phone-scene .single-display{user-select:none;-webkit-user-select:none}
.single-ground-shadow{position:fixed;height:9px;border-radius:50%;background:#26231f;z-index:0;pointer-events:none}
.single-ground-shadow[hidden]{display:none}

/* Third-party model attribution stays inside the existing service menu. */
.phone-model-credit{margin:8px 0 14px;color:#737373;font-size:12px;line-height:1.5}.phone-model-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Games use the same portrait phone geometry as social apps. */
.desktop-apps [data-launch=huuuge] img{object-fit:contain;padding:5px;background:#ec0038}
.desktop-apps [data-launch=huuuge]{margin-top:10px}
.single-display[data-app=huuuge],.single-display[data-app=huuuge] .single-app-window,.single-display[data-app=huuuge] .single-status,.single-display[data-app=huuuge] .single-load-state{background:#270b10;color:#fff}
.single-display[data-app=huuuge] .single-load-state>p{color:#e5d9f5}
.single-display[data-app=huuuge] .single-load-state button{background:#fff;color:#25133c}
.single-display[data-app=huuuge] .launch-brand img{background:#ec0038;object-fit:contain;padding:6px}
.single-display[data-app=huuuge] .single-live-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;transform:none;background:#270b10}
.single-display[data-app=huuuge] .single-home-gesture>span{background:#fff}

/* Portrait game follows the same native screen geometry as the social apps. */
.single-display[data-app=huuuge] .single-live-frame{transform:none;inset:0;background:#270b10}
.single-display[data-app=huuuge] .single-load-state,.single-display[data-app=huuuge] .single-status{background:#270b10}