[hidden] { display: none !important; }

.demo-v2 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.demo-v2 > main { flex: 1 0 auto; }
.demo-v2 > .global-footer { flex: 0 0 auto; }

.demo-v2 .demo-intro {
  min-height: auto;
  display: flex;
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(48px, 6vh, 68px) clamp(24px, 6vw, 96px) clamp(46px, 6vh, 66px);
}

.demo-intro-copy { max-width: 1080px; }

.demo-intro h1 {
  max-width: 1050px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 6.2vw, 90px);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: .98;
}

.demo-intro-copy > p:not(.eyebrow) {
  max-width: 820px;
  margin: 25px 0 0;
  color: #566274;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.72;
}

.demo-intro-copy > p a {
  color: var(--navy);
  font-weight: 700;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.case-intro-notes {
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 27px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.case-intro-notes p {
  margin: 0;
  color: #566274;
  font-size: 12px;
  line-height: 1.55;
}

.case-intro-notes span,
.scenario-control > span {
  display: block;
  margin-bottom: 6px;
  color: #858e9a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.begin-button {
  min-height: 48px;
  margin-top: 29px;
  padding: 0 20px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  border: 1px solid #dfb000;
  border-radius: 5px;
  background: var(--yellow);
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 7px 22px rgba(245,197,24,.18);
}

.begin-button span { margin-left: 10px; font-size: 15px; }
.begin-button:hover { transform: translateY(-1px); }
.begin-button:disabled { opacity: .55; cursor: wait; transform: none; }

.demo-experience {
  position: relative;
  min-height: 620px;
  padding: 76px clamp(18px, 4vw, 64px) 84px;
  overflow: clip;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.demo-experience.entering {
  animation: experienceIn .6s var(--ease) both;
}

.experience-heading {
  max-width: 1600px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 44px;
  margin: 0 auto 42px;
}

.experience-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.04;
}

.scenario-control {
  display: grid;
  justify-items: end;
}

.workflow-scroll {
  max-width: 1600px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #c8ced7 transparent;
}

.workflow-diagram {
  min-width: 1500px;
  display: grid;
  grid-template-columns: 390px 42px 220px 42px 260px 42px 220px 42px 250px;
  align-items: center;
  gap: 0;
  padding: 22px 10px 34px;
}

.flow-stage {
  min-width: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .55s var(--ease);
}

.flow-stage.visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-stage-name {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}

.flow-box {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: #fff;
  transition: border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.rule-stage .flow-box {
  color: var(--orange);
  border-color: #dfbc93;
  background:
    repeating-linear-gradient(135deg, rgba(168,94,22,.04), rgba(168,94,22,.04) 6px, transparent 6px, transparent 12px),
    var(--orange-soft);
}

.ai-stage .flow-box {
  min-height: 205px;
  color: var(--blue);
  border-color: #aac5d6;
  background:
    repeating-linear-gradient(135deg, rgba(62,111,145,.06), rgba(62,111,145,.06) 6px, transparent 6px, transparent 12px),
    var(--blue-soft);
}

.human-stage .flow-box {
  color: var(--green);
  border-color: #a5c8b7;
  background:
    radial-gradient(rgba(24,118,90,.11) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--green-soft);
}

.flow-stage.active .flow-box {
  border-color: #d7aa00;
  box-shadow: 0 0 0 3px var(--yellow), 0 12px 30px rgba(23,32,45,.12);
}

.flow-stage.complete .flow-box { box-shadow: 0 8px 22px rgba(23,32,45,.06); }

.flow-result {
  display: none;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
}

.flow-stage.complete .flow-result { display: block; animation: resultIn .35s var(--ease) both; }

.stage-spinner {
  width: 48px;
  height: 48px;
  display: none;
  background: url("/assets/pablo-duart-logo-spinner-transparent.svg?v=20260728-1") center / contain no-repeat;
}

.demo-v2 .step-cell.processing {
  text-align: center;
  background: #f4f5f6;
}

.cell-spinner {
  width: 25px;
  height: 25px;
  display: inline-block;
  background: url("/assets/pablo-duart-logo-spinner-transparent.svg?v=20260728-1") center / contain no-repeat;
}

.flow-stage.active .stage-spinner { display: block; }

.stage-arrow {
  opacity: 0;
  color: #a2abb6;
  font-size: 20px;
  text-align: center;
  transition: opacity .4s ease;
}

.flow-stage.visible + .stage-arrow { opacity: 1; }

.email-flow-box {
  min-height: 300px;
  display: block;
  padding: 0;
  background: #fff;
}

.email-flow-head {
  width: 100%;
  min-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 17px 18px;
  color: #fff;
  background: var(--navy);
}

.email-flow-head strong,
.email-flow-head span { display: block; }
.email-flow-head strong { font-size: 11px; }
.email-flow-head span,
.email-flow-head time { color: rgba(255,255,255,.5); font-size: 9px; }
.email-flow-head .avatar { width: 34px; height: 34px; }

.email-flow-body {
  margin: 0;
  padding: 23px 21px 25px;
  color: #394657;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.58;
}

.table-stage {
  max-width: 1600px;
  margin: 30px auto 0;
  opacity: 0;
  transform: translateY(20px);
}

.table-stage.revealed {
  animation: tableIn .65s var(--ease) forwards;
}

.compact-run-bar { margin: 0 0 12px; }

.demo-v2 .pipeline-wrap {
  overflow: hidden;
  border: 1px solid #bcc4cd;
  border-radius: 9px;
}

.demo-v2 .pipeline-scroll { overflow-x: auto; }

.demo-v2 .pipeline-table {
  width: 100%;
  min-width: 1480px;
  border-spacing: 0;
  table-layout: fixed;
}

.demo-v2 .pipeline-table th,
.demo-v2 .pipeline-table td {
  width: auto;
  height: auto;
  padding: 0;
  border-right: 1px solid #c9cfd6;
  border-bottom: 1px solid #c9cfd6;
}

.demo-v2 .pipeline-table th {
  height: 52px;
  padding: 0 11px;
  color: #626d7c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: middle;
  background: #f0f2f4;
  text-transform: uppercase;
}

.demo-v2 .pipeline-table .ask-head {
  position: sticky;
  z-index: 5;
  left: 0;
  width: 280px;
  color: #fff;
  background: var(--navy);
  box-shadow: 7px 0 12px rgba(23,32,45,.04);
}

.demo-v2 .pipeline-table th:nth-child(2) { width: 142px; }
.demo-v2 .pipeline-table th:nth-child(3) { width: 165px; }
.demo-v2 .pipeline-table th:nth-child(4) { width: 195px; }
.demo-v2 .pipeline-table th:nth-child(5) { width: 150px; }
.demo-v2 .pipeline-table th:nth-child(6) { width: 175px; }
.demo-v2 .pipeline-table th:nth-child(7) { width: 160px; }
.demo-v2 .pipeline-table th:nth-child(8) { width: 180px; }
.demo-v2 .pipeline-table th:nth-child(9) { width: 190px; }

.demo-v2 .pipeline-table tbody tr { height: 104px; }

.demo-v2 .pipeline-table td {
  vertical-align: middle;
  background: #eef0f2;
}

.demo-v2 .pipeline-table tbody tr:last-child td { border-bottom: 0; }
.demo-v2 .pipeline-table th:last-child,
.demo-v2 .pipeline-table td:last-child { border-right: 0; }

.demo-v2 .pipeline-table .ask-cell {
  position: sticky;
  z-index: 4;
  left: 0;
  width: 280px;
  padding: 13px 14px;
  background: #fff;
  box-shadow: 7px 0 12px rgba(23,32,45,.04);
}

.demo-v2 .ask-index {
  margin-bottom: 6px;
  color: #7b8492;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-v2 .ask-cell p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #3b4859;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.demo-v2 .step-cell { padding: 7px !important; }

.demo-v2 .step-cell.pending,
.demo-v2 .step-cell.not-used {
  background: #e9ebee;
}

.demo-v2 .result-card {
  width: 100%;
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 10px;
  color: #2e5f7e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  border: 1px solid #aac5d6;
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(62,111,145,.06), rgba(62,111,145,.06) 6px, transparent 6px, transparent 12px),
    var(--blue-soft);
  cursor: default;
  animation: resultIn .35s var(--ease) both;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.demo-v2 .result-card.rule {
  color: #8c4e13;
  border-color: #dfbc93;
  background:
    repeating-linear-gradient(135deg, rgba(168,94,22,.04), rgba(168,94,22,.04) 6px, transparent 6px, transparent 12px),
    var(--orange-soft);
}

.demo-v2 .result-card.stop {
  color: #963b3b;
  border-color: #dfb1af;
  background: var(--red-soft);
}

.demo-v2 .result-card:hover,
.demo-v2 .result-card.active {
  position: relative;
  z-index: 2;
  border-color: #d2a400;
  box-shadow: 0 0 0 3px var(--yellow), 0 8px 20px rgba(23,32,45,.14);
  transform: translateY(-1px);
}

.supporting-content {
  opacity: 0;
  transform: translateY(20px);
}

.supporting-content.revealed { animation: tableIn .7s var(--ease) .2s forwards; }

/* Ephemeral, card-relative step popover */
.step-popover {
  --pointer-x: 50%;
  position: fixed;
  z-index: 200;
  width: min(1180px, calc(100vw - 32px));
  height: 500px;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  border: 1px solid #bcc4cd;
  border-top: 3px solid var(--yellow);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23,32,45,.2), 0 3px 12px rgba(23,32,45,.08);
  transform: translateY(8px);
  transition: opacity .13s ease, transform .17s ease, visibility 0s linear .17s;
  pointer-events: none;
}

.step-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--pointer-x);
  width: 17px;
  height: 17px;
  border-right: 1px solid #bcc4cd;
  border-bottom: 1px solid #bcc4cd;
  background: #fff;
  transform: translate(-50%, -9px) rotate(45deg);
}

.step-popover.below::after {
  top: -9px;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid #bcc4cd;
  border-left: 1px solid #bcc4cd;
  transform: translate(-50%, 0) rotate(45deg);
}

.step-popover.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.ai-popover-view {
  position: relative;
  width: 100%;
  height: 100%;
}

.popover-connectors {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.popover-prompt-box,
.popover-context,
.popover-ai-step,
.popover-output {
  position: absolute;
  z-index: 2;
}

.popover-prompt-box {
  top: 270px;
  left: 2.3%;
  width: 29%;
  height: 185px;
  padding: 17px;
  border: 1px solid #aeb7c2;
  border-radius: 7px;
  background: #f6f7f8;
}

.popover-prompt-box::before,
.popover-context::before {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  color: #7b8492;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.popover-prompt-box::before { content: "Prompt"; }
.popover-context::before { content: "Injected context"; }

.popover-prompt-box pre,
.formula-box pre {
  margin: 0;
  color: #3c4859;
  font: 10px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.popover-ref {
  display: inline;
  padding: 1px 4px 2px;
  color: #285b7c;
  font-weight: 750;
  border-radius: 3px;
  background: #dcecf5;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.popover-context {
  top: 25px;
  left: 29.5%;
  width: 41%;
  height: 220px;
  padding: 10px;
  border: 1px solid #aeb7c2;
  border-radius: 8px;
  background: #f8fafb;
}

.context-cards {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 7px;
}

.direct-stack {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(var(--direct-count), minmax(0, 1fr));
  gap: 7px;
}

.direct-stack .direct-context { height: auto; }

.direct-context {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 11px 12px 9px;
  border: 1px solid #aac5d6;
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(62,111,145,.045), rgba(62,111,145,.045) 6px, transparent 6px, transparent 12px),
    var(--blue-soft);
}

.direct-context .derived-variable { font-size: 12px; }

.direct-context .derived-value {
  align-self: start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  line-height: 1.4;
}

.derivation {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 16px minmax(0, 1fr);
}

.derivation-operation {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 11px;
  border: 1px solid #d8bd9c;
  border-radius: 5px;
  background:
    repeating-linear-gradient(135deg, rgba(168,94,22,.035), rgba(168,94,22,.035) 6px, transparent 6px, transparent 12px),
    #fff8f0;
}

.derivation-operation small {
  color: #8c4e13;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.derivation-operation pre {
  margin: 0;
  color: #574a3e;
  font: 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.derivation-arrow {
  position: relative;
  width: 1px;
  height: 12px;
  justify-self: center;
  background: #aeb6c0;
}

.derivation-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #aeb6c0;
  border-bottom: 1px solid #aeb6c0;
  transform: rotate(45deg);
}

.derived-context {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 8px 10px 7px;
  border: 1px solid #aac5d6;
  border-radius: 5px;
  background: var(--blue-soft);
}

.derived-variable {
  color: #285b7c;
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.derived-value {
  min-height: 0;
  overflow: auto;
  color: #4f5c6b;
  font-size: 8px;
  line-height: 1.34;
}

.derived-value p { margin: 0; }
.derived-list { display: grid; gap: 3px; }

.derived-list div {
  display: block;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(62,111,145,.12);
}

.derived-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.derived-list strong { display: block; color: #285b7c; font-size: 7px; }
.derived-list span { display: block; margin-top: 1px; color: #5e6a79; font-size: 7px; line-height: 1.25; }

.derived-count {
  color: #7b8693;
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .04em;
}

.popover-ai-step {
  top: 285px;
  left: 41%;
  width: 18%;
  height: 120px;
  display: grid;
  place-items: center;
  color: #285b7c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  text-align: center;
  border: 1px solid #9ebdce;
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(62,111,145,.06), rgba(62,111,145,.06) 6px, transparent 6px, transparent 12px),
    var(--blue-soft);
}

.popover-output {
  top: 270px;
  right: 2.3%;
  width: 29%;
  height: 185px;
  display: grid;
  align-content: center;
  padding: 22px;
  color: #2f3c4e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #a5c8b7;
  border-radius: 7px;
  background:
    radial-gradient(rgba(24,118,90,.12) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--green-soft);
}

.popover-output.short { font-size: 22px; text-align: center; }

.rule-popover-view {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(520px, 1.55fr) 70px minmax(280px, .7fr);
  align-items: center;
  padding: 54px 72px;
}

.formula-box {
  min-height: 270px;
  display: grid;
  align-content: center;
  padding: 30px 36px;
  border: 1px solid #dcb88e;
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(168,94,22,.035), rgba(168,94,22,.035) 7px, transparent 7px, transparent 14px),
    #fffaf5;
}

.formula-box pre { font-size: 14px; line-height: 1.9; }
.formula-box .popover-ref { color: #8c4e13; background: #f7e3cc; cursor: help; }

.formula-arrow {
  position: relative;
  height: 1px;
  background: #aeb6c0;
}

.formula-arrow::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid #aeb6c0;
  border-right: 1px solid #aeb6c0;
  transform: rotate(45deg);
}

.formula-result {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 25px;
  color: #8c4e13;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
  border: 1px solid #dfbc93;
  border-radius: 7px;
  background: var(--orange-soft);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes experienceIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tableIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .demo-v2 .demo-intro { min-height: auto; padding: 42px 22px 48px; }
  .demo-intro h1 { font-size: clamp(45px, 13vw, 68px); }
  .demo-experience { padding: 58px 12px 64px; }
  .experience-heading { align-items: flex-start; flex-direction: column; }
  .scenario-control { justify-items: start; }
  .case-intro-notes { grid-template-columns: 1fr; gap: 12px; }
  .compact-run-bar { align-items: flex-start; }
  .step-popover {
    top: 74px !important;
    left: 12px !important;
    width: calc(100vw - 24px);
    height: calc(100vh - 100px);
    overflow: auto;
  }
  .ai-popover-view { min-width: 1000px; min-height: 500px; }
  .rule-popover-view { min-width: 920px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}