/* GP set piece: steps beside the client's app screens (see partials/features/gp-phone.php) */
.gpx { --ph: min(64vh, 600px); overflow: clip; }
.gpx-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .gpx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gpx-steps { display: grid; gap: 0; margin: clamp(1.4rem, 2.6vw, 2rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.gpx-step {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1rem, 1.8vw, 1.4rem) 18px; border-bottom: 1px solid rgba(255,255,255,.14);
  transition: opacity .45s;
}
.gpx-ico {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--mint-deep);
  transition: background-color .45s, color .45s, border-color .45s;
}
.gpx-ico svg { width: 28px; height: 28px; }
.gpx-step h3 { margin: .2rem 0 .35rem; font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: #fff; }
.gpx-step p { margin: 0; color: rgba(255,255,255,.82); }
.gpx-bar { position: absolute; left: 0; top: clamp(1rem, 1.8vw, 1.4rem); bottom: clamp(1rem, 1.8vw, 1.4rem); width: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.gpx-bar i { position: absolute; inset: 0; background: var(--tick); transform-origin: top; transform: scaleY(1); }

/* the phones: a row of three by default */
.gpx-stage { position: relative; display: grid; justify-items: center; gap: 1.4rem; }
.gpx-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); width: 100%; max-width: 760px; }
.gpx-phone { margin: 0; display: grid; gap: .8rem; justify-items: center; }
.gpx-bezel {
  position: relative; width: 100%; aspect-ratio: 568 / 1150; border-radius: clamp(18px, 2.6vw, 38px);
  padding: clamp(4px, .6vw, 8px); background: #0A1E15;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 70px -30px rgba(0,0,0,.65);
}
.gpx-bezel img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: clamp(14px, 2.1vw, 31px); background: #fff; }
.gpx-phone figcaption { font-weight: 600; font-size: 1.0625rem; color: rgba(255,255,255,.86); text-align: center; line-height: 1.3; }
.gpx-clock { display: none; }
.gpx-time { margin: 0; display: flex; align-items: baseline; gap: .5rem; color: rgba(255,255,255,.8); font-weight: 600; }
.gpx-time b { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.03em; color: #fff; }

/* pinned scene (desktop, full motion): one phone, the screens wipe from one to the next */
@media (min-width: 1024px) {
  .gpx.is-pinned { min-height: 100vh; padding-block: 0; display: grid; align-items: center; padding-top: 70px; }
  /* a fanned deck: the active phone in front, the other two peeking out either side */
  .gpx.is-pinned .gpx-stage { display: block; height: calc(var(--ph) + 70px); }
  .gpx.is-pinned .gpx-phones { display: block; position: absolute; left: calc(50% - var(--ph) * .247); top: 0; width: calc(var(--ph) * .494); height: var(--ph); max-width: none; }
  .gpx.is-pinned .gpx-phone { position: absolute; inset: 0; gap: 0; transform-origin: 50% 90%; }
  .gpx.is-pinned .gpx-bezel { height: 100%; width: 100%; }
  .gpx.is-pinned .gpx-phone figcaption { display: none; }
  .gpx.is-pinned .gpx-phone[data-screen="0"] { z-index: 3; }
  .gpx.is-pinned .gpx-phone[data-screen="1"] { z-index: 2; }
  .gpx.is-pinned .gpx-phone[data-screen="2"] { z-index: 1; }
  .gpx.is-pinned .gpx-clock {
    display: block; position: absolute; z-index: 0;
    left: calc(50% - var(--ph) * .56); top: calc(var(--ph) * -.06);
    width: calc(var(--ph) * 1.12); height: calc(var(--ph) * 1.12);
  }
  .gpx.is-pinned .gpx-time { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; }
  .gpx-clock svg { width: 100%; height: 100%; overflow: visible; }
  .gpx-ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; }
  .gpx-ring { fill: none; stroke: var(--mint-deep); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 100px 100px; }
  .gpx-marks line { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-linecap: round; }
  /* dim the copy, not the li: the stagger reveal owns the li's opacity */
  .gpx.is-pinned .gpx-step > div, .gpx.is-pinned .gpx-ico { opacity: .5; transition: opacity .45s, background-color .45s, color .45s, border-color .45s; }
  .gpx.is-pinned .gpx-step.is-on > div, .gpx.is-pinned .gpx-step.is-on .gpx-ico { opacity: 1; }
  .gpx.is-pinned .gpx-step.is-on .gpx-ico { background: var(--tick); border-color: var(--tick); color: #fff; }
  .gpx.is-pinned .gpx-bar i { transform: scaleY(0); }
}