/* ConciergeDeck guides v3: Zoom + iOS touch (see guides-v3.js). Supersedes guides-v2.css.
   No outlines, strokes or rings: the camera, a translucent touch disc, a soft ripple and light. */

/* ---- the old highlights are retired everywhere ---- */
.product-film .film-tap,
.hs-ring,
.hs-zoom-ring { display: none !important; }

/* ---- camera: the screenshot and its overlay move together ---- */
.product-film .film-screen.gv3-cam > img,
.hs-shot.gv3-cam > .hs-screen-img,
.gv3-cam > .gv3-layer {
  transform: translate(var(--gv3-cx, 0px), var(--gv3-cy, 0px)) scale(var(--gv3-cz, 1));
  transform-origin: 0 0;
}
.product-film .film-screen.gv3-cam > img,
.hs-shot.gv3-cam > .hs-screen-img { backface-visibility: hidden; }

.gv3-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.hs-zoom.gv3-has-layer > .gv3-layer { z-index: 2; }

.gv3-layer > span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  opacity: var(--gv3-o, 0);
}

/* the iOS screen-recording touch disc: translucent light grey, inner shading, soft shadow */
.gv3-disc {
  width: var(--gv3-d, 40px);
  height: var(--gv3-d, 40px);
  border-radius: 50%;
  transform: translate(var(--gv3-x, -99px), var(--gv3-y, -99px)) translate(-50%, -50%) scale(var(--gv3-s, 1));
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .82) 0%, rgba(247, 248, 248, .76) 42%, rgba(226, 230, 229, .74) 78%, rgba(200, 205, 203, .8) 100%);
  box-shadow:
    0 calc(.5px * var(--gv3-u, 1)) calc(1px * var(--gv3-u, 1)) rgba(0, 0, 0, .16),
    0 calc(2px * var(--gv3-u, 1)) calc(4px * var(--gv3-u, 1)) rgba(0, 0, 0, .1),
    0 calc(5px * var(--gv3-u, 1)) calc(14px * var(--gv3-u, 1)) rgba(0, 0, 0, .14);
  will-change: transform, opacity;
}
.gv3-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #2a302e, #121715);
  opacity: var(--gv3-dk, 0);
}

/* one soft expanding ripple on release (a filled halo, not a ring stroke) */
.gv3-ripple {
  width: var(--gv3-d, 40px);
  height: var(--gv3-d, 40px);
  border-radius: 50%;
  transform: translate(var(--gv3-x, -99px), var(--gv3-y, -99px)) translate(-50%, -50%) scale(var(--gv3-s, 1));
  background: radial-gradient(closest-side, rgba(150, 158, 155, .08) 0%, rgba(150, 158, 155, .16) 55%, rgba(150, 158, 155, .3) 80%, rgba(150, 158, 155, .12) 92%, rgba(150, 158, 155, 0) 100%);
  will-change: transform, opacity;
}

/* Soft light: a mint glow behind an exact copy of the control, with a gentle vignette */
.gv3-glow {
  width: var(--gv3-w, 200px);
  height: var(--gv3-h, 120px);
  transform: translate(calc(var(--gv3-x, 0px) - var(--gv3-w, 200px) / 2), calc(var(--gv3-y, 0px) - var(--gv3-h, 120px) / 2));
  background: radial-gradient(closest-side, rgba(230, 255, 242, .74), rgba(160, 238, 202, .5) 30%, rgba(127, 227, 176, .22) 56%, rgba(127, 227, 176, .08) 78%, rgba(127, 227, 176, .02) 92%, rgba(127, 227, 176, 0));
}
.gv3-vig {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse var(--gv3-rx, 60%) var(--gv3-ry, 40%) at var(--gv3-x, 50%) var(--gv3-y, 50%), rgba(6, 17, 13, 0) 0%, rgba(6, 17, 13, 0) 34%, rgba(6, 17, 13, .1) 52%, rgba(6, 17, 13, .26) 72%, rgba(6, 17, 13, .4) 90%, rgba(6, 17, 13, .44) 100%);
}
.gv3-copy {
  width: var(--gv3-w, 0px);
  height: var(--gv3-h, 0px);
  transform: translate(var(--gv3-x, 0px), var(--gv3-y, 0px));
  background-image: var(--gv3-img, none);
  background-size: var(--gv3-bg-w, 100%) var(--gv3-bg-h, 100%);
  background-position: var(--gv3-bg-x, 0px) var(--gv3-bg-y, 0px);
  background-repeat: no-repeat;
  /* feather the copy's edges so it melts into the glow instead of showing a hard rectangle */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}
.gv3-layer > .gv3-disc { z-index: 4; }
.gv3-layer > .gv3-ripple { z-index: 3; }
.gv3-layer > .gv3-copy { z-index: 2; }
.gv3-layer > .gv3-glow { z-index: 1; }

/* reduced motion (and the still fallback): Soft light only, no movement, no disc */
.gv3-layer.is-still > .gv3-glow { opacity: .85; }
.gv3-layer.is-still > .gv3-vig { opacity: .42; }
.gv3-layer.is-still > .gv3-copy { opacity: 1; }
.gv3-layer.is-still > .gv3-disc,
.gv3-layer.is-still > .gv3-ripple { opacity: 0; }
.hs-zoom > .gv3-layer.is-still > .gv3-vig { opacity: .3; }

/* ---- push-in: the whole phone mockup (frame + screen) scales toward the viewer, never the screenshot ---- */
.product-film .film-phone-wrap.gv3-push,
.hs-phone.gv3-push {
  transform: scale(var(--gv3-pz, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.hs-phone.gv3-push { transform-origin: 50% 100%; }

/* ---- films: kept from guides-v2 ---- */
/* Keep the step controls clear of the phone on narrow screens: give them their own row. */
@media (max-width: 640px) {
  .product-film .film-stage { height: 470px; }
  .product-film .film-controls { left: 15px; right: 15px; bottom: 12px; justify-content: flex-start; }
}
/* One screenshot is not 603x1311; show it whole instead of cropping its edges. */
.product-film .film-screen img[width="1080"] { object-fit: contain; background: #f4f7f2; }

@media (prefers-reduced-motion: reduce) {
  .gv3-disc,
  .gv3-ripple { display: none; }
  .product-film .film-screen.gv3-cam > img,
  .hs-shot.gv3-cam > .hs-screen-img,
  .gv3-cam > .gv3-layer,
  .product-film .film-phone-wrap.gv3-push,
  .hs-phone.gv3-push { transform: none; }
}