/* Watch Spark work: real recordings of Spark doing the job beside the list
   of examples that picks one (homepage and the Spark page share it). The
   list looks like the site's other point lists: the playing example is
   dark, with a purple line under it that fills as its recording plays. No
   chat around it (2026-10-18). */
.clips { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1200px; margin: 0 auto; }
.clip-list { border-top: 1px solid var(--line); }
.sug { position: relative; display: block; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-4); font: inherit; font-size: clamp(17px, 1.45vw, 19px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-align: left; cursor: pointer; transition: color 0.25s ease; }
.sug:hover { color: var(--ink-3); }
.sug[aria-pressed="true"] { color: var(--ink); }
.sug:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 8px; }
.sug-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: left; opacity: 0; }
.sug[aria-pressed="true"] .sug-bar { opacity: 1; }
.clip-screen { margin: 0; max-width: none; align-self: center; }
@media (max-width: 900px) {
  .clips { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
.clip-screen { position: relative; }
/* Spark's phone, for phones: a phone-shaped frame around the phone recording. */
.clip-screen.is-phone { --frame: 7px; --r: 44px; width: min(300px, 82vw); margin: 0 auto; }
.clip-screen.is-phone video { aspect-ratio: 780 / 1688; }
.clip-glass { position: relative; overflow: hidden; border-radius: calc(var(--r) - var(--frame)); background: #0E0E12; }
.clip-screen video { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 1212; object-fit: cover; background: #0E0E12; }
/* Spark's phone: a status bar and a home bar around the recording, so nothing
   in it sits under the phone's rounded corners (2026-10-16). */
.phone-status, .phone-home { display: none; }
.clip-screen.is-phone .clip-glass { background: #fff; padding: 30px 0 18px; }
.clip-screen.is-phone .phone-status { display: flex; position: absolute; top: 0; left: 0; right: 0; height: 30px; align-items: center; justify-content: space-between; padding: 2px 26px 0 30px; font-size: 13px; font-weight: 600; color: #111; letter-spacing: -0.01em; }
.phone-icons { display: flex; align-items: center; gap: 5px; }
.phone-icons i { display: block; background: #111; }
.phone-icons .sig { width: 15px; height: 9px; -webkit-mask: linear-gradient(90deg, #000 0 2.5px, transparent 2.5px 4px, #000 4px 6.5px, transparent 6.5px 8px, #000 8px 10.5px, transparent 10.5px 12px, #000 12px) bottom / 100% 100% no-repeat; clip-path: polygon(0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.phone-icons .wifi { width: 13px; height: 10px; clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%); }
.phone-icons .bat { width: 22px; height: 10px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px rgba(17,17,17,0.45); position: relative; }
.phone-icons .bat::after { content: ''; position: absolute; inset: 2px 5px 2px 2px; border-radius: 1.5px; background: #111; }
.clip-screen.is-phone .phone-home { display: block; position: absolute; bottom: 6px; left: 50%; width: 34%; height: 4px; margin-left: -17%; border-radius: 3px; background: #111; }
/* The whole recording is the play/pause control; nothing shows on it. */
.clip-ctl { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clip-ctl:focus-visible { outline: 3px solid var(--purple-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sug { transition: none; } }