/* Growth cases opener: a centred "Proof of work." header over a flat row of real sales dashboards that drifts in a loop
   and can be dragged or swiped card by card. The row bleeds to the screen edges and fades into black at both sides. */
.pw-head { display: grid; justify-items: center; text-align: center; margin: 0 auto clamp(40px, 4.4vw, 64px); }
.pw-head .g-kicker { margin-bottom: 18px; }
.pw-head .g-title { max-width: none; font-size: clamp(48px, 6vw, 96px); }
.pw-head .g-intro { max-width: 30em; margin-top: 18px; color: var(--ink-3); text-wrap: balance; }

.pw-reel { position: relative; margin: 0 calc(var(--gutter) * -1) clamp(32px, 4vw, 56px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pw-reel.is-dragging { cursor: grabbing; }
.pw-reel:focus-visible { outline: 2px solid var(--growth); outline-offset: 4px; }
/* soft fades into the page at both ends, so the side cards dissolve smoothly (a mask blends with whatever is behind) */
.pw-reel { -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 9%, #000 24%, #000 76%, rgba(0, 0, 0, 0.35) 91%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 9%, #000 24%, #000 76%, rgba(0, 0, 0, 0.35) 91%, transparent); }

.pw-track { position: relative; display: flex; gap: clamp(16px, 1.6vw, 24px); width: max-content; padding: 34px 0 44px; will-change: transform; }
/* --f (0 to 1, set by reel.js) is how close the card is to the centre */
.pw-card { position: relative; flex: none; width: clamp(290px, 33vw, 500px); aspect-ratio: 800 / 320; border-radius: 16px; overflow: hidden; background: #000;
  opacity: calc(0.55 + 0.45 * var(--f, 0)); will-change: transform, opacity;
  box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(0, 0, 0, 0.95), 0 0 46px -16px rgba(250, 250, 248, calc(0.16 * var(--f, 0))); }
/* the fine, subtle silver edge on the centre card */
.pw-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: var(--f, 0);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.34), inset 0 0 26px -14px rgba(250, 250, 248, 0.14); }
/* hover: a very faint band of light sweeps across the card once */
.pw-card::before { content: ""; position: absolute; inset: -10% -40%; z-index: 1; pointer-events: none; transform: translateX(-75%) skewX(-18deg);
  background: linear-gradient(90deg, transparent 38%, rgba(250, 250, 248, 0.09) 50%, transparent 62%); transition: transform 0s; }
.pw-reel:not(.is-dragging) .pw-card:hover::before { transform: translateX(75%) skewX(-18deg); transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.pw-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; pointer-events: none; }

@media (max-width: 860px) {
  .pw-head .g-title { font-size: 48px; }
  .pw-head .g-intro { font-size: 16px; }
  .pw-card { width: 78vw; border-radius: 12px; }
  .pw-reel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pw-reel:not(.is-dragging) .pw-card:hover::before { transition: none; } }