/* ─────────────────────────────────────────────────────────────
   Product section — the film and the chapters beside it.

   The app's interface is no longer drawn by this stylesheet. It is
   rendered ahead of time by the HyperFrames composition in video/,
   which owns every pixel inside the phone: the chrome, the shadow,
   the Liquid-Glass tab bar and the paper the whole thing sits on.
   What survives here is the page-level furniture — the two-column
   layout, the chapter list, and the video slot itself.

   Consequences worth knowing before editing:
   - the phone's frame, radius and drop shadow are inside the video,
     so do not re-draw them around the element
   - the video's background is --paper-deep, the same token the
     surrounding .scene--deep uses; change one and the seam shows
   ───────────────────────────────────────────────────────────── */

.demo{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:960px){.demo{grid-template-columns:minmax(0,1fr) 440px}}

/* 880×1356 is the composition's canvas; the intrinsic size is declared on
   the element too, so the row reserves its height before the file arrives
   and nothing below it jumps. */
.demo__film{
  order:2;display:block;width:100%;max-width:440px;height:auto;
  margin-inline:auto;background:var(--paper-deep);
}
@media(min-width:960px){.demo__film{margin-inline:0}}

/* ── side rail: the chapters ──
   The film is decorative; this column is the text of the same story, so
   it has to read on its own for anyone who doesn't watch it. The playing
   chapter comes forward rather than the finished ones fading out — a loop
   has no finished state to mark. */
.demo__side{order:1;display:flex;flex-direction:column;gap:20px}
.demo__chapters{display:flex;flex-direction:column;gap:2px;counter-reset:ch}
.demo__ch{
  display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair);
  opacity:.5;transition:opacity var(--dur) var(--ease);
}
.demo__ch:last-child{border-bottom:0}
.demo__ch[data-on="1"]{opacity:1}
.demo__ch__n{
  counter-increment:ch;flex-shrink:0;
  width:23px;height:23px;border-radius:99px;display:grid;place-items:center;
  border:1px solid var(--hair);font-family:var(--mono);font-size:11px;color:var(--sub);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.demo__ch__n::before{content:counter(ch)}
.demo__ch[data-on="1"] .demo__ch__n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.demo__ch__t{font-size:15px;font-weight:600;line-height:1.35}
.demo__ch__p{margin-top:4px;font-size:13.5px;color:var(--sub);line-height:1.5}
.demo__note{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--faint)}

/* ── mobile: product first ──
   On desktop the chapters sit in a column beside the app. Stacked on a
   phone they push the app itself below the fold, so a visitor reads six
   captions before seeing the thing they caption. Swap the order.
   This lives here, not in site.css: demo.css loads second, so an override
   there would lose to the base `order` rules above at equal specificity. */
@media(max-width:720px){
  .demo{gap:22px}
  .demo__film{order:1;max-width:340px}
  .demo__side{order:2}
  .demo__ch{padding:9px 0;align-items:center}
  .demo__ch__p{display:none}
  .demo__ch__t{font-size:14px}
}