/* Hero artwork: larger phone, no card frame, and a soft transition into the page. */
section[data-loc="client/src/pages/Home.tsx:27"] img[src="/assets/hero-replacement.webp"] {
  display: block !important;
  width: min(44vw, 520px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  margin-inline: auto !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 90% at 50% 50%, #000 47%, rgba(0, 0, 0, 0.25) 58%, transparent 70%) !important;
  mask-image: radial-gradient(ellipse 72% 90% at 50% 50%, #000 47%, rgba(0, 0, 0, 0.25) 58%, transparent 70%) !important;
}

/* Clear any image wrapper treatment; keep the phone and its detection callouts together. */
section[data-loc="client/src/pages/Home.tsx:27"] div:has(img[src="/assets/hero-replacement.webp"]) {
  background: transparent !important;
  box-shadow: none !important;
}
section[data-loc="client/src/pages/Home.tsx:27"] div:has(> img[src="/assets/hero-replacement.webp"]),
section[data-loc="client/src/pages/Home.tsx:27"] div:has(> picture > img[src="/assets/hero-replacement.webp"]) {
  translate: 0 -108px !important;
}

/* Keep the reference's two-line title proportion at desktop widths. */
section[data-loc="client/src/pages/Home.tsx:27"] h1 {
  font-size: clamp(2.4rem, 3.5vw, 2.75rem) !important;
  line-height: 1.05 !important;
}

/* Retain a comfortably large stacked visual on narrow screens. */
@media (max-width: 767px) {
  section[data-loc="client/src/pages/Home.tsx:27"] img[src="/assets/hero-replacement.webp"] {
    width: min(88vw, 520px) !important;
    max-width: 88vw !important;
  }
  section[data-loc="client/src/pages/Home.tsx:27"] div:has(> img[src="/assets/hero-replacement.webp"]),
  section[data-loc="client/src/pages/Home.tsx:27"] div:has(> picture > img[src="/assets/hero-replacement.webp"]) {
    translate: 0 -20px !important;
  }
  section[data-loc="client/src/pages/Home.tsx:27"] h1 {
    font-size: clamp(2.25rem, 9vw, 3rem) !important;
  }
}

/* Use the artwork's own teal detail, not an extra green backlight. */
section[data-loc="client/src/pages/Home.tsx:27"] [data-loc="client/src/pages/Home.tsx:33"],
section[data-loc="client/src/pages/Home.tsx:27"] [data-loc="client/src/pages/Home.tsx:34"] {
  display: none !important;
}