/* Product page. Uses tokens from styles.css only. */
.page-head h1 { max-width: 12ch; }
.demo-note { margin-top: 16px; max-width: none; }
.demo-note .demo-full { margin: 0 0 0 8px; font-weight: 600; color: var(--text); }
@media (max-width: 719px) {
  .demo { aspect-ratio: 4 / 3; }
  .demo-poster .say { bottom: 16px; }
}
/* screens */
.scr { display: grid; gap: 32px; align-items: center; margin-top: 96px; }
.scr h3 { font-size: 1.75rem; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .scr { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; margin-top: 144px; }
  .scr:nth-of-type(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .scr:nth-of-type(even) .scr-copy { order: 2; }
}

/* built */
.built { display: grid; gap: 40px; margin: 64px 0 0; }
.built dt { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
.built dd { margin: 8px 0 0; color: var(--quiet); max-width: 40ch; }
@media (min-width: 800px) { .built { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.spec { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .875rem; line-height: 1.8; color: var(--quiet); max-width: none; }

.also { margin-top: 144px; color: var(--quiet); font-size: 1.125rem; font-weight: 500; }