/* Canonical glass phone renderer, shared by the website and comparison preview. */
#agency-site .c3d-host {
  --c3d-width: 304px;
  --c3d-height: 620px;
}

#agency-site .c3d-scene {
  position: absolute;
  inset: 0;
  perspective: 1150px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

#agency-site .c3d-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--c3d-width);
  height: var(--c3d-height);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

#agency-site .c3d-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
}

#agency-site .c3d-contour {
  position: absolute;
  pointer-events: none;
}

#agency-site .c3d-host .taste-phone.c3d-front {
  position: absolute;
  inset: 0;
  width: var(--c3d-width);
  height: var(--c3d-height);
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 9px;
  box-sizing: border-box;
  border: 1px solid #c0d2c8;
  border-radius: 47px;
  overflow: visible;
  background:
    radial-gradient(ellipse at 3% 8%, #ffffff 0%, #ffffff00 48%),
    linear-gradient(119deg, #eef6f0 0%, #d3e2d9 22%, #b4c9be 46%, #e5f0e8 76%, #bdcfc4 100%);
  box-shadow:
    inset 0 0 0 1.5px #ffffffb0,
    inset 2px 0 3px #ffffffc9,
    inset -2px -1px 3px #315b4540;
  transform: translateZ(10.6px);
  backface-visibility: hidden;
  pointer-events: auto;
}

#agency-site .c3d-host .taste-phone.c3d-front::before,
#agency-site .c3d-host .taste-phone.c3d-front::after {
  display: none;
}

/* Selected thin shell: paint its rim into the existing front instead of
   adding a separate 3D rim. Matches the approved seven-contour preview. */
#agency-site .c3d-host.c3d-thin-shell .taste-phone.c3d-front {
  box-shadow:
    inset 0 0 0 1px #f7fff79c,
    inset 1px 1px 0 #ffffffbf,
    inset -1px -1px 0 #ffffff30,
    inset 0 0 0 1.5px #ffffffb0,
    inset 2px 0 3px #ffffffc9,
    inset -2px -1px 3px #315b4540;
}

#agency-site .c3d-host .c3d-front > .taste-screen {
  position: relative;
  width: 284px;
  height: 600px;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 284 / 600;
  border-radius: 37px;
  overflow: hidden;
  background: #f7fbf8;
  box-shadow: 0 0 0 1px #70927fa6, 0 0 0 2px #f2faf4b0;
}

#agency-site .c3d-coat,
#agency-site .c3d-rim {
  position: absolute;
  inset: 0;
  border-radius: 47px;
  pointer-events: none;
  backface-visibility: hidden;
}

#agency-site .c3d-coat {
  overflow: hidden;
  transform: translateZ(11px);
  background: linear-gradient(122deg, #ffffff0d, #ffffff00 42%, #92c5ae05);
}

#agency-site .c3d-reflection {
  position: absolute;
  inset: -28% -65%;
  background: linear-gradient(90deg,
    #ffffff00 18%,
    #ffffff00 38%,
    #ffffff21 47.8%,
    #ffffff8c 48%,
    #ffffff3b 48.3%,
    #ffffff0f 63%,
    #ffffff00 67%);
  transform-origin: 50% 50%;
  pointer-events: none;
}

#agency-site .c3d-rim {
  transform: translateZ(11.3px);
  border: 1px solid #f7fff79c;
  box-shadow: inset 1px 1px 0 #ffffffbf, inset -1px -1px 0 #ffffff30;
}

#agency-site .c3d-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 54px;
  background: radial-gradient(ellipse at center,
    #244c3dd9 0%, #244c3d80 23%, #244c3d29 47%, #244c3d0a 63%, #244c3d00 76%);
  pointer-events: none;
  transform-origin: 50% 50%;
}

#agency-site .c3d-flat .c3d-scene { perspective: none; }
#agency-site .c3d-host.c3d-flat .c3d-front,
#agency-site .c3d-flat .c3d-coat,
#agency-site .c3d-flat .c3d-rim { transform: none; }

@media (prefers-reduced-transparency: reduce) {
  #agency-site .c3d-coat { display: none; }
}