/* Mesha case study, part 2: "The Product" as one neon section, three renders in a Z pattern
   joined by a dotted lime path. Tokens live in case-mesha.css. */
.mh-z { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(50% 30% at 90% 0%, rgb(200 240 49 / 14%), transparent 70%),
  radial-gradient(60% 25% at 20% 100%, rgb(200 240 49 / 12%), transparent 70%),
  var(--mh-forest); }
.mh-z .cs-inner { position: relative; z-index: 1; }
.mh-z::before, .mh-z::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; border-top: 2px solid rgb(200 240 49 / 70%); filter: drop-shadow(0 -6px 18px rgb(200 240 49 / 55%)); }
.mh-z::before { display: none; }
.mh-z::after { right: -45%; top: 2%; width: 90%; height: 70%; border-top-color: rgb(200 240 49 / 35%); transform: rotate(8deg); }

.mh-z__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l l" "t s"; column-gap: clamp(32px, 6vw, 96px); row-gap: 22px; align-items: end; }
.mh-z__label { display: flex; align-items: center; gap: 22px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-lime); grid-area: l; }
.mh-z__label::after { content: ""; width: 104px; height: 2px; background: var(--mh-lime); }
.mh-z__title { margin: 0; font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; color: #fff; grid-area: t; }
.mh-z__title .mh-lime { display: block; }
.mh-z__lead { margin: 0; font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / 80%); text-wrap: pretty; grid-area: s; max-width: 480px; justify-self: end; padding-bottom: 8px; }

.mh-z__list { position: relative; z-index: 1; display: grid; gap: clamp(64px, 7vw, 112px); margin: clamp(64px, 7vw, 104px) 0 0; padding: 0; list-style: none; }
.mh-z__row { --gap: clamp(32px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }

.mh-z__row--flip .mh-z__art { order: -1; }

.mh-z__text { display: flex; align-items: flex-start; gap: 22px; max-width: 420px; justify-self: center; }
.mh-z__ic { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; color: var(--mh-lime); background: linear-gradient(145deg, rgb(200 240 49 / 14%), rgb(200 240 49 / 3%)); box-shadow: inset 0 0 0 1.5px rgb(200 240 49 / 55%), 0 0 30px -8px rgb(200 240 49 / 45%); }
.mh-z__ic svg { width: 32px; height: 32px; }
.mh-z__h { margin: 4px 0 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.mh-z__p { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / 80%); text-wrap: pretty; }

.mh-z__art { position: relative; z-index: 1; margin: 0; width: 100%; max-width: 560px; justify-self: center; border-radius: 28px; box-shadow: 0 0 0 1.5px rgb(200 240 49 / 60%), 0 0 60px -10px rgb(200 240 49 / 35%), 0 50px 90px -50px rgb(0 0 0 / 80%); }
.mh-z__art img { display: block; width: 100%; height: auto; border-radius: 28px; aspect-ratio: 1 / 1; object-fit: cover; }
.mh-z__dot { position: absolute; z-index: 2; top: 55%; left: calc(var(--gap) / -2 - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--mh-lime); box-shadow: 0 0 0 5px rgb(200 240 49 / 18%), 0 0 16px 3px rgb(200 240 49 / 70%); }
.mh-z__row--flip .mh-z__dot { left: auto; right: calc(var(--gap) / -2 - 7px); top: 45%; }

.mh-z__line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mh-z__line path { fill: none; stroke: rgb(200 240 49 / 55%); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgb(200 240 49 / 60%)); }

@media (max-width: 1100px) {
  .mh-z__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "t" "s"; }
  .mh-z__lead { justify-self: start; max-width: 600px; padding: 0; }
}
@media (max-width: 900px) {
  .mh-z__line, .mh-z__dot { display: none; }
  .mh-z__list { gap: 64px; margin-top: 56px; }
  .mh-z__row, .mh-z__row--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mh-z__text { order: 2; justify-self: start; max-width: 560px; }
  .mh-z__row--flip .mh-z__art { order: 0; }
  .mh-z__ic { width: 56px; height: 56px; border-radius: 14px; }
  .mh-z__ic svg { width: 26px; height: 26px; }
}