/* ═══════════════════════════════════════════════════════════════
   COLLAGE STUDIO - real designer screenshot as the hero, and the
   saved pages themselves as contact prints. No demo animation.
   ═══════════════════════════════════════════════════════════════ */

.cs-shot { margin: 0; }
.cs-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0 0 0 / 0.45);
}

.cs-prints { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.cs-row { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); align-items: flex-start; }
.cs-row .cs-print { flex: var(--ar) 1 0; min-width: 0; }   /* width follows aspect = equal heights */
.cs-print { margin: 0; }
.cs-print img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 3px; background: var(--carbon-2);
}
.cs-print figcaption { color: var(--dim); font-size: 0.6rem; letter-spacing: 0.16em; margin-top: 0.7rem; }
@media (max-width: 720px) { .cs-row { flex-direction: column; } }

/* Launch pricing: the struck price from Nov 1 beside the live one (same pattern as /thumbs). */
.btn:has(.cs-launch) { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.cs-launch {
  padding: 0.14rem 0.4rem; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: 0.5rem; letter-spacing: 0.2em;
}
.btn s { opacity: 0.55; }
.btn:has(s) { gap: 0 0.5em; }        /* flex drops the spaces between the prices */