/* Inline sample workflow: an open editorial path, scoped to this demonstration. */
.workflow-demo { --demo-bronze:#1d4ed8; --demo-silver:#526174; scroll-margin-top:120px; }
.workflow-demo [hidden] { display:none!important; }
.workflow-demo .workflow-headline { font-weight:500; }
.workflow-demo .workflow-intro { max-width:640px; font-size:16px; color:#172638; }
.workflow-demo .demo-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin:32px 0 22px; }
.workflow-demo .demo-scenarios,.workflow-demo .demo-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.workflow-demo button { font:500 14px/1.5 var(--font); min-height:48px; padding:11px 17px; border:1px solid #7b8da45c; border-radius:999px; background:transparent; color:#172638; cursor:pointer; transition:background .2s,border-color .2s; }
.workflow-demo button:hover { border-color:var(--demo-bronze); background:#dbe7ff0d; }
.workflow-demo button[aria-pressed=true] { border-color:var(--demo-bronze); color:#1d4ed8; background:#dbe7ff17; }
.workflow-demo button[aria-pressed=true]:before { content:''; display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:currentColor; vertical-align:middle; }
.workflow-demo .demo-next { background:#dbe7ff; border-color:#1d4ed8; color:#172638; min-width:112px; font-weight:700; }
.workflow-demo .demo-next:hover { background:#dbe7ff; }
.workflow-demo .demo-reset,.workflow-demo .demo-thinking { border:0; border-radius:0; padding:11px 0; text-decoration:underline; text-underline-offset:5px; }
.workflow-demo .demo-reset { margin-left:8px; }
.workflow-demo button:disabled { color:#526174; cursor:default; text-decoration:none; background:transparent; }
.workflow-demo button:focus-visible { outline:2px solid #1d4ed8; outline-offset:5px; }
.workflow-demo .demo-status { border-top:1px solid #7b8da440; padding-top:20px; margin:0; color:#172638; font-size:14px; line-height:1.7; }
.workflow-demo .workflow-story { margin:34px 0 20px; padding-bottom:18px; gap:5%; }
.workflow-demo .workflow-story .demo-stage { width:100%; margin-left:0; opacity:1; transform:none!important; animation:none!important; transition:none; }
.motion-enabled .workflow-demo .workflow-story .demo-stage { opacity:1; transform:none!important; }
.workflow-demo .workflow-brief { margin-top:50px; }
.workflow-demo .workflow-response { margin-top:100px; }
.workflow-demo .workflow-story>.demo-stage:before { width:100%; height:2px; margin-bottom:20px; background:#e5edf839; }
.workflow-demo .workflow-story>.demo-stage[aria-current=step]:before { background:linear-gradient(90deg,var(--demo-bronze),#dbe7ff35); }
.workflow-demo .workflow-story>.demo-stage.is-complete:before { background:linear-gradient(90deg,var(--demo-silver),#e5edf835); }
.workflow-demo .demo-stage-heading { display:flex; flex-wrap:wrap; align-items:start; gap:12px 16px; margin-bottom:24px; }
.workflow-demo h5 { font:500 23px/1.3 var(--display); letter-spacing:-.03em; color:#172638; margin:0; }
.workflow-demo h5>span { display:block; font:500 11px/1.5 var(--font); letter-spacing:.12em; margin-bottom:9px; color:var(--demo-silver); }
.workflow-demo .demo-stage-state { font:600 10px/1.5 var(--font); letter-spacing:.06em; color:#526174; margin-top:28px; }
.workflow-demo [aria-current=step] .demo-stage-state { color:#1d4ed8; }
.workflow-demo .workflow-inquiry-top { margin:0 0 18px; }
.workflow-demo .workflow-inquiry-top b { color:#1d4ed8; font-size:11px; }
.workflow-demo #demo-request { display:block; font:400 21px/1.55 var(--display); color:#172638; letter-spacing:-.025em; }
.workflow-demo .demo-stage-note { font-size:14px; color:#172638; margin-top:20px; }
.workflow-demo .demo-waiting { font:400 18px/1.7 var(--display); color:#526174; margin:0; }
.workflow-demo .demo-brief-list { margin:0; }
.workflow-demo .demo-brief-list>div { padding:0 0 15px; margin:0 0 15px; border-bottom:1px solid #7b8da42b; }
.workflow-demo dt,.workflow-demo .demo-draft-label { font:500 10px/1.6 var(--font); letter-spacing:.08em; color:#1d4ed8; }
.workflow-demo dd { font-size:15px; line-height:1.7; color:#172638; margin:6px 0 0; }
.workflow-demo .demo-draft { font-size:15px; line-height:1.8; color:#172638; margin:12px 0 22px; }
.workflow-demo .workflow-human { align-items:start; margin-top:20px; }
.workflow-demo .workflow-human p { margin:0; color:#172638; font-size:13px; line-height:1.7; }
.workflow-demo .workflow-human>span { flex-shrink:0; }
.workflow-demo .workflow-foot { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:22px; border-top:1px solid #7b8da440; }
.workflow-demo .workflow-foot p { max-width:600px; margin:0; color:#172638; font-size:13px; line-height:1.8; letter-spacing:0; text-transform:none; }
.workflow-demo .demo-thinking { flex-shrink:0; color:#1d4ed8; }
.workflow-demo .demo-no-script { color:#172638; }
@media(max-width:1000px) { .workflow-demo .demo-controls { align-items:start; flex-direction:column; } }
@media(max-width:700px) {
  .workflow-demo { scroll-margin-top:96px; }
  .workflow-demo .workflow-headline { font-size:clamp(30px,8vw,39px); }
  .workflow-demo .demo-scenarios { gap:9px; }
  .workflow-demo .demo-scenarios button { font-size:13px; padding:11px 13px; }
  .workflow-demo .demo-controls { gap:20px; margin-top:26px; }
  .workflow-demo .workflow-story { gap:12px; margin-top:26px; }
  .workflow-demo .workflow-story .demo-stage { margin-top:0; padding:18px 0!important; }
  .workflow-demo .demo-stage-heading { margin-bottom:20px; }
  .workflow-demo .workflow-foot { align-items:start; flex-direction:column; gap:12px; }
  .workflow-demo #demo-request { font-size:20px; }
}
@media(prefers-reduced-motion:no-preference) {
  .workflow-demo #demo-brief:not([hidden]),.workflow-demo #demo-response:not([hidden]) { animation:demo-reveal .28s ease-out; }
  @keyframes demo-reveal { from { opacity:.5; translate:0 6px; } to { opacity:1; translate:0 0; } }
}
.motion-paused .workflow-demo #demo-brief,.motion-paused .workflow-demo #demo-response { animation:none; }
@media(prefers-reduced-motion:reduce) { .workflow-demo button { transition:none; } }

/* A glass conversation: incoming request, private brief, outgoing draft. */
.workflow-demo .workflow-story{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:960px;margin:36px auto;padding:28px 18px;background:radial-gradient(ellipse at 12% 18%,#dbe7ff99,transparent 48%),radial-gradient(ellipse at 90% 75%,#c5dcfa88,transparent 50%);isolation:isolate}
.workflow-demo .workflow-story .demo-stage{position:relative;box-sizing:border-box;width:82%;max-width:680px;margin:0;padding:25px 28px!important;border:1px solid #ffffffdd;border-radius:30px 30px 30px 8px;background:linear-gradient(135deg,#ffffffdb,#e9eef5ad);box-shadow:inset 0 1px 1px #fff,0 8px 28px #183a6510,0 1px 2px #294c6824;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
.workflow-demo .workflow-story>.demo-stage:before{display:none}
.workflow-demo .workflow-story .workflow-brief{align-self:center;width:74%;border-radius:26px;background:linear-gradient(135deg,#f7fbffce,#dbe7ff96)}
.workflow-demo .workflow-story .workflow-response{align-self:flex-end;border-radius:30px 30px 8px 30px;background:linear-gradient(135deg,#2264e9f5,#1648bfeF);border-color:#9cbeff;color:#fff;box-shadow:inset 0 1px 1px #ffffff90,0 10px 28px #1d4ed824}
.workflow-demo .demo-stage-heading{align-items:center;justify-content:space-between;margin-bottom:18px;gap:8px}
.workflow-demo h5{font-size:19px;letter-spacing:-.02em}
.workflow-demo h5>span{display:inline;margin-right:8px;font-size:10px}
.workflow-demo .demo-stage-state{margin:0;font-size:9px}
.workflow-demo #demo-request{font:400 18px/1.6 var(--font);letter-spacing:0}
.workflow-demo .demo-waiting{font:400 16px/1.65 var(--font)}
.workflow-demo .demo-stage-note{font-size:12px;line-height:1.6;margin-bottom:0;color:#526174}
.workflow-demo .workflow-response h5,.workflow-demo .workflow-response h5>span,.workflow-demo .workflow-response .demo-stage-state,.workflow-demo .workflow-response .demo-waiting,.workflow-demo .workflow-response .demo-draft-label,.workflow-demo .workflow-response .demo-draft,.workflow-demo .workflow-response .workflow-human p{color:#fff}
.workflow-demo .workflow-response .workflow-human>span{background:#ffffff24;color:#fff;border:1px solid #ffffff80}
.workflow-demo .workflow-response h5 br{display:none}
.workflow-demo .demo-brief-list>div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.workflow-demo .demo-draft{font-size:17px;line-height:1.65}
@media(max-width:700px){.workflow-demo .workflow-story{padding:18px 2px;gap:20px}.workflow-demo .workflow-story .demo-stage{width:94%;padding:21px 20px!important}.workflow-demo .workflow-story .workflow-brief{width:88%}.workflow-demo h5{font-size:17px}.workflow-demo #demo-request,.workflow-demo .demo-draft{font-size:16px}.workflow-demo .demo-stage-state{font-size:8px}}
@media(prefers-reduced-transparency:reduce){.workflow-demo .workflow-story .demo-stage{backdrop-filter:none;-webkit-backdrop-filter:none;background:#eef3fa}.workflow-demo .workflow-story .workflow-response{background:#1d4ed8}}

.workflow-demo .workflow-story .workflow-message{background:linear-gradient(135deg,#ffffffdb,#e9eef5ad)!important;box-shadow:inset 0 1px 1px #fff,0 8px 28px #183a6510,0 1px 2px #294c6824!important;border:1px solid #ffffffdd!important}
.workflow-demo .workflow-story .workflow-brief{background:linear-gradient(135deg,#f7fbffce,#dbe7ff96)!important;box-shadow:inset 0 1px 1px #fff,0 8px 28px #183a6510,0 1px 2px #294c6824!important;border:1px solid #ffffffdd!important}

/* Keep the conversation open to the page; only individual bubbles carry glass. */
.workflow-demo #workflow-stages{background:none!important;border:0!important;box-shadow:none!important}

/* iMessage-inspired blue glass conversation and a glass detail button. */
.workflow-demo .workflow-story .workflow-message,.workflow-demo .workflow-story .workflow-brief{background:linear-gradient(145deg,#0874e5,#0754bd)!important;border:1px solid #a9caff!important;box-shadow:inset 0 1px 2px #ffffff8c,0 10px 28px #0754bd24!important;color:#fff}
.workflow-demo .workflow-story :is(.workflow-message,.workflow-brief) :is(h5,h5>span,.demo-stage-state,.workflow-inquiry-top b,.workflow-inquiry-top small,#demo-request,.demo-stage-note,.demo-waiting,dt,dd){color:#fff!important}
.workflow-demo .workflow-story :is(.workflow-message,.workflow-brief) .workflow-avatar{background:#ffffff33;color:#fff;border:1px solid #ffffff80}
.workflow-demo .workflow-story .workflow-brief .demo-brief-list>div{border-bottom-color:#ffffff55}
.workflow-demo .demo-thinking{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border:1px solid #fff;border-radius:999px;background:linear-gradient(135deg,#ffffffd9,#e3ecf8a8);box-shadow:inset 0 1px 2px #fff,0 5px 18px #17263812;color:#1d4ed8;text-decoration:none;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.workflow-demo .demo-thinking:hover{background:#fff;border-color:#abc4ee}
@media(prefers-reduced-transparency:reduce){.workflow-demo .workflow-story .workflow-message,.workflow-demo .workflow-story .workflow-brief{background:#0759c5!important}.workflow-demo .demo-thinking{background:#f1f5fb;backdrop-filter:none;-webkit-backdrop-filter:none}}