/* Screen-recording clips. Added 2026-09-20 with the first two assistant videos.
   The site had no <video> at all after R2 removed the hero (2026-09-14), so this
   is the whole vocabulary for moving images — keep it here rather than letting
   video rules spread through the theme files. */

.clip {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* A phone screen recording is 9:16. Left to itself it would tower over the copy
   beside it, so it is capped by HEIGHT and centred, and the frame carries the
   same hairline/​radius/​shadow treatment `.app-shot` gives a screenshot — a light
   UI must not read as a hole punched in a dark page. */
.clip-frame {
  /* Left-aligned, not centred. Every other block on these pages starts at the
     container's left edge; a centred clip left a dead band beside the copy and
     read as an accident. Measured at 1440 before changing it. */
  align-self: flex-start;
  max-height: 640px;
  border: 1px solid var(--grid-line-strong, rgba(255, 255, 255, .14));
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  line-height: 0;
}

.clip-frame video {
  display: block;
  height: 640px;
  width: auto;
  max-width: 100%;
}

.clip figcaption {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--fg-quiet, var(--muted, #9a938c));
  /* A phone clip is narrow; a caption centred under it would float away from
     the text column it belongs to. Cap it near the copy measure instead. */
  max-width: 54ch;
}

/* Under 700px the height cap wastes the width instead of using it. */
@media (max-width: 700px) {
  .clip-frame { max-height: none; width: 100%; }
  .clip-frame video { height: auto; width: 100%; }
}

/* Reduced motion: clip-v1.js pauses the clip and turns controls on, so the
   viewer opts in. The border stays so the frame does not collapse. */
@media (prefers-reduced-motion: reduce) {
  .clip-frame video { outline: none; }
}

/* Screen gallery: several stills of one application, read as a set rather than
   as separate features. Two across from 760px; the caption carries the name of
   the screen so a reader scanning the grid still knows what each one is. */
.app-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .app-gallery { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.app-gallery .app-shot { margin: 0; }

.app-gallery .app-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--grid-line-strong, rgba(255, 255, 255, .14));
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
}

.app-gallery figcaption {
  margin-top: 10px;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--fg-quiet, var(--muted, #9a938c));
}

.app-gallery figcaption strong { color: var(--fg, inherit); font-weight: 600; }