/* extras.css -- About (#/about) and the guided-tour video page (#/tour). Owner: public-demo prep.
   Colors from tokens only; .xtr-* prefix. Mirrors .ptn-page's width/padding convention (partner.css). */

.xtr-page { max-width: 720px; margin: 0 auto; padding: 28px var(--gutter, 24px) 64px; }
.xtr-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.015em; margin: 4px 0 var(--s3); }
.xtr-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.xtr-lede { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); margin: 0 0 var(--s3); }
.xtr-page p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s3); }
.xtr-page .meta { margin: var(--s2) 0 0; }

.xtr-video-wrap {
  background: var(--bg-pane); border: 1px solid var(--line-subtle); border-radius: var(--r-card);
  padding: var(--s2); margin: var(--s4) 0;
}
.xtr-video { display: block; width: 100%; height: auto; border-radius: 6px; background: #000; }

.xtr-summary { border-top: 1px solid var(--line-subtle); padding-top: var(--s2); }
.xtr-chapters { margin: 0 0 var(--s3); padding-left: 1.4em; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--text); }
.xtr-chapters li { margin: 2px 0; }

@media (max-width: 720px) {
  .xtr-page { padding: 20px 16px 48px; }
}