/* ===========================================================================
   Pillow Client — the globe host                                   cobe 2.0.1
   ---------------------------------------------------------------------------
   Layout for the two elements /scripts/globe.js needs: the host it is mounted
   into (.lp-globe__stage here, or .globe which the module adds itself) and the
   canvas cobe owns (.globe-canvas). The sphere itself is WebGL now — cobe draws
   it — so there is no colour to theme here; the palette arrives as data-
   attributes on the host (data-dot-color, data-marker-color, data-arc-color).

     · the canvas has no layout size of its own: it fills a square host, and cobe
       is handed that width so the sphere is never resampled
     · touch-action pan-y, so a finger can still scroll the page over the globe
       while a sideways drag turns it
     · this list must NOT name .lp-globe. That class is on the *section*, and
       aspect-ratio: 1/1 on a full-width section would make it a square — 782px of
       empty black, which is the globe-to-pricing gap that was fixed on 2026-10-16
     · no WebGL means no sphere: the module marks the host and the stage leaves the
       layout rather than holding an empty 535px box
   =========================================================================== */

.lp-globe__stage,
.globe {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  opacity: 0;
  transition: opacity 900ms ease;
  touch-action: pan-y;
}

[data-globe-unavailable] { display: none; }