/* DRYVE preview v7.6 — silhouette cutouts for existing real app phone artwork.
   This removes only the inconsistent BACKDROP around the already-rendered phones.
   No app screenshot pixels, labels, metrics or phone screen contents are edited. */

/* One consistent background and halo on all four feature cards. */
.features .feature-grid > .feature .feature-media {
  background:
    radial-gradient(ellipse 73% 70% at 50% 61%, rgba(61, 218, 197, 0.13), transparent 83%),
    linear-gradient(145deg, #0b292a 0%, #0c2728 48%, #0a2023 100%);
  border: 1px solid rgba(98, 208, 196, .2);
  box-shadow: inset 0 1px 0 rgba(144, 246, 224, .045), 0 14px 42px rgba(0, 0, 0, .12);
}

/* Identical shared halo, independent of the four source assets. */
.features .feature-grid > .feature .feature-media::before {
  inset: 18% 12% 13%;
  left: 12%;
  top: 18%;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: rgba(51, 195, 175, .14);
  filter: blur(35px);
}

/* The SVG clip shapes follow the original device frames exactly enough to
   remove each image's neon streak / dark rectangular background. */
.features .feature.feature-track-2026 .feature-media img {
  -webkit-clip-path: url(#dryve-phone-cut-track);
  clip-path: url(#dryve-phone-cut-track);
}
.features .feature.feature-progress-2026 .feature-media img {
  -webkit-clip-path: url(#dryve-phone-cut-progress);
  clip-path: url(#dryve-phone-cut-progress);
}
.features .feature.feature-programmes-2026 .feature-media img {
  -webkit-clip-path: url(#dryve-phone-cut-programmes);
  clip-path: url(#dryve-phone-cut-programmes);
}
.features .feature.feature-coach-2026 .feature-media img {
  -webkit-clip-path: url(#dryve-phone-cut-coach);
  clip-path: url(#dryve-phone-cut-coach);
}
/* Preserve the original phone image in full: no crop by object-fit, no filters,
   no changes to image files, and no manufactured screen content. */
.features .feature-grid > .feature .feature-media img {
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  transform: none;
}
