/* ══════════════ SAYBLE LIVE DEMO v3 (2026-09-26) ══════════════
   A real call on a real desktop, with the REAL Sayble app on top.
     • the Sayble overlay is an actual recording of the production renderer
       (transparent video: VP9-alpha / HEVC-alpha) — never a recreation.
     • both people are real footage: the prospect, and "you" (our founder).
     • the desktop and the call window are our own design: Sayble wallpaper,
       our menu bar, a neutral call app. No third-party brand marks.
   Layout is authored on a fixed canvas and scaled to the container, so every
   pixel keeps its proportion (desktop 1120×700, phone 400×860). */

.callstage:has(.ld-wrap){max-width:1120px}
.ld-wrap{position:relative;width:100%;max-width:1120px;margin:0 auto;height:calc(var(--ch,700px) * var(--k,1))}
.ld{position:absolute;left:0;top:0;width:1120px;height:700px;transform:scale(var(--k,1));transform-origin:0 0;
  border-radius:22px;overflow:hidden;isolation:isolate;font-family:var(--sans,Geist,system-ui,sans-serif);
  --v:#A77BF3;--v2:#C9AEF7;--ink:#201b14}
.ld *{box-sizing:border-box}

/* ---- the desktop: ours — paper, violet light, a little film grain ---- */
.ld-desk{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 88% 12%,rgba(201,174,247,.85),transparent 62%),
  radial-gradient(60% 70% at 4% 96%,rgba(167,123,243,.55),transparent 60%),
  radial-gradient(50% 45% at 40% 30%,rgba(255,255,255,.9),transparent 70%),
  linear-gradient(160deg,#F7F3EA 0%,#F1E9FB 48%,#E4D5FA 100%)}
.ld-desk::before,.ld-desk::after{content:'';position:absolute;border-radius:50%;filter:blur(38px);opacity:.75}
.ld-desk::before{width:120%;height:34%;left:-10%;top:58%;transform:rotate(-12deg);
  background:linear-gradient(90deg,transparent,rgba(167,123,243,.55),rgba(255,214,190,.45),transparent)}
.ld-desk::after{width:90%;height:22%;left:30%;top:18%;transform:rotate(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),rgba(201,174,247,.6),transparent)}
.ld-grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* menu bar */
.ld-menu{position:absolute;inset:0 0 auto 0;height:28px;display:flex;align-items:center;gap:18px;padding:0 16px;z-index:2;
  background:rgba(255,255,255,.42);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  font:500 12.5px/1 var(--sans,system-ui);color:rgba(32,27,20,.82)}
.ld-menu b{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
.ld-qm{display:inline-flex;gap:2px}
.ld-qm i{display:block;width:7px;height:10px;background:var(--v);border-radius:50% 50% 50% 0/60% 60% 40% 0}
.ld-menu .ld-r{margin-left:auto;display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.ld-menu svg{width:15px;height:15px;display:block}

/* ---- the call window: a neutral call app, our design ---- */
.ld-call{position:absolute;left:28px;top:62px;width:690px;height:560px;border-radius:14px;overflow:hidden;z-index:3;
  background:#121117;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -20px rgba(55,30,110,.45),0 0 0 .5px rgba(0,0,0,.4)}
.ld-bar{position:relative;height:40px;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid rgba(255,255,255,.06);
  font:600 12.5px/1 var(--sans,system-ui);color:rgba(255,255,255,.86)}
.ld-bar i{width:11px;height:11px;border-radius:50%;background:#3a3842;display:block}
.ld-title{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.ld-rec{margin-left:auto;display:flex;align-items:center;gap:7px;font:600 11.5px/1 var(--mono,'Geist Mono',monospace);color:rgba(255,255,255,.7)}
.ld-rec::before{content:'';width:7px;height:7px;border-radius:50%;background:#FF5E57;animation:ldblink 1.8s infinite}
@keyframes ldblink{50%{opacity:.3}}
.ld-grid{position:absolute;left:14px;right:14px;top:54px;bottom:74px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld-tile{position:relative;border-radius:12px;overflow:hidden;background:#1d1b24;outline:2px solid transparent;outline-offset:-2px;
  transition:outline-color .25s ease}
.ld-tile.talk{outline-color:#46D39A}
.ld-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ld-tile .ld-pro{object-position:50% 40%}          /* the other person: centred webcam framing */
.ld-tile .ld-you{object-position:30% 30%;transition:opacity .2s linear}   /* you */
.ld-tag{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;
  background:rgba(10,9,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 12px/1 var(--sans,system-ui);color:#fff}
.ld-tag svg{width:12px;height:12px}
.ld-ctl{position:absolute;left:0;right:0;bottom:0;height:62px;display:flex;align-items:center;justify-content:center;gap:10px;
  border-top:1px solid rgba(255,255,255,.06);background:#121117}
.ld-btn{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;font:500 10.5px/1 var(--sans,system-ui);color:rgba(255,255,255,.72)}
.ld-btn span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07)}
.ld-btn svg{width:17px;height:17px}
.ld-leave{position:absolute;right:16px;top:50%;transform:translateY(-50%);padding:9px 16px;border-radius:9px;
  background:#E5484D;color:#fff;font:650 12.5px/1 var(--sans,system-ui)}

/* ---- the REAL Sayble overlay (transparent recording) ---- */
.ld-app{position:absolute;left:676px;top:74px;width:432px;height:504px;z-index:5;pointer-events:none}
.ld-app video,.ld-app img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ld-app img{opacity:0;transition:opacity .3s ease}
.ld.no-video .ld-app img{opacity:1}
.ld.no-video .ld-app video{opacity:0}

/* ---- tabs under the stage: the three calls, and a way to jump in ---- */
.ld-tabs{display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.ld-tab{position:relative;overflow:hidden;appearance:none;border:1px solid var(--line-2,rgba(32,27,20,.14));
  background:var(--paper,#fff);color:var(--ink,#201b14);border-radius:999px;padding:9px 16px;cursor:pointer;
  font:600 12.5px/1 var(--sans,system-ui);transition:border-color .2s ease,color .2s ease}
.ld-tab:hover{border-color:#A77BF3}
.ld-tab.on{border-color:#A77BF3;color:#5B3A99}
.ld-tab i{position:absolute;left:0;bottom:0;height:2px;width:0;background:#A77BF3}
.ld-tab:focus-visible{outline:2px solid #A77BF3;outline-offset:2px}

/* ---- phone canvas (400×860): call on top, Sayble stacked under it ---- */
.ld.is-phone{width:400px;height:860px}
.ld.is-phone .ld-menu{gap:12px;font-size:11.5px}
.ld.is-phone .ld-menu .ld-m{display:none}
.ld.is-phone .ld-call{left:12px;top:40px;width:376px;height:334px}
.ld.is-phone .ld-grid{grid-template-columns:1fr;top:50px;bottom:62px}
.ld.is-phone .ld-tile.ld-t2{position:absolute;right:10px;top:10px;width:92px;height:92px;z-index:2;border:2px solid #121117}
.ld.is-phone .ld-ctl{height:56px;gap:4px}
.ld.is-phone .ld-btn{width:54px;font-size:9.5px}
.ld.is-phone .ld-btn span{width:30px;height:30px}
.ld.is-phone .ld-btn:nth-child(3),.ld.is-phone .ld-btn:nth-child(4){display:none}
.ld.is-phone .ld-leave{right:10px;padding:8px 12px}
.ld.is-phone .ld-app{left:0;top:386px;width:400px;height:467px}
.ld-btn em{font-style:normal}