/* One continuous presentation surface; the native video framing stays intact. */
.flow-module {
  overflow: hidden;
  border: 1px solid #dddfe0;
  border-radius: 8px;
  background: #fafafa;
}
.flow-tablist {
  margin-bottom: 0;
  border-bottom-color: #dddfe0;
}
.flow-tab {
  min-height: 72px;
  padding: 18px 22px 15px;
}
.flow-tab-number { margin-right: 11px; }
.flow-tab-subtitle { margin-top: 4px; margin-left: 29px; }
.flow-tab:focus-visible { outline-offset: -6px; }
.flow-panel {
  gap: 32px;
  padding: 24px;
  align-items: center;
}
.flow-visual, .flow-copy { min-width: 0; }
.flow-media {
  aspect-ratio: 16 / 9;
  background: #fafafa;
}
.flow-media img, .flow-media video { object-fit: contain; }
.flow-copy { padding: 7px 8px 7px 0; }
.flow-copy h3 { margin-bottom: 16px; }
.flow-facts { margin-top: 18px; padding-top: 15px; }
.flow-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid #e1e3e4;
}
.flow-toolbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.flow-toolbar .flow-scene-state {
  position: static;
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: .76rem;
  line-height: 1.5;
  color: #596168;
}
.flow-toolbar .flow-image-play,
.flow-toolbar .flow-image-play.is-compact,
.flow-toolbar .flow-image-replay {
  position: static;
  flex: none;
  transform: none;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #22272b;
  border-radius: 4px;
  box-shadow: none;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 550;
}
.flow-toolbar .flow-image-play {
  background: #202428;
  color: #fff;
}
.flow-toolbar .flow-image-play:hover { background: #3d4349; }
.flow-toolbar .flow-image-replay {
  background: transparent;
  color: #41494f;
  border-color: #d5d9dc;
}
.flow-toolbar .flow-image-replay:hover {
  border-color: #7b8389;
  background: #f0f1f2;
}
.flow-toolbar button:disabled { opacity: .45; cursor: default; }
.flow-legend { padding-top: 12px; gap: 16px; }
.flow-cutaway { margin-top: 7px; }
.flow-footer {
  margin-top: 0;
  min-height: 0;
  padding: 14px 24px;
  border-top: 1px solid #e1e3e4;
  gap: 12px 24px;
}
.flow-footer .flow-status,
.flow-footer .flow-caption {
  margin: 0;
  min-height: 0;
  font-size: .7rem;
}
#flow-panel-engage .flow-media img,
#flow-panel-engage .flow-media video {
  transform: translateX(10%) scale(1.2);
  transform-origin: 34.29% 50.13%;
}
@media (max-width: 1100px) {
  .flow-panel { gap: 25px; padding: 22px; }
}
@media (max-width: 850px) {
  .flow-panel { gap: 24px; }
  .flow-copy { padding: 0; }
}
@media (max-width: 700px) {
  .flow-module { border-radius: 6px; }
  .flow-tab { min-height: 66px; padding: 14px 12px 13px; }
  .flow-tab-number { margin: 0 0 6px; }
  .flow-tab-label { font-size: .84rem; }
  .flow-panel { gap: 21px; padding: 15px 14px 22px; }
  .flow-toolbar { gap: 8px; min-height: 62px; padding-block: 9px; }
  .flow-toolbar .flow-scene-state { font-size: .71rem; }
  .flow-toolbar .flow-image-play,
  .flow-toolbar .flow-image-play.is-compact,
  .flow-toolbar .flow-image-replay { padding: 10px 11px; font-size: .72rem; }
  .flow-footer { padding: 13px 14px; gap: 5px 14px; }
  .flow-footer .flow-status,
  .flow-footer .flow-caption { font-size: .65rem; }
  .flow-legend { font-size: .7rem; gap: 12px; }
  .flow-cutaway { font-size: .66rem; }
}