/* The field library (/videos). Rides the lg-doc frame from legal.css; everything here is the
   player, the card grids, and nothing else. The wide
   crop scales on every viewport; the page preloads nothing, so it paints one poster and no
   video bytes until the reader presses play. */

.vid-doc {
  --vid-text-muted: #515965;
  --vid-text-accent: #994619;
  width: min(860px, 100% - 48px);
}

/* ---------------- player ---------------- */
/* The player, its caption, and the CTA read as one centered column; the body copy stays
   left-aligned reading text between them. */
.vid-player { margin: 38px 0 0; }
.vid-player video {
  display: block; width: 100%; height: auto; border-radius: 12px;
  background: #111827; box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
}
.vid-wide { aspect-ratio: 16 / 9; }
.vid-caption {
  margin: 14px auto 0; max-width: 60ch; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--vid-text-muted);
}

/* ---------------- body copy ---------------- */
.vid-body { margin-top: 36px; }
.vid-body p { font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }

/* ---------------- CTA row ---------------- */
/* Scoped under .vid-doc on purpose: legal.css paints every .lg-doc anchor ember-deep and
   underlined at class+type specificity, which beat the bare .vid-cta-main class and rendered
   the button's wording ember-on-ember, invisible on every deploy until this. Two classes
   outrank class+type; nothing here relies on ordering or !important. */
.vid-cta { display: flex; gap: 18px; align-items: center; justify-content: center; margin: 40px 0 8px; flex-wrap: wrap; }
.vid-doc .vid-cta-main {
  display: inline-block; background: var(--ember); color: var(--text, #111827); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 8px;
}
.vid-doc .vid-cta-main:hover { background: #d06f3c; color: var(--text, #111827); }
.vid-doc .vid-cta-quiet { font-size: 14.5px; font-weight: 600; color: var(--vid-text-accent); text-decoration: none; }
.vid-doc .vid-cta-quiet:hover { text-decoration: underline; color: var(--vid-text-accent); }

/* ---------------- the picker ---------------- */
/* Two chip rows, every page: seats, then lines of work. The current pair is filled ember with
   ink wording; every other chip is a quiet bordered pill. Rescoped like the CTA above. */
.vid-picker { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border, rgba(17,24,39,0.12)); display: grid; gap: 14px; }
.vid-picker-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vid-picker-label {
  flex: 0 0 100%; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vid-text-muted);
}
@media (min-width: 720px) { .vid-picker-label { flex: 0 0 110px; } }
.vid-doc .vid-chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-2, #d1d5db); background: none;
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  color: var(--text, #111827); text-decoration: none; white-space: nowrap;
}
.vid-doc .vid-chip:hover { border-color: var(--ember); color: var(--text, #111827); }
.vid-doc .vid-chip.is-current {
  background: var(--ember); border-color: var(--ember); color: var(--text, #111827);
}

/* ---------------- card grids (hub and industry pages) ---------------- */
.vid-grid { display: grid; gap: 26px; margin-top: 34px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .vid-grid { grid-template-columns: repeat(3, 1fr); } }
.vid-doc .vid-card { display: block; text-decoration: none; color: var(--text, #111827); }
.vid-card img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #111827; box-shadow: 0 10px 28px rgba(17, 24, 39, 0.14);
  transition: transform 160ms ease;
}
.vid-card:hover img { transform: translateY(-2px); }
.vid-card-text { display: grid; gap: 4px; padding: 12px 2px 0; }
.vid-card-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vid-text-accent);
}
.vid-card-text strong { font-size: 16px; line-height: 1.4; }
.vid-card-sub { font-size: 13.5px; line-height: 1.55; color: var(--vid-text-muted); }

/* The hub's index: one row per industry, its poster beside its three audience links. */
.vid-index { display: grid; gap: 34px; margin-top: 34px; }
.vid-card--row { max-width: 560px; }
.vid-tier-links { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.vid-doc .vid-tier-links a { color: var(--vid-text-accent); text-decoration: none; font-weight: 600; }
.vid-doc .vid-tier-links a:hover { text-decoration: underline; }

.vid-personal { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border, rgba(17,24,39,0.12)); }
.vid-personal h2 { font-size: 17px; margin: 0 0 8px; }
.vid-personal p { font-size: 15.5px; line-height: 1.7; margin: 0; }
.vid-doc .vid-personal a { color: var(--vid-text-accent); font-weight: 600; text-decoration: none; }
.vid-doc .vid-personal a:hover { text-decoration: underline; }

/* Breadcrumb separator spacing matches the Help Center's crumb. */
.crumb-sep { color: rgba(17, 24, 39, 0.35); }