/* demo.html — the five recordings and their captions.

   The @media block at the bottom is not misplaced. `.demo__step`'s base rule is
   declared above it at equal specificity, so a copy of this clause in a shared
   responsive file would lose on source order and the page would stay
   two-column on a phone — a 226px recording on a 375px screen. It belongs after
   its base rule, in this file, and the two must not be separated. */

/* ── Demo page ──────────────────────────────────────────────────
   Five recordings, one per step, alternating sides so the page reads as a
   sequence rather than a stack. The frame is deliberately plain browser chrome:
   the point of the page is that this is the real app, and a phone bezel or a
   drop-shadowed floating laptop would be arguing the opposite. */

.demo { padding-top: clamp(120px, 14vw, 170px); }
.demo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(52px, 6vw, 96px); }
/* The recording is the content here, and the split used to be .74/1.26 — a 682px
   video box holding a 1200px-wide app, which rendered its 15px UI text at about
   8.5px. No amount of bitrate fixes type that small. The copy beside it is four
   lines at most, so it can afford the room. */
.demo__step { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(20px, 3vw, 46px); align-items: center; }
/* Text right on the even ones. Source order stays 1..5 for the reading order.
   The track widths have to flip with it: `order` moves the copy into the second
   column but leaves the wide track where it was, so without this the even-numbered
   recordings — 02 and 04 — render at a third of the width of the odd ones. They
   did exactly that until 2026-08-12, at 414px against 682. */
.demo__step:nth-child(even) { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); }
.demo__step:nth-child(even) .demo__meta { order: 2; }
.demo__n { display: block; font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--ink-50); margin-bottom: 12px; }
.demo__meta p { margin: 0; color: var(--ink-70); font-size: 15.5px; line-height: 1.6; }

/* Stacked, the caption belongs above its recording, so the alternation goes.
   This has to sit here rather than in the shared 980px block above: the base
   .demo__step is declared after that block, same specificity, so source order
   handed it the win and the page stayed two-column all the way down — a 226px
   recording on a 375px phone, which is no recording at all. */
@media (max-width: 980px) {
  /* Both selectors, because the two-column even rule above is a class plus a
     pseudo-class and would otherwise out-specify a bare .demo__step here — a
     media query changes when a rule applies, never how loudly. */
  .demo__step,
  .demo__step:nth-child(even) { grid-template-columns: 1fr; }
  .demo__step:nth-child(even) .demo__meta { order: 0; }
}