/* Mongoose Social, live, framed on the Labs pages (owner, 2026-10-19: "put Mongoose Social on the main labs page... view only... pretty
   prevalent"). The frame is mongooselabs.app/live?embed=1 (public/live.html); it scrolls on its own. */
.social-live { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 16px; }
.social-live h2 { margin: 6px 0 14px; }
.social-live .sl-copy p { max-width: 520px; }
.sl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2e7d4f; margin-right: 8px; vertical-align: middle; animation: sl-pulse 2s infinite; }
@keyframes sl-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sl-dot { animation: none; } }
.sl-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; }
.sl-frame { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(120, 100, 80, .25); box-shadow: 0 24px 60px rgba(31, 26, 20, .14); background: #f6f0e4; height: min(720px, 80vh); }
.sl-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .social-live { grid-template-columns: 1fr; } .sl-frame { height: 640px; } }

/* Have it built (mongooselabs.app/build): a slim invitation under the live Social */
.build-strip { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto 24px; padding: 22px clamp(16px, 3vw, 32px); border: 1px solid rgba(120, 100, 80, .25); border-radius: 24px; }
.build-strip h2 { margin: 4px 0 6px; font-size: clamp(22px, 3vw, 30px); }
.build-strip p { margin: 0; max-width: 640px; }