/* Batchly site videos: the one player block (home, pricing, the library).
   Tokens fall back across the site's two stylesheets: index.html names
   --hair / --ink-soft / --backroom, pricing.html names --line / --mut, so
   the block reads the page it sits on and never carries its own palette. */
.vid{
  --v-paper:var(--paper,#FFFFFF);
  --v-line:var(--hair,var(--line,#E7DBC8));
  --v-mut:var(--ink-soft,var(--mut,#726657));
  --v-ink:var(--ink,#221C15);
  --v-clay:var(--clay,#C8511D);
  --v-clay2:var(--clay-deep,var(--clay2,#A8410F));
  --v-dark:var(--backroom,#17130F);
  --v-on-clay:#FFFFFF;
  --v-disp:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --v-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --v-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --v-max:960px;
}
.vid-wrap{max-width:var(--v-max);margin:0 auto;padding:0 24px}
.vid-head{text-align:center;margin-bottom:1.3rem}
.vid-head h2{font-family:var(--v-disp);font-weight:600;font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.08;margin:.45rem 0 0;text-wrap:balance}
.vid-head p.sub{color:var(--v-mut);margin:.6rem auto 0;max-width:46ch;font-size:1rem}
.vid-player{margin:0}
.vid-frame{position:relative;aspect-ratio:16/9;background:var(--v-dark);border-radius:18px;overflow:hidden;border:1px solid var(--v-line);box-shadow:0 1px 2px rgba(34,28,21,.05),0 26px 54px -32px rgba(34,28,21,.5)}
.vid-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,15,0) 50%,rgba(23,19,15,.62));pointer-events:none}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vid-video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
.vid-label{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#F3ECE0;pointer-events:none}
.vid-label .vid-series{font-family:var(--v-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#C6A578}
.vid-label .vid-name{font-family:var(--v-disp);font-weight:600;font-size:clamp(1rem,2.2vw,1.3rem);letter-spacing:-.01em;line-height:1.2;margin-top:.2rem;text-wrap:balance}
.vid-label .vid-from{font-size:13px;color:#C9BBA6;margin-top:.25rem}
.vid-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.65rem;background:var(--v-clay);color:var(--v-on-clay);border:0;border-radius:999px;padding:.55rem 1.35rem .55rem .55rem;font:600 15px/1 var(--v-body);cursor:pointer;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);transition:transform .12s,background .12s;white-space:nowrap}
.vid-play:hover{background:var(--v-clay2);transform:translate(-50%,-50%) scale(1.04)}
.vid-play:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vid-play .vid-play-ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.vid-play svg{width:22px;height:22px;display:block;margin-left:3px}
.vid-note{display:none;position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:min(88%,34ch);margin:0;text-align:center;background:rgba(23,19,15,.86);color:#F3ECE0;border:1px solid rgba(243,236,224,.18);border-radius:14px;padding:1rem 1.2rem;font:15px/1.5 var(--v-body)}
.vid-note b{display:block;font-family:var(--v-disp);font-weight:600;font-size:1.1rem;margin-bottom:.25rem}
.vid-note a{color:#FFB487}
.vid-player[data-state="loading"] .vid-video{visibility:hidden}
.vid-player[data-state="loading"] .vid-play{opacity:.8;pointer-events:none}
.vid-player[data-state="playing"] .vid-poster,.vid-player[data-state="playing"] .vid-play,.vid-player[data-state="playing"] .vid-label,.vid-player[data-state="playing"] .vid-frame::after{display:none}
.vid-player[data-state="missing"] .vid-play{display:none}
.vid-player[data-state="missing"] .vid-label{display:none}
@media(min-width:700px){.vid-player[data-state="missing"] .vid-label{display:block}}
.vid-player[data-state="missing"] .vid-note{display:block}
.vid-player[data-state="missing"] .vid-poster{opacity:.55}
.vid-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1.2rem;margin:.9rem .2rem 0;font:14.5px/1.5 var(--v-body);color:var(--v-mut)}
.vid-cap .vid-links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.vid-cap .vid-links a{color:var(--v-clay);font-weight:600;text-decoration:none;white-space:nowrap}
.vid-cap .vid-links a:hover{color:var(--v-clay2);text-decoration:underline}
@media(max-width:520px){
  .vid-wrap{padding:0 16px}
  .vid-frame{border-radius:12px}
  .vid-play{padding:.4rem 1rem .4rem .4rem;font-size:14px}
  .vid-play .vid-play-ic{width:36px;height:36px}
  .vid-label{left:12px;right:12px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){.vid-play{transition:none}.vid-play:hover{transform:translate(-50%,-50%)}}