/* Product clips: short silent recordings of the real product on sample data (homepage, /work).
   No autoplay. Native controls, captions, a visible play button, and a text alternative under each clip.
   Colours come from the fx tokens only. */
.pclips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,4vw,44px)}
.pclip{margin:0;display:grid;gap:12px;align-content:start}
.pclip-frame{position:relative;border:1px solid var(--fx-line);border-radius:var(--fx-radius-sm);overflow:hidden;background:var(--fx-surface);box-shadow:var(--fx-shadow-soft);aspect-ratio:1280/800}
.pclip-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--fx-surface)}
.pclip-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--fx-action);color:var(--fx-action-ink);font:600 15px/1 inherit;font-family:inherit;cursor:pointer;box-shadow:var(--fx-shadow-soft);transition:background-color .2s var(--fx-ease),transform .2s var(--fx-ease)}
.pclip-play:hover{background:var(--fx-action-hover)}
.pclip-play:active{transform:translate(-50%,-50%) scale(.97)}
.pclip-play:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pclip-play svg{width:18px;height:18px;flex:none}
.pclip-frame.is-playing .pclip-play{display:none}
.pclip-tag{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:999px;background:var(--fx-surface);color:var(--fx-ink);border:1px solid var(--fx-line);font-size:12px;font-weight:600;letter-spacing:.02em}
.pclip h3{margin:4px 0 0;font-size:18px;line-height:1.3;color:var(--fx-ink)}
.pclip figcaption,.pclip .pclip-alt{font-size:15px;line-height:1.55;color:var(--fx-muted)}
.pclip .pclip-alt{margin:0}
.pclips-note{margin-top:18px;font-size:14px;color:var(--fx-muted)}
@media (max-width:900px){.pclips{grid-template-columns:1fr;max-width:640px}}
@media (prefers-reduced-motion:reduce){.pclip-play{transition:none}}
/* Homepage placement inside "A closer look at what we built" */
.home-clips{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--fx-line)}
.home-clips .home-clips-title{margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--fx-ink)}
.home-clips .home-clips-lede{margin:8px 0 0;font-size:16px;color:var(--fx-muted)}
.pclip h4{margin:4px 0 0;font-size:18px;line-height:1.3;color:var(--fx-ink)}