/* ===== Live Storefront embed on the Storefront slide (scoped .sfembed) =====
   Prospect-specific: replaces the animated .pm pricing-moment widget with an iframe of the
   practice's own deployed Storefront mockup. The iframe is laid out at a fixed 1280x820
   logical size and scaled down with transform, so the embedded page renders its real desktop
   layout instead of collapsing into its mobile breakpoint inside a narrow slide panel.
   storefront-embed.js sets --sf-scale from the panel's measured width. */

.sfembed{width:100%;max-width:680px;margin:0 auto;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,20,55,.14),0 26px 64px rgba(0,20,55,.20),0 1px 2px rgba(0,0,0,.06);
  background:#fff}
.sfembed__chrome{height:30px;background:#E7E9EE;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #D8DBE2}
.sfembed__dots{display:flex;gap:6px;flex:none}
.sfembed__dots span{width:8px;height:8px;border-radius:50%;background:#C7CBD3}
.sfembed__url{flex:1;min-width:0;background:#F5F6F8;border-radius:5px;padding:3px 10px;font-size:10px;color:#8A8F99;
  font-family:ui-monospace,Menlo,monospace;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 1280x820 logical, so the aspect box is 820/1280 = 64.06% */
.sfembed__viewport{position:relative;width:100%;height:0;padding-top:64.06%;overflow:hidden;background:#fff}
.sfembed__frame{position:absolute;top:0;left:0;width:1280px;height:820px;border:0;
  transform-origin:top left;transform:scale(var(--sf-scale,.5));opacity:0;transition:opacity .5s ease}
.sfembed__frame.is-ready{opacity:1}
.sfembed__wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#8A8F99;font-family:ui-monospace,Menlo,monospace;background:#fff}
.sfembed__wait.is-gone{display:none}

/* The decorative flanking illustrations crowd a 680px-wide embed. */
.s-store .storedeco{display:none}