/* Interview demo: every component rule is scoped to .hd-demo. */
.hd-demo { line-height: normal; }
.hd-demo h4, .hd-demo h5 { margin: 0; max-width: none; }
.hd-demo {
  color-scheme: light;
  --hd-ink: var(--ink);
  --hd-muted: var(--muted);
  --hd-blue: var(--accent);
  --hd-line: var(--line);
  --hd-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
}
.hd-demo * {
  box-sizing: border-box;
}
.hd-demo button,
.hd-demo input,
.hd-demo a {
  -webkit-tap-highlight-color: transparent;
}
.hd-demo button,
.hd-demo input {
  font: inherit;
}
.hd-demo button,
.hd-demo a {
  touch-action: manipulation;
}
.hd-demo button {
  cursor: pointer;
}
.hd-demo button:disabled {
  cursor: wait;
}
.hd-demo a {
  color: inherit;
}
.hd-demo button:focus-visible,
.hd-demo a:focus-visible,
.hd-demo summary:focus-visible,
.hd-demo input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hd-demo button svg {
  display: block;
}
.hd-demo button {
  color: inherit;
}
.hd-demo button[hidden],
.hd-demo [hidden] {
  display: none !important;
}
.hd-demo .hd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hd-demo {
  position: relative;
  isolation: isolate;
  padding: 48px 48px 0;
}
.hd-demo button {
  border: 0;
}
.hd-demo h1,
.hd-demo h4,
.hd-demo h5,
.hd-demo p {
  margin: 0;
}

/* A single work surface, scaled together with its media and typography. */
.hd-demo .hd-experience {
  --u: clamp(0.9px, 0.075vw, 1px);
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(24 * var(--u));
  background: #f4f7fbdc;
}
.hd-demo .hd-experience:not(.is-expanded) {
  cursor: zoom-in;
}
.hd-demo .hd-experience .hd-player {
  cursor: auto;
}
.hd-demo .hd-experience-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(24 * var(--u));
  min-height: calc(36 * var(--u));
  margin-bottom: calc(22 * var(--u));
}
.hd-demo .hd-expand-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  flex-shrink: 0;
  min-height: max(44px, calc(44 * var(--u)));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--line) !important;
  border-radius: calc(7 * var(--u));
  color: var(--text-2);
  background: #ffffffb3;
  font-size: max(12px, calc(12 * var(--u)));
}
.hd-demo .hd-expand-demo,
.hd-demo .hd-icon-button,
.hd-demo .hd-source-time,
.hd-demo .hd-chapters button,
.hd-demo .hd-replay-overlay {
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.hd-demo .hd-expand-demo:hover {
  background: white;
  color: var(--accent-text);
}
.hd-demo .hd-expand-demo svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hd-demo .hd-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  gap: calc(28 * var(--u));
  align-items: stretch;
  position: relative;
}
.hd-demo .hd-conversation {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 801px) {
  .hd-demo .hd-conversation > .hd-chapters {
    margin-top: auto;
  }
  .hd-demo .hd-insight {
    margin-bottom: calc(22 * var(--u));
  }
}
.hd-demo .hd-player {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: calc(13 * var(--u));
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
}
.hd-demo .hd-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.hd-demo .hd-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.hd-demo .hd-play-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  padding: calc(20 * var(--u));
  text-align: center;
  background: rgba(15, 26, 38, 0.45);
  color: white;
}
.hd-demo .hd-play-overlay:hover {
  background: rgba(15, 26, 38, 0.33);
}
.hd-demo .hd-play-disc {
  display: grid;
  place-items: center;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  background: white;
  color: var(--ink);
  border-radius: 50%;
  transition: transform 0.2s var(--hd-ease);
}
.hd-demo .hd-play-disc svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-left: calc(2 * var(--u));
  fill: currentColor;
}
.hd-demo .hd-play-overlay:hover .hd-play-disc {
  transform: scale(1.04);
}
.hd-demo .hd-play-overlay strong {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: -0.015em;
}
.hd-demo .hd-controls {
  min-height: calc(44 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u));
}
.hd-demo .hd-icon-button {
  display: grid;
  place-items: center;
  min-width: max(44px, calc(44 * var(--u)));
  height: max(44px, calc(44 * var(--u)));
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  border-radius: calc(6 * var(--u));
}
.hd-demo .hd-icon-button:hover {
  background: #243244;
  color: white;
}
.hd-demo .hd-icon-button svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hd-demo .hd-icon-button:first-child svg {
  fill: currentColor;
  stroke: none;
}
.hd-demo .hd-time {
  font-size: max(12px, calc(12 * var(--u)));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}
.hd-demo .hd-time span {
  color: rgba(255, 255, 255, 0.66);
}
.hd-demo .hd-seek {
  min-width: 20px;
  width: 100%;
  flex: 1;
  accent-color: var(--sky-dot);
  height: max(44px, calc(44 * var(--u)));
  cursor: pointer;
  -webkit-appearance: none;
  background: transparent;
}
.hd-demo .hd-seek::-webkit-slider-runnable-track {
  height: calc(3 * var(--u));
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--sky-dot) var(--progress, 0%),
    rgba(255, 255, 255, 0.22) var(--progress, 0%)
  );
}
.hd-demo .hd-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: calc(10 * var(--u));
  width: calc(10 * var(--u));
  background: #fff;
  border-radius: 50%;
  margin-top: calc(-3.5 * var(--u));
}
.hd-demo .hd-seek::-moz-range-track {
  height: calc(3 * var(--u));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
}
.hd-demo .hd-seek::-moz-range-progress {
  background: var(--sky-dot);
  height: calc(3 * var(--u));
}
.hd-demo .hd-seek::-moz-range-thumb {
  height: calc(10 * var(--u));
  width: calc(10 * var(--u));
  border: none;
  border-radius: 50%;
  background: #fff;
}
.hd-demo .hd-player-error {
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  font-size: max(13px, calc(13 * var(--u)));
  color: #FFD6CC;
}
.hd-demo .hd-ended {
  position: absolute;
  inset: auto 0 calc(18 * var(--u));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hd-demo .hd-replay-overlay {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: max(44px, calc(44 * var(--u)));
  padding: calc(9 * var(--u)) calc(17 * var(--u));
  border: 1px solid #ffffff45 !important;
  border-radius: calc(7 * var(--u));
  background: rgba(15, 26, 38, 0.94);
  color: #fff;
  font-size: max(12px, calc(12 * var(--u)));
}
.hd-demo .hd-replay-overlay:hover {
  background: #243244;
}

/* The quote is the bridge between the recording and the captured workflow. */
.hd-demo .hd-insight {
  position: relative;
  margin-top: calc(22 * var(--u));
  padding: 0 calc(3 * var(--u));
}
.hd-demo .hd-speech-meta {
  color: var(--text-2);
  font-size: max(12px, calc(12 * var(--u)));
  line-height: 1.4;
}
.hd-demo .hd-speech-meta strong {
  font-weight: 500;
}
.hd-demo .hd-live-quote {
  margin: calc(10 * var(--u)) 0 0;
  min-height: 3.8em;
  color: var(--ink);
  font-size: calc(22 * var(--u));
  font-weight: 450;
  line-height: 1.32;
  letter-spacing: -0.027em;
  text-wrap: pretty;
}
.hd-demo .hd-live-quote mark {
  color: var(--accent-text);
  background: transparent;
  border-radius: 0.1em;
  padding: 0;
}
.hd-demo .hd-insight[data-capture-phase="collecting"] .hd-live-quote mark {
  background: var(--tint-2);
  color: var(--accent-text);
}
.hd-demo .hd-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u));
  margin-top: calc(22 * var(--u));
  padding-top: calc(13 * var(--u));
  border-top: 1px solid var(--line);
}
.hd-demo .hd-chapters button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  min-height: max(44px, calc(44 * var(--u)));
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: transparent;
  color: var(--muted);
  font-size: max(12px, calc(12 * var(--u)));
  text-align: left;
}
.hd-demo .hd-chapters button:hover,
.hd-demo .hd-chapters button[aria-current="step"] {
  color: var(--accent-text);
  background: var(--tint-2);
}
.hd-demo .hd-chapters button > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(9 * var(--u));
  width: 100%;
}
.hd-demo .hd-chapters small {
  font-size: max(12px, calc(12 * var(--u)));
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Workflow: one calm surface, a visible sequence, and a restrained active state. */
.hd-demo .hd-flow-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(14 * var(--u));
  background: white;
}
.hd-demo .hd-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(23 * var(--u)) calc(25 * var(--u)) 0;
}
.hd-demo .hd-flow-brand {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: max(13px, calc(13 * var(--u)));
  font-weight: 500;
  color: var(--ink-2);
}
.hd-demo .hd-flow-brand img {
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}
.hd-demo .hd-status {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--muted);
  white-space: nowrap;
}
.hd-demo .hd-status i {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: rgba(15, 26, 38, 0.3);
  border-radius: 50%;
  flex-shrink: 0;
}
.hd-demo[data-playing="true"] .hd-status i {
  background: var(--accent);
}
.hd-demo[data-stage="4"] .hd-status {
  color: var(--text-2);
}
.hd-demo[data-stage="4"] .hd-status i {
  background: var(--accent);
}
.hd-demo .hd-flow-heading {
  padding: calc(20 * var(--u)) calc(25 * var(--u)) calc(24 * var(--u));
}
.hd-demo .hd-flow-heading h4 {
  font-size: calc(28 * var(--u));
  line-height: 1.16;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.hd-demo .hd-canvas {
  position: relative;
  padding: 0 calc(24 * var(--u)) calc(25 * var(--u));
  min-height: calc(410 * var(--u));
}
.hd-demo .hd-canvas-intro {
  padding: calc(7 * var(--u)) 0 0;
}
.hd-demo .hd-empty-flow {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--u));
}
.hd-demo .hd-empty-line {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  min-height: calc(60 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(9 * var(--u));
  background: var(--tint-1);
}
.hd-demo .hd-empty-line > span:first-child {
  color: var(--muted);
  font-size: max(12px, calc(12 * var(--u)));
  font-variant-numeric: tabular-nums;
}
.hd-demo .hd-empty-line b,
.hd-demo .hd-empty-line strong {
  color: var(--muted);
  font-size: max(13px, calc(13 * var(--u)));
  font-weight: 450;
  line-height: 1.4;
}
.hd-demo .hd-canvas-intro > p {
  color: var(--muted);
  font-size: max(12px, calc(12 * var(--u)));
  line-height: 1.5;
  margin-top: calc(19 * var(--u));
}
.hd-demo .hd-flow-list {
  --rail-progress: 0%;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.hd-demo .hd-flow-list::before {
  content: "";
  position: absolute;
  left: calc(27 * var(--u));
  top: calc(28 * var(--u));
  bottom: calc(32 * var(--u));
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--tint-4) var(--rail-progress),
    var(--tint-2) var(--rail-progress)
  );
}
.hd-demo .hd-flow-node {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  position: relative;
  min-height: calc(59 * var(--u));
  padding: calc(13 * var(--u)) calc(12 * var(--u));
  background: white;
  border: 1px solid var(--line);
  border-radius: calc(9 * var(--u));
}
.hd-demo .hd-flow-node > div {
  min-width: 0;
}
.hd-demo .hd-node-number {
  display: grid;
  place-items: center;
  width: calc(29 * var(--u));
  height: calc(29 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--tint-2);
  color: var(--text-2);
  font-size: max(12px, calc(12 * var(--u)));
  font-weight: 500;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.hd-demo .hd-flow-node h5 {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.35;
}
.hd-demo .hd-source-time {
  background: transparent;
  color: var(--muted);
  font-size: max(12px, calc(12 * var(--u)));
  font-variant-numeric: tabular-nums;
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
  border-radius: calc(5 * var(--u));
}
.hd-demo .hd-source-time:hover {
  color: var(--accent-text);
  background: var(--tint-2);
}
.hd-demo .hd-source-time span {
  font-size: max(12px, calc(12 * var(--u)));
  margin-left: calc(2 * var(--u));
}
.hd-demo .hd-timing-note {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  position: relative;
  min-height: calc(87 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(9 * var(--u));
  background: var(--tint-1);
}
.hd-demo .hd-timing-glyph {
  color: var(--muted);
  width: calc(26 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
  flex-shrink: 0;
  text-align: center;
}
.hd-demo .hd-timing-note > div {
  min-width: 0;
  flex: 1;
}
.hd-demo .hd-micro-label {
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--muted);
  font-weight: 450;
  line-height: 1.4;
}
.hd-demo .hd-day-bridge {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: center;
  margin-top: calc(9 * var(--u));
}
.hd-demo .hd-day-bridge span {
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--ink-2);
  font-weight: 500;
}
.hd-demo .hd-day-bridge small {
  display: block;
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--muted);
  margin-top: calc(3 * var(--u));
  font-weight: 400;
}
.hd-demo .hd-day-bridge i {
  font-style: normal;
  color: rgba(15, 26, 38, 0.45);
  font-size: calc(18 * var(--u));
}
.hd-demo .hd-decision {
  position: relative;
  display: flex;
  gap: calc(12 * var(--u));
  align-items: center;
  min-height: calc(73 * var(--u));
  padding: calc(14 * var(--u)) calc(13 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(9 * var(--u));
  background: var(--tint-1);
}
.hd-demo .hd-decision-diamond {
  width: calc(26 * var(--u));
  font-size: calc(27 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--muted);
  text-align: center;
  flex-shrink: 0;
}
.hd-demo .hd-decision h5 {
  font-size: calc(15 * var(--u));
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: calc(4 * var(--u)) 0 0;
}
.hd-demo .hd-flow-list > [data-active="true"] {
  border-color: var(--accent);
  background: var(--tint-1);
}
.hd-demo .hd-flow-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
  min-height: calc(61 * var(--u));
  padding: calc(13 * var(--u)) calc(22 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--muted);
}
.hd-demo .hd-transfer-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
}
.hd-demo .hd-transfer-layer path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.hd-demo .hd-transfer-layer circle {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 3;
}
.hd-demo .hd-expanded-disclosure {
  display: none;
}

/* Native fullscreen and its viewport fallback use the same uncapped surface. */
.hd-demo.has-expanded-demo {
  z-index: 100;
}
.hd-demo .hd-experience.is-expanded {
  --u: clamp(1px, min(0.095vw, 0.13dvh), 2.4px);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(calc(18 * var(--u)), env(safe-area-inset-top))
    max(calc(26 * var(--u)), env(safe-area-inset-right))
    max(calc(14 * var(--u)), env(safe-area-inset-bottom))
    max(calc(26 * var(--u)), env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: var(--tint-2);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  cursor: auto;
}
.hd-demo .hd-experience.is-expanded .hd-experience-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  width: 100%;
  min-height: calc(38 * var(--u));
  margin: 0 0 calc(24 * var(--u));
  padding: calc(4 * var(--u)) 0;
  background: #f3f6faf5;
}
.hd-demo .hd-experience.is-expanded .hd-workspace {
  width: 100%;
  max-width: none;
  flex-shrink: 0;
  margin-block: auto;
}
.hd-demo .hd-experience.is-expanded .hd-expanded-disclosure {
  display: block;
  flex-shrink: 0;
  margin-top: calc(24 * var(--u));
  color: var(--muted);
  font-size: max(12px, calc(12 * var(--u)));
  line-height: 1.5;
}

/* Transcript and disclosure. */
.hd-demo .hd-footnotes {
  max-width: 1276px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.hd-demo .hd-footnotes > p {
  padding-top: 12px;
}
.hd-demo .hd-transcript {
  max-width: 430px;
  min-width: 130px;
}
.hd-demo .hd-transcript summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  color: var(--muted);
  min-height: 44px;
  font-size: 14px;
  padding: 2px 0 8px;
}
.hd-demo .hd-transcript summary::-webkit-details-marker {
  display: none;
}
.hd-demo .hd-transcript summary span {
  font-size: 16px;
  line-height: 12px;
}
.hd-demo .hd-transcript[open] summary span {
  transform: rotate(45deg);
}
.hd-demo #transcript-content {
  padding: 16px 20px;
  border-radius: 24px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}
.hd-demo #transcript-content p {
  margin-bottom: 10px;
}
.hd-demo #transcript-content b {
  font-weight: 550;
  color: var(--ink-2);
}
.hd-demo .hd-no-js {
  text-align: center;
  padding: 20px;
}

@media (min-width: 1500px) {
  .hd-demo {
    padding-top: 59px;
  }
  }
@media (max-width: 1100px) {
    .hd-demo {
    padding: 38px 30px 0;
  }
  .hd-demo .hd-experience:not(.is-expanded) {
    --u: 0.9px;
  }
  .hd-demo .hd-source-time span {
    display: none;
  }
  .hd-demo .hd-flow-bottom {
    gap: 10px;
  }
}
@media (max-width: 800px) {
      .hd-demo .hd-experience,
.hd-demo .hd-experience.is-expanded {
    --u: 1px;
    padding-inline: 20px;
  }
  .hd-demo .hd-workspace {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .hd-demo .hd-conversation {
    display: contents;
  }
  .hd-demo .hd-player {
    width: 100%;
    order: 0;
  }
  .hd-demo .hd-insight {
    order: 1;
    margin: 0;
    width: 100%;
    padding-inline: 2px;
  }
  .hd-demo .hd-live-quote {
    min-height: 0;
  }
  .hd-demo .hd-flow-panel {
    order: 2;
    width: 100%;
  }
  .hd-demo .hd-chapters {
    order: 3;
    width: 100%;
    margin: 0;
    padding-top: 12px;
  }
  .hd-demo .hd-canvas {
    min-height: 280px;
  }
  .hd-demo .hd-experience.is-expanded {
    padding: max(14px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }
  .hd-demo .hd-experience.is-expanded .hd-workspace {
    margin-block: 0;
  }
  .hd-demo .hd-experience.is-expanded .hd-experience-toolbar {
    margin-bottom: 20px;
    padding-block: 5px;
  }
}
@media (max-width: 520px) {
          .hd-demo {
    padding: 26px 16px 24px;
  }
      .hd-demo .hd-experience {
    padding: 13px 12px 18px;
    border-radius: 17px;
  }
  .hd-demo .hd-experience-toolbar {
    gap: 12px;
    margin-bottom: 15px;
  }
  .hd-demo .hd-expand-demo {
    font-size: 13px;
    gap: 5px;
    padding: 7px;
  }
  .hd-demo .hd-expand-demo svg {
    width: 13px;
    height: 13px;
  }
  .hd-demo .hd-player {
    border-radius: 10px;
  }
  .hd-demo .hd-play-disc {
    width: 44px;
    height: 44px;
  }
  .hd-demo .hd-play-disc svg {
    width: 18px;
    height: 18px;
  }
  .hd-demo .hd-play-overlay {
    gap: 11px;
  }
  .hd-demo .hd-play-overlay strong {
    font-size: 13px;
  }
  .hd-demo .hd-controls {
    min-height: 44px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 44px 44px;
    align-items: center;
    padding: 4px 6px;
    gap: 0 4px;
  }
  .hd-demo .hd-controls .hd-time {
    grid-column: 2;
    grid-row: 1;
  }
  .hd-demo .hd-controls .hd-speed {
    grid-column: 3;
    grid-row: 1;
  }
  .hd-demo .hd-controls #play-toggle {
    grid-column: 1;
    grid-row: 1;
  }
  .hd-demo .hd-controls #mute-toggle {
    grid-column: 4;
    grid-row: 1;
  }
  .hd-demo .hd-controls #fullscreen {
    grid-column: 5;
    grid-row: 1;
  }
  .hd-demo .hd-controls .hd-seek {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .hd-demo .hd-time {
    font-size: 12px;
  }
  .hd-demo .hd-icon-button {
    min-width: 44px;
  }
  .hd-demo .hd-seek {
    margin: 0;
  }
  .hd-demo .hd-speech-meta {
    font-size: 12px;
  }
  .hd-demo .hd-live-quote {
    font-size: 21px;
    line-height: 1.35;
  }
  .hd-demo .hd-chapters {
    gap: 6px;
  }
  .hd-demo .hd-chapters button {
    min-height: 52px;
    padding: 7px;
    font-size: 12px;
  }
  .hd-demo .hd-chapters small {
    font-size: 12px;
  }
  .hd-demo .hd-chapters button > span {
    gap: 3px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hd-demo .hd-flow-panel {
    border-radius: 12px;
  }
  .hd-demo .hd-flow-top {
    padding: 20px 17px 0;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hd-demo .hd-flow-brand {
    font-size: 12px;
    gap: 8px;
  }
  .hd-demo .hd-flow-brand img {
    width: 19px;
    height: 19px;
  }
  .hd-demo .hd-status {
    font-size: 12px;
    gap: 5px;
  }
  .hd-demo .hd-flow-heading {
    padding: 18px 17px 22px;
  }
  .hd-demo .hd-flow-heading h4 {
    font-size: 25px;
  }
  .hd-demo .hd-canvas {
    min-height: 265px;
    padding: 0 15px 22px;
  }
  .hd-demo .hd-empty-line {
    min-height: 57px;
    padding: 13px;
    gap: 12px;
  }
  .hd-demo .hd-empty-line b,
.hd-demo .hd-empty-line strong {
    font-size: 13px;
  }
  .hd-demo .hd-canvas-intro > p {
    font-size: 12px;
  }
  .hd-demo .hd-flow-list {
    gap: 9px;
  }
  .hd-demo .hd-flow-list::before {
    left: 23px;
  }
  .hd-demo .hd-flow-node {
    min-height: 62px;
    padding: 12px 9px;
    gap: 9px;
  }
  .hd-demo .hd-node-number {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .hd-demo .hd-flow-node h5 {
    font-size: 13px;
  }
  .hd-demo .hd-source-time {
    font-size: 12px;
    padding: 7px 1px;
  }
  .hd-demo .hd-source-time span {
    display: none;
  }
  .hd-demo .hd-timing-note {
    padding: 13px 9px;
    gap: 7px;
  }
  .hd-demo .hd-timing-glyph {
    width: 23px;
  }
  .hd-demo .hd-micro-label {
    font-size: 12px;
  }
  .hd-demo .hd-day-bridge {
    gap: 10px;
  }
  .hd-demo .hd-day-bridge span {
    font-size: 12px;
  }
  .hd-demo .hd-day-bridge small {
    font-size: 12px;
  }
  .hd-demo .hd-decision {
    padding: 13px 10px;
    gap: 9px;
  }
  .hd-demo .hd-decision h5 {
    font-size: 14px;
  }
  .hd-demo .hd-flow-bottom {
    padding: 12px 15px;
    font-size: 12px;
    gap: 10px;
  }
  .hd-demo .hd-footnotes {
    margin: 16px auto 0;
    font-size: 13px;
    flex-direction: column;
    gap: 9px;
    padding: 0 2px;
  }
  .hd-demo .hd-footnotes > p {
    line-height: 1.65;
  }
  .hd-demo .hd-transcript {
    width: 100%;
    max-width: none;
  }
  .hd-demo .hd-transcript summary {
    justify-content: flex-start;
    min-height: 44px;
    font-size: 14px;
    gap: 12px;
    padding: 5px 0;
  }
  .hd-demo .hd-replay-overlay {
    font-size: 12px;
    min-height: 44px;
    padding: 8px 13px;
  }
  .hd-demo .hd-ended {
    bottom: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-demo *,
.hd-demo *::before,
.hd-demo *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hd-demo .hd-transfer-layer {
    display: none;
  }
  .hd-demo .hd-flow-list > li,
.hd-demo .hd-play-overlay:hover .hd-play-disc {
    transform: none !important;
  }
}

/* V2: the interview opens into a connected, inspectable process. */
.hd-demo #interview-stage {
  container-type: inline-size;
  container-name: interview;
}
.hd-demo .hd-participant-identities {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}
.hd-demo .hd-participant-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  position: absolute;
  top: 18.2%;
  left: 2.395833%;
  padding: clamp(4px, 1cqw, 7px) clamp(8px, 1.6cqw, 13px);
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 4px;
  background: rgba(15, 26, 38, 0.9);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: clamp(10.5px, 2.15cqw, 17px);
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
  transition: border-color 160ms ease;
}
.hd-demo .hd-identity-secondary {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}
.hd-demo .hd-participant-sticker[data-participant="agent"] {
  left: 51.770833%;
}
.hd-demo .hd-participant-sticker[data-speaking="true"] {
  border-color: rgba(127, 176, 255, 0.62);
}
.hd-demo .hd-agent-avatar {
  --voice-energy: 0;
  position: absolute;
  z-index: 3;
  top: 46.3889%;
  left: 74.6875%;
  width: 14.2%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--tint-2);
  box-shadow:
    inset 0 1px 1px #ffffff,
    inset 0 -2px 4px #496e9d14,
    0 4px 16px #071b3733,
    0 0 calc(8px + var(--voice-energy) * 16px) #7aa6d42b;
  pointer-events: none;
}
.hd-demo .hd-agent-avatar::before {
  content: "";
  position: absolute;
  inset: -4.5%;
  border: 1px solid rgba(47, 107, 212, 0.4);
  border-radius: inherit;
  opacity: calc(0.65 + var(--voice-energy) * 0.35);
}
.hd-demo .hd-agent-avatar img {
  display: block;
  width: 63%;
  height: 63%;
  object-fit: contain;
}
.hd-demo .hd-agent-avatar[data-speaking="true"] {
  border-color: var(--accent);
}

.hd-demo .hd-experience[data-mode="complete"] .hd-participant-identities,
.hd-demo .hd-experience[data-mode="complete"] .hd-agent-avatar {
  display: none;
}

.hd-demo .hd-speed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.88);
  background: #243244;
  font-size: max(12px, calc(12 * var(--u)));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hd-demo .hd-speed svg {
  width: 13px;
  height: 12px;
  fill: currentColor;
}
.hd-demo .hd-recording-context,
.hd-demo .hd-process-hint {
  display: none;
}
.hd-demo .hd-load-error {
  padding: 18px 0 0;
  color: #C0392B;
  font-size: 13px;
  line-height: 1.6;
}

/* The seven speed changes are visible on the recording itself. All motion is
   driven by the media clock through --speed-pulse, including its light trail. */
.hd-demo .hd-speed-cue {
  --speed-pulse: 0;
  --speed-level: 0;
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  width: 158px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(127, 176, 255, 0.45);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(44, 72, 104, 0.97),
    rgba(16, 31, 51, 0.97)
  );
  box-shadow:
    0 8px 26px #06142438,
    0 0 0 calc(var(--speed-pulse) * 4px) rgba(159, 204, 255, 0.16);
  transform: translateY(calc(var(--speed-pulse) * -2px))
    scale(calc(1 + var(--speed-pulse) * 0.045));
  transform-origin: top right;
  pointer-events: none;
}
.hd-demo .hd-speed-cue-label {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.2;
}
.hd-demo .hd-speed-cue strong {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  font-size: 38px;
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.hd-demo .hd-speed-ladder {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.hd-demo .hd-speed-tick {
  height: 4px;
  border-radius: 2px;
  background: #ffffff24;
}
.hd-demo .hd-speed-tick[data-passed="true"] {
  background: rgba(255, 255, 255, 0.55);
}
.hd-demo .hd-speed-tick[data-active="true"] {
  background: #fff;
  box-shadow: 0 0 calc(3px + var(--speed-pulse) * 8px) var(--sky-dot);
}
.hd-demo .hd-speed-trail {
  position: absolute;
  inset: -35% -60%;
  opacity: calc(var(--speed-pulse) * 0.42);
  background: linear-gradient(
    110deg,
    transparent 38%,
    #b7daff8a 47%,
    #fff9 49%,
    transparent 57%
  );
  transform: translateX(calc((1 - var(--speed-pulse)) * 44%));
}
.hd-demo .hd-speed-cue[data-shifting="true"] {
  border-color: rgba(127, 176, 255, 0.7);
}

/* Keep acceleration legible in the free space between the two participants. */
.hd-demo #interview-stage .hd-speed-cue {
  top: 46.3889%;
  left: 50%;
  right: auto;
  width: clamp(108px, 30cqw, 158px);
  padding: clamp(8px, 2cqw, 10px) clamp(8px, 2.5cqw, 12px);
  column-gap: 6px;
  transform: translate(-50%, -50%) scale(calc(1 + var(--speed-pulse) * 0.035));
  transform-origin: center;
}
.hd-demo #interview-stage .hd-speed-cue strong {
  font-size: clamp(28px, 7.6cqw, 38px);
}
.hd-demo #interview-stage .hd-speed-cue-label {
  font-size: 12px;
}
.hd-demo #interview-stage .hd-speed-ladder {
  margin-top: clamp(6px, 1.6cqw, 8px);
  gap: 3px;
}
@container interview (max-width: 360px) {
  .hd-demo #interview-stage .hd-speed-cue {
    width: 94px;
    padding-inline: 8px;
    column-gap: 4px;
  }
  .hd-demo #interview-stage .hd-speed-cue strong {
    font-size: 25px;
  }
}
@container interview (max-width: 300px) {
  .hd-demo #interview-stage .hd-speed-cue {
    top: 52%;
    width: 84px;
    padding: 7px 6px;
    column-gap: 4px;
  }
  .hd-demo #interview-stage .hd-speed-cue strong {
    font-size: 21px;
  }
  .hd-demo #interview-stage .hd-speed-cue-label {
    font-size: 12px;
  }
  .hd-demo #interview-stage .hd-speed-ladder {
    gap: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-demo #interview-stage .hd-speed-cue {
    transform: translate(-50%, -50%) !important;
  }
}

/* A shared process language: quiet evidence links, clear labels, and rails
   that connect steps without turning each detail into another app card. */
.hd-demo .hd-process {
  --p: 1px;
  padding: 2px 24px 24px;
}
.hd-demo .hd-process-phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px;
  align-items: start;
}
.hd-demo .hd-phase {
  --phase-color: var(--ink-2);
  --phase-wash: var(--tint-2);
  min-width: 0;
  opacity: var(--phase-entrance, 1);
  transform: translateY(calc((1 - var(--phase-entrance, 1)) * 16px));
}
.hd-demo .hd-phase[data-phase="reconcile"] {
  --phase-color: var(--ink-2);
  --phase-wash: var(--tint-2);
}
.hd-demo .hd-phase[data-phase="resolve"] {
  --phase-color: var(--ink-2);
  --phase-wash: var(--tint-2);
}
.hd-demo .hd-phase[data-phase="close"] {
  --phase-color: var(--ink-2);
  --phase-wash: var(--tint-2);
}
.hd-demo .hd-phase h5 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.hd-demo .hd-phase-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--phase-color);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.hd-demo .hd-phase[data-active="true"] .hd-phase-number {
  border-color: var(--phase-color);
  box-shadow: 0 0 0 calc(var(--capture-pulse, 0) * 5px) var(--phase-wash);
}
.hd-demo .hd-phase-list {
  position: relative;
  list-style: none;
  padding: 0 0 0 1px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hd-demo .hd-phase-list::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 25px;
  left: 4px;
  width: 1px;
  background: var(--tint-3);
}
.hd-demo .hd-process-node {
  position: relative;
  min-width: 0;
  padding: 9px 0 13px 21px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hd-demo .hd-process-node::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--phase-color);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(var(--node-arrival, 0) * 5px) var(--phase-wash);
}
.hd-demo .hd-process-node:last-child {
  padding-bottom: 4px;
}
.hd-demo .hd-process-node[data-active="true"]::before {
  background: var(--phase-color);
  box-shadow: 0 0 0 calc(3px + var(--capture-pulse, 0) * 4px) var(--phase-wash);
}
.hd-demo .hd-process-node[data-kind="note"] {
  color: var(--text-2);
}
.hd-demo .hd-process-node[data-kind="condition"] {
  padding: 12px 12px 13px 21px;
  margin-top: 2px;
  border-radius: 9px;
  background: var(--tint-2);
}
.hd-demo .hd-process-node[data-kind="condition"]::before {
  border-radius: 1px;
  transform: rotate(45deg);
}
.hd-demo .hd-process-node-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 21px;
  margin-bottom: 4px;
}
.hd-demo .hd-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.3;
  white-space: nowrap;
}
.hd-demo .hd-app-badge img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.hd-demo .hd-app-badge[data-app="netsuite"] img {
  width: 80px;
  height: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  object-position: left center;
}
.hd-demo .hd-node-glyph {
  display: none;
}
.hd-demo .hd-process-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  justify-content: center;
  padding: 2px 3px;
  margin: -2px -3px -2px auto;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hd-demo .hd-process-source:hover {
  background: var(--tint-2);
  color: var(--accent-text);
}
.hd-demo .hd-node-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  text-align: left;
  background: transparent;
  color: var(--ink);
}
.hd-demo .hd-node-title {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-wrap: pretty;
}
.hd-demo .hd-node-chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}
.hd-demo .hd-node-summary[aria-expanded="true"] .hd-node-chevron {
  transform: rotate(45deg);
  color: var(--accent-text);
}
.hd-demo .hd-node-summary:hover {
  color: var(--accent-text);
}
.hd-demo .hd-process-node[data-has-app="false"] {
  padding-right: 56px;
}
.hd-demo .hd-process-node[data-has-app="false"] .hd-process-node-meta {
  position: absolute;
  top: 10px;
  right: 0;
  min-height: 24px;
  margin: 0;
}
.hd-demo .hd-process-node[data-has-app="false"][data-kind="condition"]
  .hd-process-node-meta {
  right: 10px;
}
.hd-demo .hd-process-node[data-has-app="false"][data-kind="condition"] {
  padding-right: 67px;
}
.hd-demo .hd-route-qualifier {
  margin: 2px 0 3px !important;
  color: var(--phase-color);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}
.hd-demo .hd-route-qualifier::before {
  content: "↳ ";
}
.hd-demo .hd-route-control {
  margin-top: 5px !important;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.hd-demo .hd-entry-routes {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid rgba(15, 26, 38, 0.18);
  border-radius: 0 5px 5px 0;
  background: var(--tint-1);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}
.hd-demo .hd-entry-routes > p {
  color: var(--text-2);
  font-weight: 500;
}
.hd-demo .hd-entry-routes ul {
  display: grid;
  gap: 3px;
  margin: 5px 0 0;
  padding-left: 12px;
}
.hd-demo .hd-entry-routes li::marker {
  color: var(--muted);
}
.hd-demo .hd-node-detail {
  padding-top: 10px;
  margin-top: 9px;
  border-top: 1px solid var(--line);
}
.hd-demo .hd-node-detail p {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.hd-demo .hd-node-detail .hd-route-condition {
  margin-top: 9px;
  font-size: 12px;
}
.hd-demo .hd-process-source,
.hd-demo .hd-node-summary {
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

/* During the accelerated interview, the process has its own scroll viewport. */
.hd-demo .hd-experience[data-mode="continuation"] .hd-workspace {
  grid-template-columns: minmax(0, var(--call-fr, 0.34fr)) minmax(
      0,
      var(--workflow-fr, 0.66fr)
    );
  align-items: start;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-conversation {
  position: sticky;
  top: 60px;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-chapters {
  margin-top: 24px;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-live-quote {
  font-size: clamp(19px, calc(19 * var(--u)), 25px);
  min-height: 5.2em;
  line-height: 1.36;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-top {
  padding: 21px 24px 0;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-heading {
  padding: 16px 24px 25px;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-heading h4 {
  font-size: 28px;
}
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-bottom {
  min-height: 42px;
  padding: 11px 23px;
  font-size: 12px;
}

/* The finished capture opens into one map. The source recording remains mounted
   in a quiet bar below, leaving the process to lead the composition. */
.hd-demo .hd-experience[data-mode="complete"] .hd-workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-panel {
  order: 1;
  border-color: var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 18px #173a5f04;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-top {
  padding: 22px 28px 0;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-brand {
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-brand img {
  width: 18px;
  height: 18px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-status {
  font-size: 12px;
  color: var(--muted);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading {
  padding: 10px 28px 27px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading h4 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process {
  padding: 0 28px 23px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process-phases {
  grid-template-columns:
    minmax(0, 0.68fr) minmax(0, 1fr) minmax(0, 1.12fr)
    minmax(0, 1.2fr);
  gap: 24px;
  opacity: var(--overview-columns, 1);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase h5 {
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 17px;
  font-size: 20px;
  line-height: 1.2;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase h5::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 14px;
  left: 28px;
  right: -24px;
  height: 1px;
  background: var(--tint-4);
  transform: scaleX(var(--overview-columns, 1));
  transform-origin: left;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase h5::before {
  content: "";
  position: absolute;
  top: 11px;
  right: -12px;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(15, 26, 38, 0.18);
  border-right: 1px solid rgba(15, 26, 38, 0.18);
  transform: rotate(45deg);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase:last-child h5::before,
.hd-demo .hd-experience[data-mode="complete"] .hd-phase:last-child h5::after {
  display: none;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase-number {
  width: 29px;
  height: 29px;
  color: var(--phase-color);
  border-color: var(--line);
  background: var(--phase-wash);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-node-title {
  font-size: 16px;
  line-height: 1.35;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process-node {
  padding-top: 10px;
  padding-bottom: 14px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process-node:last-child {
  padding-bottom: 5px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process-node[data-kind="condition"] {
  padding-block: 12px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase-list {
  gap: 3px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-phase-list::before {
  bottom: 24px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-bottom {
  min-height: 37px;
  padding: 10px 28px;
  gap: 14px;
  border-color: var(--line);
  color: var(--muted);
  font-size: 12px;
  opacity: var(--overview-details, 1);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-process-hint {
  display: inline;
}
.hd-demo .hd-process-hint i {
  padding: 0 7px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.66);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-conversation {
  order: 2;
  display: block;
  position: relative;
  z-index: 3;
  min-width: 0;
  opacity: 1;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-insight,
.hd-demo .hd-experience[data-mode="complete"] .hd-chapters {
  display: none !important;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-player {
  display: grid;
  grid-template-columns: 126px 175px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  color: var(--ink-2);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-video-wrap {
  position: relative;
  z-index: 2;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 3px #17355118;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-ended {
  display: none !important;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-recording-context {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  opacity: var(--overview-details, 1);
}
.hd-demo .hd-recording-context strong {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.hd-demo .hd-recording-context span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-controls {
  min-height: 42px;
  gap: 10px;
  padding: 0;
  opacity: var(--overview-details, 1);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-icon-button {
  min-width: 44px;
  height: 44px;
  color: var(--ink-2);
  opacity: 1;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-icon-button:first-child {
  border-radius: 50%;
  background: var(--tint-2);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-icon-button:hover {
  color: var(--ink-2);
  background: var(--tint-3);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-2);
}
.hd-demo .hd-experience[data-mode="complete"] #play-shape {
  fill: var(--ink-2);
  stroke: none;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-time {
  font-size: 12px;
  color: var(--ink-2);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-time span {
  color: var(--muted);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-controls button:focus-visible,
.hd-demo .hd-experience[data-mode="complete"] .hd-seek:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-seek::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    rgba(47, 107, 212, 0.5) var(--progress, 0%),
    var(--tint-4) var(--progress, 0%)
  );
}
.hd-demo .hd-experience[data-mode="complete"] .hd-seek::-webkit-slider-thumb {
  background: #243244;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-seek::-moz-range-track {
  background: var(--tint-4);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-seek::-moz-range-progress {
  background: rgba(47, 107, 212, 0.5);
}
.hd-demo .hd-experience[data-mode="complete"] .hd-seek::-moz-range-thumb {
  background: #243244;
}
.hd-demo .hd-experience[data-mode="complete"] .hd-player-error {
  grid-column: 1 / -1;
}

@media (min-width: 801px) {
  .hd-demo .hd-experience[data-mode="continuation"] .hd-flow-panel {
    height: clamp(560px, 76dvh, 780px);
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-process,
.hd-demo .hd-experience.is-expanded[data-mode="complete"] .hd-process {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    scroll-behavior: auto;
    scrollbar-gutter: stable;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-flow-top,
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-heading,
.hd-demo .hd-experience[data-mode="continuation"] .hd-flow-bottom,
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-top,
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading,
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-bottom {
    flex-shrink: 0;
  }
  .hd-demo .hd-experience.is-expanded:is(
      [data-mode="continuation"],
      [data-mode="complete"]
    ) {
    padding: max(14px, env(safe-area-inset-top))
      max(28px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(28px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .hd-demo .hd-experience.is-expanded:is(
      [data-mode="continuation"],
      [data-mode="complete"]
    )
    .hd-experience-toolbar {
    min-height: 34px;
    margin: 0 0 9px;
    padding: 0;
  }
  .hd-demo .hd-experience.is-expanded:is(
      [data-mode="continuation"],
      [data-mode="complete"]
    )
    .hd-expand-demo {
    min-height: 44px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .hd-demo .hd-experience.is-expanded:is(
      [data-mode="continuation"],
      [data-mode="complete"]
    )
    .hd-expanded-disclosure {
    margin-top: 9px;
    font-size: 12px;
  }
  .hd-demo .hd-experience.is-expanded:is(
      [data-mode="continuation"],
      [data-mode="complete"]
    )
    .hd-workspace {
    flex: 1 1 0;
    min-height: 0;
    margin-block: 0;
    align-items: stretch;
  }
  .hd-demo .hd-experience.is-expanded[data-mode="continuation"] .hd-conversation {
    position: static;
  }
  .hd-demo .hd-experience.is-expanded[data-mode="continuation"] .hd-flow-panel,
.hd-demo .hd-experience.is-expanded[data-mode="complete"] .hd-flow-panel {
    height: 100%;
    min-height: 0;
  }
  .hd-demo .hd-experience.is-expanded[data-mode="complete"] .hd-workspace {
    grid-template-rows: minmax(0, 1fr) 76px;
  }
  .hd-demo .hd-experience.is-expanded[data-mode="complete"] .hd-conversation {
    align-self: center;
  }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .hd-demo .hd-experience[data-mode="continuation"] .hd-workspace {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: 20px;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-controls {
    gap: 5px;
    padding-inline: 7px;
    flex-wrap: wrap;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-seek {
    min-width: 65px;
  }
  .hd-demo .hd-process {
    padding-inline: 20px;
  }
  .hd-demo .hd-process-phases {
    gap: 26px 20px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-process-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-phase:nth-child(2) h5::before,
.hd-demo .hd-experience[data-mode="complete"] .hd-phase:nth-child(2) h5::after {
    display: none;
  }
  .hd-demo .hd-speed-cue {
    width: 148px;
    padding: 10px 12px;
  }
  .hd-demo .hd-speed-cue strong {
    font-size: 36px;
  }
}
@media (max-width: 800px) {
  .hd-demo .hd-experience[data-mode="continuation"] .hd-workspace,
.hd-demo .hd-experience[data-mode="complete"] .hd-workspace {
    display: flex;
    flex-direction: column;
    gap: 23px;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-conversation {
    display: contents;
    position: static;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-live-quote {
    font-size: 20px;
    min-height: 0;
  }
  .hd-demo .hd-process {
    padding: 0 20px 22px;
  }
  .hd-demo .hd-process-phases {
    gap: 28px 24px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-panel {
    order: 1;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-conversation {
    display: block;
    order: 2;
    width: 100%;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-process-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-phase h5::before,
.hd-demo .hd-experience[data-mode="complete"] .hd-phase h5::after {
    display: none;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-phase h5 {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-player {
    width: 100%;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 13px 18px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-controls {
    grid-column: 1 / -1;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-top {
    padding: 20px 22px 0;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading {
    padding: 11px 22px 25px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading h4 {
    font-size: 29px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-process {
    padding-inline: 22px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-bottom {
    padding-inline: 22px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-process-hint {
    display: none;
  }
}
@media (max-width: 520px) {
  .hd-demo .hd-process {
    padding: 0 18px 22px;
  }
  .hd-demo .hd-process-phases,
.hd-demo .hd-experience[data-mode="complete"] .hd-process-phases {
    grid-template-columns: minmax(0, 1fr);
    gap: 29px;
  }
  .hd-demo .hd-phase h5,
.hd-demo .hd-experience[data-mode="complete"] .hd-phase h5 {
    font-size: 19px;
    margin-bottom: 12px;
  }
  .hd-demo .hd-node-title {
    font-size: 16px;
  }
  .hd-demo .hd-process-node {
    padding-bottom: 15px;
  }
  .hd-demo .hd-process-source {
    min-height: 44px;
    font-size: 12px;
  }
  .hd-demo .hd-app-badge img {
    width: 20px;
    height: 20px;
  }
  .hd-demo .hd-app-badge[data-app="netsuite"] img {
    width: 80px;
    height: 20px;
  }
  .hd-demo .hd-node-detail p {
    font-size: 13px;
  }
  .hd-demo .hd-route-control,
.hd-demo .hd-entry-routes,
.hd-demo .hd-route-qualifier {
    font-size: 12px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading h4 {
    font-size: 28px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-top {
    padding-inline: 18px;
  }
  .hd-demo .hd-experience[data-mode="complete"] .hd-flow-heading,
.hd-demo .hd-experience[data-mode="complete"] .hd-process,
.hd-demo .hd-experience[data-mode="complete"] .hd-flow-bottom {
    padding-inline: 18px;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-controls {
    gap: 5px;
  }
  .hd-demo .hd-experience[data-mode="continuation"] .hd-flow-heading h4 {
    font-size: 25px;
  }
  .hd-demo .hd-speed {
    font-size: 12px;
    gap: 3px;
    padding: 3px;
  }
  .hd-demo .hd-speed svg {
    width: 11px;
  }
  .hd-demo .hd-speed-cue {
    top: 11px;
    right: 11px;
    width: 128px;
    padding: 8px 10px;
    column-gap: 6px;
  }
  .hd-demo .hd-speed-cue strong {
    font-size: 30px;
  }
  .hd-demo .hd-speed-cue-label {
    font-size: 12px;
  }
  .hd-demo .hd-speed-ladder {
    margin-top: 6px;
    gap: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-demo .hd-phase,
.hd-demo .hd-process-node,
.hd-demo .hd-process,
.hd-demo .hd-speed-cue {
    transform: none !important;
  }
  .hd-demo .hd-phase,
.hd-demo .hd-process-phases,
.hd-demo .hd-flow-bottom,
.hd-demo .hd-conversation,
.hd-demo .hd-recording-context,
.hd-demo .hd-controls {
    opacity: 1 !important;
  }
  .hd-demo .hd-speed-trail {
    display: none;
  }
  .hd-demo .hd-node-summary,
.hd-demo .hd-process-source {
    transition: none;
  }
  .hd-demo .hd-phase h5::after {
    transform: none !important;
  }
}

/* Keep the recording, its identities, and controls in one fullscreen surface. */
.hd-demo .hd-experience .hd-player:fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-video-wrap {
  flex: none;
  width: min(100vw, calc((100dvh - 64px) * 16 / 9));
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-recording-context {
  display: none;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-controls {
  flex: none;
  width: min(100vw, calc((100dvh - 64px) * 16 / 9));
  min-height: 64px;
  padding: 10px 18px;
  gap: 14px;
  opacity: 1;
  background: var(--ink);
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-icon-button {
  min-width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-icon-button:hover {
  background: #243244;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-icon-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.hd-demo .hd-experience .hd-player:fullscreen #play-shape {
  fill: currentColor;
  stroke: none;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.hd-demo .hd-experience .hd-player:fullscreen #participant-identities {
  display: block;
}
.hd-demo .hd-experience .hd-player:fullscreen #agent-avatar {
  display: grid;
}
.hd-demo .hd-experience .hd-player:fullscreen .hd-participant-sticker {
  padding: clamp(6px, 0.9cqw, 9px) clamp(10px, 1.5cqw, 16px);
  font-size: clamp(12px, 1.55cqw, 20px);
}
@media (prefers-reduced-motion: reduce) {
  .hd-demo .hd-participant-sticker {
    transition: none;
  }
}

/* Match the host page's existing type, spacing, and surface tokens. */
.hd-demo {
  --hd-ink: var(--ink);
  --hd-muted: var(--muted);
  --hd-blue: var(--accent);
  --hd-line: var(--line);
  width: 100%;
  margin-top: clamp(48px, 5vw, 64px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
  padding: 0;
  color: var(--ink);
}
.hd-demo .hd-embed-title {
  max-width: none;
  margin: 0 0 22px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hd-demo .hd-experience:not(.is-expanded) {
  max-width: none;
  border-color: rgba(15, 26, 38, 0.08);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hd-demo .hd-footnotes { max-width: none; }
.hd-demo .hd-entry-routes ul { list-style-type: circle; }
/* A fixed fullscreen fallback must rise above the host navigation. */
#interviews.has-interview-demo-fullscreen { z-index: 100; overflow: visible; }


/* Phone: before the interview plays, the workflow sheet shows only its head
   and the invitation to play; its empty placeholders and the hint line wait
   until there is something to capture. */
@media (max-width: 800px) {
  .hd-demo[data-mode="intro"] .hd-empty-flow,
  .hd-demo .hd-experience[data-mode="intro"] .hd-empty-flow { display: none; }
  .hd-demo[data-mode="intro"] .hd-flow-bottom,
  .hd-demo .hd-experience[data-mode="intro"] .hd-flow-bottom { display: none; }
}