.demo-main { padding-top: 40px; }
.demo-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.demo-intro h1 { margin-top: 8px; }
.demo-description { margin: 16px 0 28px; color: var(--muted); font-size: 14px; max-width: 780px; }
.scenario-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.scenario-picker button { text-align: left; display: flex; align-items: flex-start; gap: 14px; padding: 16px; font-weight: 400; border-radius: 12px; }
.scenario-picker button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.scenario-number { color: var(--muted); font: 12px/24px var(--mono); }
.scenario-picker strong { display: block; font-size: 14px; font-weight: 600; }
.scenario-picker small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.demo-workspace { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 32px; align-items: start; }
.demo-steps { padding-top: 20px; }
.demo-steps > .eyebrow { margin: 0 0 16px 12px; }
.demo-steps ol { list-style: none; padding: 0; margin: 0 0 20px; }
.demo-steps li { position: relative; }
.demo-steps li + li::before { content: ""; position: absolute; height: 10px; width: 1px; left: 23px; top: -5px; background: var(--line); }
.demo-steps button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 12px; margin-bottom: 4px; text-align: left; color: var(--muted); background: #fff; font-weight: 400; }
.demo-steps button:hover { background: var(--surface); }
.demo-steps button[aria-current="step"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.step-index { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 12px var(--mono); flex-shrink: 0; background: #fff; }
.demo-steps button[aria-current="step"] .step-index { color: #fff; background: var(--blue); border-color: var(--blue); }
.demo-steps > .fine { margin-left: 12px; }
.demo-sheet { min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.sheet-header > div { display: flex; align-items: center; gap: 16px; }
.task-id { font: 12px var(--mono); color: var(--muted); }
.task-request { padding: 20px 24px; border-bottom: 1px solid var(--line); background: #fbfbfc; }
.task-request .eyebrow { margin-bottom: 8px; }
.task-request > p:last-child { font-size: 14px; line-height: 1.7; margin: 0; }
.stage-content { padding: 24px; }
.stage-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.stage-heading h2 { max-width: 450px; }
.model-label { font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.stage-summary { margin: 12px 0 20px; font-size: 14px; color: var(--muted); }
.stage-facts { display: flex; margin: 0 0 24px; gap: 24px; }
.stage-facts > div { flex: 1; padding-top: 12px; border-top: 1px solid var(--line); }
.stage-facts dt { font-size: 12px; color: var(--muted); }
.stage-facts dd { font-size: 14px; margin: 4px 0 0; font-weight: 550; }
.reason-block { border-left: 2px solid var(--line); padding-left: 16px; margin-bottom: 20px; }
.reason-block p { font-size: 14px; margin: 6px 0 0; }
.evidence-list { margin-bottom: 24px; }
.evidence-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.evidence-row span:last-child { color: var(--muted); font-size: 12px; text-align: right; }
.disclosures { border-top: 1px solid var(--line); }
.disclosures details { border-bottom: 1px solid var(--line); }
.disclosures summary { padding: 15px 0; min-height: 52px; font-size: 14px; font-weight: 550; }
.detail-hint { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.detail-body { padding: 0 0 20px; }
.example-label { color: var(--amber); font-size: 12px; }
.receipt-fields { margin: 12px 0; font-size: 14px; }
.receipt-fields > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; padding: 8px 0; }
.receipt-fields dt { color: var(--muted); }
.receipt-fields dd { margin: 0; overflow-wrap: anywhere; }
.diff { padding: 16px; font-size: 12px; line-height: 1.8; margin-bottom: 0; }
.diff-line { display: block; min-height: 1.8em; }
.diff-add { color: #1557c0; background: #eef4fd; }
.diff-remove { color: var(--red); background: #fff1f0; }
.call-example { font-size: 14px; margin-top: 16px; padding: 16px; border-radius: 8px; background: var(--surface); white-space: pre-wrap; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 20px; }
.stage-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.stage-controls button { flex-shrink: 0; }
.demo-caption { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 32px; padding: 28px 0 12px; color: var(--muted); font-size: 12px; }
.demo-caption strong { color: var(--ink); font-weight: 550; }
.demo-caption a { min-height: 44px; display: flex; align-items: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .demo-workspace { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; } .scenario-picker { gap: 8px; } .scenario-picker button { padding: 12px; gap: 8px; } }
@media (max-width: 767px) {
  .demo-main { padding-top: 28px; } .demo-intro { display: block; } .demo-intro > .pill { margin-top: 16px; }
  .scenario-picker { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; } .scenario-picker button { padding: 12px 16px; gap: 14px; }
  .scenario-picker small { margin-top: 2px; } .demo-workspace { display: block; } .demo-steps { padding: 0; }
  .demo-steps > .eyebrow, .demo-steps > .fine { display: none; } .demo-steps ol { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .demo-steps li + li::before { display: none; } .demo-steps button { width: auto; padding: 8px; gap: 6px; margin: 0; font-size: 12px; }
  .step-index { width: 20px; height: 20px; } .sheet-header, .task-request, .stage-content { padding: 16px; }
  .sheet-header > div { gap: 10px; } .stage-heading { display: block; } .model-label { display: block; padding-top: 8px; }
  .stage-facts { gap: 12px; } .stage-facts dd { font-size: 14px; line-height: 1.5; } .stage-summary { margin-bottom: 16px; }
  .detail-hint { display: block; margin: 4px 0 0 16px; } .receipt-fields > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .stage-controls { align-items: flex-start; } .stage-controls > span { font-size: 12px; } .demo-caption { display: block; } .demo-caption a { margin-top: 12px; }
}