.social-page{--social-accent:#cedb72;--social-muted:#666660}
.social-page input,.social-page textarea{font:inherit}
.skip{position:fixed;top:-100px;left:24px;z-index:20;padding:12px 20px;background:var(--paper);color:var(--ink)}
.skip:focus{top:16px}
.social-cases{padding:140px 0 60px;background:var(--paper);color:var(--ink);min-height:100svh}
.social-page .build-header{color:var(--ink)}
.social-page .build-header .motion-button{color:#666}
.case-intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.case-intro h1{font-size:clamp(54px,7vw,96px);font-weight:400;line-height:1.08;letter-spacing:-.06em;margin:0}
.case-intro p{font-size:18px;line-height:1.7;margin:0}
.case-gallery{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(24px,calc((100vw - 1224px)/2));position:relative}
.case-gallery::-webkit-scrollbar{display:none}
.social-case{flex:none;width:280px;height:calc(280px * 640 / 360 + 60px);position:relative;overflow:hidden;scroll-snap-align:center;background:white;border-radius:10px;box-shadow:none;border:1px solid #d6d6cf} /* taste-skill-ignore: App preview frame follows the existing $500 case presentation. */
.case-preview{position:absolute;inset:0 auto auto 0;transform:scale(var(--preview-scale,.7778));transform-origin:top left;width:360px;height:640px;overflow:hidden}
.case-preview .social-app{height:640px}
.cover-action{display:flex;align-items:end;justify-content:space-between;position:absolute;inset:0;padding:0 18px 16px;background:transparent;border:0;text-align:left;color:var(--ink);font-size:18px}
.cover-action:after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:white;z-index:-1}
.cover-action small{font-size:13px;font-weight:400;color:#686862;margin-left:12px}
.cover-action>span:last-child{font-size:24px}
.cover-action>span{background:white}
.case-gallery-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.case-gallery-footer p{margin:0;font-size:17px}
.case-gallery-footer small{display:block;font-size:13px;color:#686862;margin-top:6px}
.gallery-pagination{display:flex;align-items:center;gap:14px;font-size:14px;white-space:nowrap}
.gallery-pagination button{width:44px;height:44px;border:1px solid #cccfc4;border-radius:50%;background:none;font-size:22px;color:var(--ink)} /* taste-skill-ignore: Pagination controls need a visible touch target on the shared light background. */
.project-section{padding-top:90px;padding-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:72px}
.project-section h2{margin:0;font-size:clamp(36px,4.8vw,64px);line-height:1.12;font-weight:400;letter-spacing:-.05em}
.project-body>p:first-child{margin:0 0 32px;font-size:20px;line-height:1.85;max-width:32ch}
.project-body .pill-button{min-height:52px;font-size:16px;gap:36px;background:var(--paper);color:var(--ink)}
.contact-note{font-size:14px;color:#b0b3b9;margin:24px 0 0}
.social-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:40px;font-size:14px}
@media(max-width:700px){.social-page .page-location{display:none}
.social-page .build-header{padding-top:20px}
.social-cases{padding:104px 0 32px;min-height:100svh}
.case-intro{align-items:end;margin-bottom:26px;gap:16px}
.case-intro h1{font-size:44px;line-height:1.12;letter-spacing:-.05em}
.case-intro p{font-size:13px;line-height:1.75;padding-bottom:3px}
.case-gallery{gap:20px;padding-left:calc((100vw - min(74vw,300px))/2);padding-right:calc((100vw - min(74vw,300px))/2)}
.social-case{width:min(74vw,300px);height:calc(min(74vw,300px) * 640 / 360 + 56px);border-radius:10px;flex:none} /* taste-skill-ignore: App preview frame follows the existing $500 case presentation. */
.cover-action{padding:0 16px 13px;font-size:17px}
.cover-action small{font-size:12px;margin-left:8px}
.case-gallery-footer{margin-top:20px;gap:12px}
.case-gallery-footer p{font-size:14px}
.case-gallery-footer small{font-size:11px;margin-top:4px}
.gallery-pagination{gap:10px;font-size:12px}
.gallery-pagination button{width:40px;height:44px;font-size:20px} /* taste-skill-ignore: Pagination controls need a visible touch target on the shared light background. */
.project-section{display:block;padding-top:56px;padding-bottom:56px}
.project-section h2{font-size:34px;letter-spacing:-.05em}
.project-body{margin-top:28px}
.project-body>p:first-child{font-size:16px;line-height:1.85}
.social-footer{padding-bottom:calc(108px + env(safe-area-inset-bottom));font-size:13px}
.social-footer>span{display:none}
.social-app-viewer{inset:0;margin:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
.app-viewer-bar{padding-top:max(4px,env(safe-area-inset-top))} /* taste-skill-ignore: App viewer chrome separates the return control from the running demo. */
.social-app-viewer .sa-screen{padding-bottom:20px}
.social-page:has(.social-app-viewer[open])>.mobile-dock{visibility:hidden}
}

@media(max-width:359px){.case-intro h1{font-size:38px}
.case-intro p{font-size:12px}
.case-gallery-footer{width:calc(100% - 32px)}
.gallery-pagination{gap:4px}
.gallery-pagination button{width:36px} /* taste-skill-ignore: Pagination controls need a visible touch target on the shared light background. */
.case-gallery-footer small{max-width:150px;font-size:11px}
.sa-header{padding-left:18px;padding-right:18px}
.sa-story-strip{gap:20px;margin-left:18px;margin-right:18px}
.sa-story-strip .sa-avatar{width:46px;height:46px}
.sa-post-grid img{height:160px}
.sa-post-grid article:nth-child(even) img{height:132px}
}

@media(prefers-reduced-motion:reduce){.social-page *,.social-page *::before,.social-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Keep the App previews and their entry buttons above the mobile navigation. */
.case-preview,.case-preview .social-app{height:560px}
.social-case{height:calc(280px * 560 / 360 + 60px)} /* taste-skill-ignore: App preview frame follows the existing $500 case presentation. */

@media(max-width:700px){.social-cases{padding-top:96px}
.case-intro{margin-bottom:20px}
.case-intro h1{font-size:40px}
.social-case{height:calc(min(74vw,300px) * 560 / 360 + 56px)} /* taste-skill-ignore: App preview frame follows the existing $500 case presentation. */
.case-gallery-footer{margin-top:16px}
.social-cases{padding-bottom:44px}
.sa-nav button,.sa-note,.sa-conversation-note,.sa-meet-intro>span,.sa-profile-copy p,.sa-voice-caption,.sa-room-list small,.sa-room-list article button>span,.sa-seats>div,.sa-seats small{font-size:13px}
.sa-header>div>span{font-size:13px}
.social-app .sa-conversation-time{font-size:12px}
}


.sa-post-grid p svg{width:14px;height:14px}
.sa-save-button{display:flex;align-items:center;justify-content:center;gap:8px} /* taste-skill-ignore: This is an interactive save control inside the App demo. */
.sa-wordmark-symbol>svg{width:34px;height:34px}


.gallery-pagination button:disabled{opacity:.35;cursor:default}

.case-preview iframe{border:0;width:360px;height:560px;display:block;pointer-events:none;background:#fff}.case-preview{background:#fff}.social-case[data-case=island] .case-preview{background:#080808}.cover-action{z-index:1}.cover-action:after{z-index:-1}.cover-action>span{position:relative}

.cover-action .case-brand{display:flex;align-items:center;gap:10px;background:transparent}.case-brand>img{width:31px;height:31px;flex:none;border-radius:9px}.case-brand>span{display:flex;flex-direction:column;gap:4px;line-height:1.15}.cover-action small{margin-left:0;font-size:11px}.cover-action{align-items:end;padding-bottom:12px}.cover-action:after{height:66px}.social-case{height:calc(280px * 560 / 360 + 66px)}.social-case[data-case=island] .cover-action:after{background:#080808}.social-case[data-case=island] .cover-action>span{background:#080808;color:#f5f5f5}.social-case[data-case=island] .cover-action small{color:#aaa}.social-case[data-case=voice] .cover-action:after{background:#1c1d22}.social-case[data-case=voice] .cover-action>span{background:#1c1d22;color:#f5f5f5}.social-case[data-case=voice] .cover-action small{color:#b6b8c4}@media(max-width:700px){.social-case{height:calc(min(74vw,300px) * 560 / 360 + 66px)}}

.case-preview iframe{opacity:0}.case-preview iframe.is-ready{opacity:1}.preview-loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;background:inherit;font-size:18px;color:#253a2f}.preview-loading[hidden]{display:none}.preview-loading>img{width:56px;height:56px}.preview-loading>span{font-size:12px;color:#768079}.social-case[data-case=island] .preview-loading,.social-case[data-case=voice] .preview-loading{color:white}.social-case[data-case=island] .preview-loading>span,.social-case[data-case=voice] .preview-loading>span{color:#aaa}.case-intro h1{flex:none;white-space:nowrap}.case-intro p{min-width:0}@media(max-width:359px){.social-cases{padding-top:88px}.case-intro{gap:14px;margin-bottom:16px}.case-intro h1{font-size:36px}.case-intro p{font-size:11px;line-height:1.75}.case-gallery-footer{margin-bottom:12px}}