/* Real videos on the site: cards, the inline hero player, the player dialog, showcase filters and the
   wide layout of the sub-pages. Uses the tokens every page defines (--ink, --muted, --line, --gray, --accent, --sans, --mono). */
:root{--gate:#FFC53D;--ink2:#3A3A3F;--maxw:2000px;--gut:clamp(20px,4vw,80px);--colgap:clamp(24px,3.2vw,72px)}

/* video cards */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(44px,3.4vw,64px) clamp(20px,1.8vw,36px);text-align:left}
.vgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.vgrid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.vgrid.three{grid-template-columns:1fr}}
.vc{display:grid;grid-template-rows:auto 1fr;gap:18px;color:inherit;text-decoration:none!important;min-width:0}
.vc[hidden]{display:none}
.vc-im{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0E0E14;box-shadow:0 0 0 1px rgba(0,0,0,.06);isolation:isolate}
.vc-im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.42));opacity:0;transition:opacity .3s}
.vc:hover .vc-im::after,.vc:focus-visible .vc-im::after{opacity:1}
.vc-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.vc-im.tall img{object-fit:contain}
.vc:hover .vc-im img{transform:scale(1.04)}
.vc:focus-visible{outline:none}
.vc:focus-visible .vc-im{outline:2px solid var(--accent);outline-offset:3px}
.vc-play{position:absolute;z-index:1;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 13px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font:600 14px var(--sans);letter-spacing:-.01em;box-shadow:0 8px 24px -8px rgba(0,0,0,.55);transition:background .2s,color .2s}
.vc-play::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.vc:hover .vc-play,.vc:focus-visible .vc-play{background:var(--accent);color:#fff}
.vc-tag{position:absolute;z-index:1;right:12px;top:12px;display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--sans);letter-spacing:-.005em;color:#fff;background:rgba(12,12,18,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 11px 6px 10px;border-radius:999px}
.vc-tag i{width:9px;height:9px;background:var(--gate);transform:rotate(45deg);border-radius:1.5px}
.vc-tx{display:grid;gap:6px;align-content:start}
.vc-tx b{font-size:clamp(18px,1.2vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.22;color:var(--ink)}
.vc-k{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:14px;font-weight:500;color:var(--ink2)}
.vc-k span{color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.vc-k span::before{content:"";width:1px;height:12px;background:var(--line)}
.vc-d{font-size:clamp(15px,.95vw,16.5px);color:var(--muted);line-height:1.5;margin-top:4px;max-width:52ch}
.night .vc-tx b{color:#F5F5F7}
.night .vc-d,.night .vc-k{color:var(--nmuted,#A1A1A6)}
.vc-ast{color:var(--accent);margin-left:1px}
.vc-note{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin:4px 0 0;max-width:52ch}

/* hero: the real player, in place */
.inplay{position:relative;border-radius:20px;overflow:hidden;background:#07070C;aspect-ratio:16/9;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 50px 100px -50px rgba(20,20,40,.55)}
.inplay>a{position:absolute;inset:0;display:block;color:#fff;text-decoration:none!important}
.inplay img{width:100%;height:100%;object-fit:cover;display:block}
.inplay>a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.66))}
.inplay .big{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:transform .3s,background .2s}
.inplay .big::after{content:"";margin-left:6px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent var(--ink)}
.inplay>a:hover .big{transform:scale(1.06)}
.inplay .cap{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;text-align:left;font-size:15px;font-weight:500}
.inplay .cap .vc-tag{position:static}
.inplay.on{background:#000}
.inplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.inplay .big{width:64px;height:64px;margin:-32px 0 0 -32px}.inplay .big::after{border-width:11px 0 11px 18px;margin-left:5px}.inplay .cap{left:14px;right:14px;bottom:12px;font-size:13px}.inplay .cap>span:not(.vc-tag){display:none}.inplay{border-radius:16px}}

/* player dialog */
.vdlg{border:0;padding:0;background:transparent;width:min(1400px,calc(100vw - 48px));max-width:none;max-height:none;color:#fff;overflow:visible}
.vdlg::backdrop{background:rgba(8,8,12,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vdlg-bar{display:flex;align-items:center;gap:16px;padding:0 4px 12px;font-size:15px}
.vdlg-t{margin-right:auto;font-weight:600;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdlg-open{color:#C7C6FF!important;font-size:14px;white-space:nowrap}
.vdlg-x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.vdlg-x:hover{background:rgba(255,255,255,.26)}
.vdlg-stage{aspect-ratio:var(--ar,16/9);max-height:calc(100vh - 120px);margin-inline:auto;border-radius:16px;overflow:hidden;background:#000}
.vdlg-stage.tall{height:calc(100vh - 120px);width:auto}
.vdlg-stage iframe{width:100%;height:100%;border:0;display:block}
.vdlg-stage:focus{outline:none}
.vdlg-note{font-size:13px;color:#C7C7CC;padding:10px 4px 0;text-align:left}
html.vdlg-on{overflow:hidden}

/* sub-pages (showcase, formats, sales): the same wide grid as the homepage */
main:has(>.phero){padding-inline:var(--gut)}
.phero{max-width:var(--maxw);margin:0 auto;padding-block:clamp(56px,6vw,120px) clamp(36px,3vw,64px);display:grid;gap:22px var(--colgap)}
@media (min-width:1100px){.phero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}.phero .eb{grid-column:1/-1;margin:0}.phero .lede{padding-bottom:.5em}}
.phero .eb{font:600 clamp(15px,.95vw,17px) var(--sans);letter-spacing:-.01em;color:var(--accent);margin:0}
.phero h1{font-size:clamp(40px,4.6vw,88px);line-height:1;letter-spacing:-.055em;margin:0;max-width:15ch;text-wrap:balance}
.phero .lede{font-size:clamp(18px,1.25vw,22px);line-height:1.45;color:var(--muted);max-width:46ch;margin:0;letter-spacing:-.015em}
.psec{max-width:var(--maxw);margin:0 auto;padding-block:clamp(40px,4vw,80px)}
.psec h2{font-size:clamp(28px,2.4vw,46px);letter-spacing:-.045em;line-height:1.05;margin:0 0 12px;text-wrap:balance}
.psec .sp2{color:var(--muted);font-size:clamp(17px,1.15vw,20px);max-width:60ch;margin:0 0 clamp(32px,3vw,56px)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 clamp(32px,3vw,52px);padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters button{font:500 15px var(--sans);letter-spacing:-.01em;padding:9px 16px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;color:var(--ink);cursor:pointer}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);box-shadow:none;color:#fff}
.filters .sep{width:1px;height:22px;background:var(--line);margin-inline:6px}
.filters .n{margin-left:auto;font-size:14px;font-weight:500;color:var(--muted)}
@media (max-width:640px){.filters .n{margin-left:0;flex-basis:100%}}

.outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px var(--colgap)}
.outs div{border-top:2px solid var(--ink);padding-top:20px}
.outs b{display:block;font-size:clamp(18px,1.2vw,21px);letter-spacing:-.025em;margin-bottom:6px}
.outs p{margin:0;color:var(--muted);font-size:clamp(15.5px,1vw,17px);max-width:40ch}
.psec .cta{margin-top:clamp(24px,3vw,56px);padding:clamp(32px,4.4vw,88px);border-radius:28px;background:var(--ink);color:#fff;display:grid;gap:18px;justify-items:start}
.psec .cta h2{color:#fff;font-size:clamp(32px,3.4vw,64px);margin:0}
.psec .cta p{color:#A1A1A6;font-size:clamp(17px,1.2vw,21px);max-width:52ch}
.psec .cta .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.psec .cta .pill.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.psec .cta .pill.ghost:hover{background:rgba(255,255,255,.1)}
.preview-note{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;font:500 12px var(--mono);background:#1D1D1F;color:#fff;border-radius:12px;padding:10px 12px;display:grid;gap:6px;max-width:300px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.preview-note a{color:#C7C6FF}
@media (prefers-reduced-motion:reduce){.vc-im,.vc-im img,.vc-play,.inplay .big{transition:none}}
.psec>h2+.outs{margin-top:clamp(28px,2.6vw,48px)}