/* The homepage demo shares the workspace's light violet visual language. */
.handoff-demo { padding: 0; }
.handoff-demo { color-scheme: light; color: #20253b; background: #f6f7fb; border: 1px solid #dfe4ee; border-radius: 16px; box-shadow: 0 20px 60px -30px #27325b40; overflow: hidden; min-width: 0; font-family: var(--body), system-ui, sans-serif; }
.handoff-demo__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 20px; background: #fff; border-bottom: 1px solid #dfe4ee; font-size: 12px; color: #596780; }
.handoff-demo__bar span:first-child { display: flex; align-items: center; gap: 8px; color: #20253b; font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
.handoff-demo__heading { padding: 24px 20px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.handoff-demo__heading h2 { font: 700 21px/1.3 var(--body), sans-serif; letter-spacing: -.03em; }
.handoff-demo__heading p { font-size: 13px; color: #596780; margin-top: 5px; }
.handoff-demo__badge { color: #596780; font-size: 12px; white-space: nowrap; }
.handoff-demo__desks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.handoff-demo__desk { min-width: 0; background: #edf0f7; border: 1px solid #dfe4ee; border-radius: 11px; padding: 10px; min-height: 320px; }
.handoff-demo__desk > header { display: flex; align-items: center; gap: 9px; padding: 3px 2px 13px; }
.handoff-demo__desk header b { font-size: 15px; display: block; }
.handoff-demo__desk small { display: block; font-size: 12px; color: #596780; }
.handoff-demo__avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #6255da; color: #fff; font-size: 11px; font-weight: 600; }
.handoff-demo__avatar--priya { background: #426b70; }
.handoff-demo__card { position: relative; background: #fff; border: 1px solid #dfe4ee; padding: 14px 12px; border-radius: 9px; margin-bottom: 10px; box-shadow: 0 1px 2px #20253b08; }
.handoff-demo__card--focus { border-color: #9c94e9; box-shadow: 0 0 0 2px #6255da0a; z-index: 2; }
.handoff-demo__category { color: #596780; font-size: 11px; }
.handoff-demo__card h3 { font: 600 15px/1.45 var(--body), sans-serif; margin: 6px 0 10px; letter-spacing: -.015em; }
.handoff-demo__card p { color: #596780; font-size: 12px; line-height: 1.6; margin-bottom: 12px; }
.handoff-demo__card footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 10px 0 0; background: none; border: 0; color: #596780; font-size: 11px; }
.handoff-demo__note { margin: 14px 16px 0; padding: 12px 14px; border: 1px solid #ddd9f5; border-radius: 9px; background: #efedfc; min-height: 78px; }
.handoff-demo__note[hidden] { display: block; visibility: hidden; }
.handoff-demo__note b { color: #5146b7; font-size: 12px; }
.handoff-demo__note p { font-size: 13px; line-height: 1.6; margin-top: 3px; }
.handoff-demo__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; min-height: 78px; }
.handoff-demo__controls p { font-size: 13px; color: #475570; line-height: 1.5; max-width: 31ch; }
.handoff-demo__controls button { flex: none; background: #6255da; color: #fff; border: 0; border-radius: 8px; padding: 11px 14px; min-height: 44px; font: 600 13px var(--body), sans-serif; cursor: pointer; }
.handoff-demo__controls button:hover { background: #5146b7; }
.handoff-demo__controls button:focus-visible { outline: 3px solid #6255da; outline-offset: 3px; }
.handoff-demo__steps { display: flex; gap: 8px; list-style: none; padding: 13px 16px; border-top: 1px solid #dfe4ee; background: #fff; }
.handoff-demo__steps li { flex: 1; font-size: 11px; color: #596780; padding-top: 7px; border-top: 2px solid #e7e9f0; }
.handoff-demo__steps [aria-current] { color: #5146b7; border-color: #6255da; font-weight: 600; }
@media (max-width: 1050px) { .hero-grid { grid-template-columns: 1fr; } .handoff-demo { width: 100%; max-width: 740px; } }
@media (max-width: 480px) {
  .handoff-demo__bar, .handoff-demo__heading { padding: 16px 12px; }
  .handoff-demo__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .handoff-demo__desks { padding: 0 10px; gap: 8px; }
  .handoff-demo__desk { padding: 7px; min-height: 380px; }
  .handoff-demo__card { padding: 11px 9px; }
  .handoff-demo__card h3 { font-size: 14px; }
  .handoff-demo__controls { align-items: flex-start; }
  .handoff-demo__controls button { padding-inline: 10px; }
  .handoff-demo__steps { gap: 6px; padding-inline: 10px; }
}