.examples-hero{padding:clamp(80px,10vw,140px) 24px 46px;background:linear-gradient(180deg,#091521,#0b1824)}
.examples-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}.examples-hero .examples-wrap{margin-inline:auto}.examples-hero h1,.watch-copy h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;color:var(--n-50);font-size:clamp(2.8rem,6vw,5.4rem);line-height:.98;max-width:820px;margin:14px 0 20px}.examples-hero p,.watch-copy p{max-width:720px;color:var(--n-300);font-size:1.05rem;line-height:1.7}
.examples-grid{padding-block:56px 96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.example-card{min-width:0}.example-media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--s-inset);border:1px solid var(--line);border-radius:12px}.example-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.example-media:hover img{transform:scale(1.025)}.example-media span{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:7px;background:rgba(4,11,17,.86);color:#fff;font-size:.78rem}.example-card>div{padding:14px 2px}.example-card p{margin:0 0 5px;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.example-card h2{font-size:1rem;margin:0}.example-card h2 a{color:var(--n-50)}.examples-empty{grid-column:1/-1;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.watch-page{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:clamp(72px,9vw,124px) 0 90px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,.62fr);gap:clamp(42px,8vw,110px);align-items:center}.watch-copy .kicker{display:block;margin-top:42px}.watch-copy h1{font-size:clamp(2.6rem,5vw,4.8rem)}.watch-copy .btn{margin-top:18px}.watch-player{background:#05090e;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}.watch-player video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#05090e}
/* FULLSCREEN SHOWS THE WHOLE FRAME, WHATEVER SHAPE IT IS.
   Going fullscreen hands the video element the entire 16:9 screen and drops the 9/16
   aspect-ratio box it normally sits in. `cover` then did what it is defined to do -
   filled that screen and cropped everything outside it - which for a 720x1280 portrait
   render meant a vertical strip through the middle and roughly half the picture gone.
   `contain` fits the frame and pillarboxes the rest, and the rules below make sure the
   element really does get the whole viewport to fit inside, in both the standard and
   the -webkit- spelling, whether the browser fullscreens the video or its wrapper. */
.watch-player video:fullscreen,.watch-player video:-webkit-full-screen{
  width:100%;height:100%;max-width:100vw;max-height:100vh;aspect-ratio:auto;
  object-fit:contain;background:#000}
.watch-player:fullscreen,.watch-player:-webkit-full-screen{
  width:100vw;height:100vh;border:0;border-radius:0;box-shadow:none;background:#000;
  display:flex;align-items:center;justify-content:center}
.watch-player:fullscreen video,.watch-player:-webkit-full-screen video{
  width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:#000}
@media(max-width:900px){.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-page{grid-template-columns:1fr}.watch-player{width:min(480px,100%);margin-inline:auto}}
@media(max-width:560px){.examples-wrap,.watch-page{width:min(100% - 28px,1180px)}.examples-grid{grid-template-columns:1fr;gap:34px}.example-media{border-radius:10px}.watch-page{padding-top:62px}}
/* Coverage line under the Examples hero: a plain factual count, not a badge. */
.examples-coverage{margin-top:14px;color:var(--n-400);font-size:.95rem}
.examples-auto-note{margin-top:6px;font-size:.88rem;opacity:.85;max-width:60ch}