/* ------------------------------------------------------------------
   LIVE PREVIEW — the client's real website, running inside a Scalus
   landing page.

   The point of this block is that nobody has to leave the funnel to
   look at the work. A screenshot is not proof; a scrollable, clickable,
   genuinely live site is. The client sites allow scalus.app in their
   `frame-ancestors` CSP, which is what makes this legal in the browser.

   Two modes off one iframe: DESKTOP renders the site at 1440px and
   scales the whole frame down to fit the stage, so the desktop layout
   is preserved rather than reflowed to a narrow column. PHONE renders
   it at 390px, which is a real phone viewport, so the site's own mobile
   layout is what shows. Sizing is done in JS because it depends on the
   measured stage width.
   ------------------------------------------------------------------ */

.lv{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:18px;
  overflow:hidden;
  background:#04130a;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  max-width:1120px;
  margin:0 auto;
}

/* browser chrome */
.lv-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.lv-dots{display:inline-flex;gap:6px;flex:0 0 auto}
.lv-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.lv-dots i:first-child{background:rgba(50,207,117,.55)}
.lv-url{
  flex:1 1 auto;min-width:0;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  font-size:.76rem;color:var(--ink-mute);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:100px;
  padding:5px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lv-url svg{width:12px;height:12px;flex:0 0 12px;color:var(--green)}

/* desktop / phone switch */
.lv-seg{display:inline-flex;flex:0 0 auto;border:1px solid var(--line-2);border-radius:100px;overflow:hidden}
.lv-seg button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:var(--ink-mute);padding:6px 13px;
}
.lv-seg button.on{background:var(--green);color:#04130a}
.lv-max-btn{
  appearance:none;border:1px solid var(--line-2);background:transparent;cursor:pointer;
  color:var(--ink-mute);border-radius:9px;width:30px;height:28px;
  display:grid;place-items:center;flex:0 0 auto;
}
.lv-max-btn svg{width:14px;height:14px}
.lv-max-btn:hover{color:var(--ink)}

/* the stage the site is scaled into */
.lv-stage{
  position:relative;
  height:660px;
  overflow:hidden;
  background:#000;
}
.lv-stage iframe{
  position:absolute;
  border:0;
  transform-origin:top left;
  background:#fff;
  display:block;
}
.lv-stage.phone{background:#04130a}

/* the tap-to-load plate. The client's site is not fetched until the
   visitor scrolls it into view, so a bounce off the top of the page
   never pulls a whole second website down the wire. */
.lv-plate{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;gap:12px;align-content:center;
  background:rgba(4,19,10,.9);
  color:var(--ink-mute);font-size:.86rem;
}
.lv-plate[hidden]{display:none}
.lv-spin{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--green);animation:lvspin .8s linear infinite}
@keyframes lvspin{to{transform:rotate(360deg)}}

/* full screen */
.lv.lv-max{
  position:fixed;inset:14px;z-index:140;max-width:none;margin:0;
  display:flex;flex-direction:column;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lv.lv-max .lv-stage{flex:1;height:auto}
body.lv-locked{overflow:hidden}

.lv-note{
  text-align:center;font-size:.82rem;color:var(--ink-mute);
  margin:16px auto 0;max-width:620px;
}

@media(max-width:860px){
  .lv-stage{height:560px}
  .lv-url{font-size:.7rem;padding:5px 10px}
  .lv-seg button{padding:6px 10px;font-size:.68rem}
}
@media(max-width:560px){
  .lv-bar{gap:8px;padding:9px 10px}
  .lv-url{display:none}
  .lv-stage{height:560px}
}