/* "Get my video" band under the agentic workflow video: the teaser leaves the copy column
   for a centred card below the copy | video stage; it opens the stack picker inside the
   same card, which then widens to the content width. Loaded after workflow-stack.css and
   scoped to .mcp-section--band, so the section without that class doesn't change.
   Closed, the card is compact (it hugs the thumbnail and copy), edged in citron, with a small
   arrow up to the video; open, it widens for the picker. js/workflow-stack.js is unchanged (it fills the #ws-teaser-thumb thumbnail). */

.mcp-section--band .ws-band {
  position: relative; width: fit-content; max-width: min(100%, 560px); margin: calc(var(--l-section-gap) + 8px) auto 0;
  background: rgba(201, 254, 255, .05); border: 1px solid rgba(201, 254, 255, .22); border-radius: 12px;
  transition: background .2s ease, border-color .2s ease;
}
/* No script: the teaser and picker stay hidden, so drop the empty card too. */
.mcp-section--band .ws-band:not(:has(> :not([hidden]))) { display: none; }
/* Open: the picker needs the full content width. */
.mcp-section--band .ws-band:has(.ws-section:not([hidden])) { width: auto; max-width: 100%; }

/* Closed: citron edge and an arrow up to the video. The whole card is the button. */
.mcp-section--band .ws-band:not(:has(.ws-section:not([hidden]))) {
  background: rgba(201, 254, 255, .07); border-color: rgba(255, 250, 102, .5);
}
.mcp-section--band .ws-band:not(:has(.ws-section:not([hidden])))::before {
  content: ""; position: absolute; bottom: calc(100% + 8px); left: 50%; width: 20px; height: 40px; margin-left: -10px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' fill='none' stroke='%23FFFA66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 38V3M3 10l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: ws-band-nudge 2.4s ease-in-out infinite;
}
@keyframes ws-band-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.mcp-section--band .ws-band:not(:has(.ws-section:not([hidden]))):has(.ws-teaser:hover) {
  background: rgba(201, 254, 255, .1); border-color: rgba(255, 250, 102, .85);
}

/* ---------- Teaser: thumbnail | copy, the button under the copy ---------- */
.mcp-section--band .ws-teaser {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 20px;
  margin: 0; padding: 20px 24px; background: none; border: 0;
}
.mcp-section--band .ws-teaser:hover { background: none; }
/* The video above is the main visual: keep the thumbnail small. */
.mcp-section--band .ws-teaser-thumb { grid-row: span 2; zoom: .6; }
.mcp-section--band .ws-teaser-copy { gap: 4px; }
.mcp-section--band .ws-teaser .ws-teaser-cta { justify-self: start; align-self: start; margin-top: 0; }

/* ---------- Picker inside the card ---------- */
.mcp-section--band .ws-band .ws-section { margin-top: 0; padding: 0 48px 48px; }
/* Open: the teaser lines up with the picker's left edge. */
.mcp-section--band .ws-band:has(.ws-section:not([hidden])) .ws-teaser { padding: 32px 48px 24px; }

@media (max-width: 1023.98px) {
  .mcp-section--band .ws-band .ws-section { padding: 0 32px 32px; }
  .mcp-section--band .ws-band:has(.ws-section:not([hidden])) .ws-teaser { padding: 24px 32px 20px; }
}
/* Phones: a smaller thumbnail beside the copy, the button below both. */
@media (max-width: 599.98px) {
  .mcp-section--band .ws-teaser { gap: 14px 16px; padding: 18px; }
  .mcp-section--band .ws-teaser-thumb { grid-row: auto; zoom: .5; }
  .mcp-section--band .ws-teaser .ws-teaser-cta { grid-column: 1 / -1; }
  .mcp-section--band .ws-band .ws-section { padding: 0 12px 12px; }
  .mcp-section--band .ws-band:has(.ws-section:not([hidden])) .ws-teaser { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcp-section--band .ws-band { transition: none; }
  .mcp-section--band .ws-band::before { animation: none; }
}