/* Use-case pages (history-videos.html etc.). Builds on legal.css. */
:root {
  --gold: #f2b544;
  --gold-hi: #ffcf6b;
  --gold-lo: #e09a22;
  --on-gold: #111316;
}
.doc h1 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -0.04em; }
.lead { margin: 14px 0 0; font-size: 18px; color: #2b3038; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 26px 0 0; }
.btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px;
  border: 1px solid var(--gold-lo); border-radius: 8px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  color: var(--on-gold) !important; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 4px 16px rgba(224, 154, 34, 0.25);
}
.btn:hover { transform: translateY(-1px); }
.cta small { color: var(--muted); font-size: 14px; }
.clip { margin: 34px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 2px 8px rgba(15,17,21,.04); }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.clip figcaption { padding: 10px 14px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.examples li { margin: 0; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; }
.popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.popular li { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.popular a { display: block; color: inherit; text-decoration: none; }
.popular a:hover strong { text-decoration: underline; }
.popular img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.popular strong { display: block; padding: 10px 12px 0; font-size: 14.5px; line-height: 1.35; }
.popular .by { display: block; padding: 4px 12px 0; font-size: 13px; color: var(--muted); }
.popular p { margin: 6px 12px 12px; font-size: 13.5px; line-height: 1.45; }
.related { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }
.related li + li { margin-top: 0; }
.end { margin: 52px 0 0; padding: 26px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); }
.end h2 { margin-top: 0; }