/* demo ONLY: "Watch the demo" module. Added on top of the live styles.css; nothing there is changed. */
.demo-card {
  width: min(100%, 19rem);           /* ~304px on desktop */
  margin: 1.35rem 0 0;
  background: color-mix(in srgb, #fff 55%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 1rem;
  box-shadow: var(--shadow);
}
.demo-card h2 {
  margin: 0.1rem 0.15rem 0.6rem;
  font-size: 1.25rem;
}
.demo-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.demo-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-card__play {
  position: absolute;
  inset: 0;
  display: none;                     /* shown only once JS is running; without JS the native controls work */
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.demo-card.js .demo-card__play { display: grid; }
/* Before the first click, keep Chrome/Safari's native control bar off the poster (it would cover the burned-in caption).
   The <video controls> attribute stays; the bar appears as soon as playback starts. */
.demo-card.js:not(.is-playing) video::-webkit-media-controls { display: none !important; }
.demo-card__play span {
  position: absolute;                /* a bit below centre so it clears the DENIED stamp in the poster */
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-ink);
  box-shadow: 0 8px 24px rgba(22, 20, 15, 0.35);
}
.demo-card__play span::before {
  content: "";
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent var(--accent-ink);
}
.demo-card__play:hover span { background: #14483a; }
.demo-card.js.is-playing .demo-card__play { display: none; }
.demo-card__caption {
  margin: 0.7rem 0.15rem 0.15rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}
.demo-card__meta {
  margin: 0 0.15rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Desktop: sit in a right-hand column beside the existing hero content (hero DOM order unchanged). */
@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: 3rem;
    align-items: start;
  }
  .hero > * { grid-column: 1; }
  /* grid items don't collapse margins; zero h1's top margin so the hero keeps its exact original spacing */
  .hero > h1 { margin-top: 0; }
  .hero > .demo-card {
    grid-column: 2;
    grid-row: 1 / span 20;
    margin-top: 0.2rem;
  }
}

/* Keep the sticky header from covering sections when jumping from the menu. */
html { scroll-padding-top: 5rem; }