/* ============================================================================
   video.css — the one dark section on the page.
   Sits below the pipeline. The transition in and out is built, not implied:
   white → a sunken step with a hairline → the dark band → sunken step → white.
   ========================================================================== */

/* Both ramps already run toward the dark — the sunken grey is the edge that
   touches the band at both joins. That was never the bug. The bug was that
   #f5f5f6 cannot bridge a 94% luminance drop on its own, so the join read as
   a one-pixel cliff regardless of which way the ramp pointed. The bridge is
   built inside .vid below, not out here. */
.vid-lead,
.vid-out {
  height: 96px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-sunken) 100%);
  border-top: 1px solid var(--line);
  position: relative;
}
.vid-out {
  background: linear-gradient(180deg, var(--bg-sunken) 0%, var(--bg) 100%);
  border-top: 0;
}
/* A single hairline drops out of the light section and dies in the dark —
   the join reads as intentional rather than as a colour change. */
.vid-lead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, var(--line-strong) 18%, var(--line-strong) 82%, rgba(0,0,0,0) 100%);
}

.vid {
  /* Three layers: a top bleed lifting out of the grey ramp, a bottom bleed
     falling back into it, and the flat band between. 90px each, so the eye
     crosses roughly 6% of luminance per 6px instead of 94% in one row. */
  background:
    linear-gradient(180deg, #171a1d 0%, #0f1113 44%, var(--dark-bg) 100%) top / 100% 90px no-repeat,
    linear-gradient(180deg, var(--dark-bg) 0%, #0f1113 56%, #171a1d 100%) bottom / 100% 90px no-repeat,
    var(--dark-bg);
  color: var(--dark-ink);
  padding: 118px 0 128px;
  position: relative;
  overflow: hidden;
}
/* Barely-there vignette so the band has a centre of gravity. */
.vid::before {
  content: "";
  position: absolute; inset: -20% -10% auto;
  height: 70%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(255,255,255,.075), rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.vid > .wrap { position: relative; }

.vid__head { max-width: 620px; margin: 0 0 56px; text-align: left; }
.vid__kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-mute);
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 20px;
}
.vid__kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--dot-live);
}
.vid h2 { color: var(--dark-ink); }
.vid h2 .dim { color: var(--dark-mute); }

/* ---------- the window — the hero's product frame, inverted --------------- */

.vid__win {
  max-width: 940px;
  margin: 0 auto;
  border-radius: var(--r-win);
  border: 1px solid var(--dark-line);
  background: var(--dark-soft);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 30px 70px -20px rgba(0,0,0,.75);
}
.vid__bar {
  height: 36px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--dark-line);
  background: rgba(255,255,255,.02);
}
.vid__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2c3036; flex: none; }
.vid__bar b {
  margin-left: 10px;
  min-width: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vid__stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}
.vid__stage video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

/* ---------- click-to-play overlay ---------------------------------------- */

.vid__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; padding: 0; margin: 0;
  /* Was a flat rgba(6,7,8,.28) over the whole poster, which muddied an
     already-dark still. A vignette behind the button only. */
  background: radial-gradient(38% 38% at 50% 50%, rgba(6,7,8,.34), rgba(6,7,8,0) 70%);
  cursor: pointer;
  transition: opacity .22s ease, visibility .22s;
}
.vid__play span {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #08090a;
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.vid__play:hover span { transform: scale(1.055); }
.vid.is-playing .vid__play { opacity: 0; visibility: hidden; }

/* ---------- custom controls ---------------------------------------------- */

.vid__ctl {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.vid.is-playing .vid__stage:hover .vid__ctl,
.vid.is-playing .vid__ctl:focus-within,
.vid.is-paused .vid__ctl { opacity: 1; transform: none; }

/* On a device with no hover, a playing video would otherwise show no controls
   at all and no affordance saying how to get them back. Pin them open. */
@media (hover: none) {
  .vid__ctl { opacity: 1; transform: none; }
}

.vid__btn {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.88);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.vid__btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.vid__btn:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 1px; }

.vid__scrub {
  flex: 1 1 auto;
  -webkit-appearance: none; appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.vid__scrub::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #fff 0 var(--p, 0%), rgba(255,255,255,.26) var(--p, 0%) 100%);
}
.vid__scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 0;
  margin-top: -4px;
  opacity: 0; transition: opacity .14s ease;
}
.vid__scrub:hover::-webkit-slider-thumb,
.vid__scrub:focus-visible::-webkit-slider-thumb { opacity: 1; }
.vid__scrub::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.26); }
.vid__scrub::-moz-range-progress { height: 3px; border-radius: 3px; background: #fff; }
.vid__scrub::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }

.vid__time {
  flex: none;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .02em;
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
  min-width: 76px;
  text-align: right;
}

/* ---------- caption under the window -------------------------------------- */

.vid__note {
  max-width: 940px;
  margin: 22px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: 14px;
  color: var(--dark-mute);
  letter-spacing: -0.008em;
}
.vid__note .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px) {
  .vid { padding: 76px 0 84px; }
  .vid-lead, .vid-out { height: 64px; }
  .vid__head { margin-bottom: 34px; }
  .vid__play span { width: 60px; height: 60px; }
  .vid__time { min-width: 68px; }
  .vid__note { justify-content: center; text-align: center; }
  .vid__bar b { display: none; }
}