/* =====================================================================
   "One request. Four systems." demo: the section under the hero.
   One request is done by hand at a normal pace, then the program does the same inbox.
   Everything is scoped to .work-demo, so nothing here affects the rest of the site.
   Orange = by hand, the site's primary blue = the program.
   ===================================================================== */

.work-demo {
    --wd-primary: var(--primary-color, #4361ee);
    --wd-secondary: var(--secondary-color, #3f37c9);
    --wd-accent: var(--accent-color, #4cc9f0);
    --wd-text: var(--text-color, #2b2d42);
    --wd-muted: var(--text-light, #8d99ae);
    --wd-ink: #1e2140;
    --wd-ui: #4a5278;
    --wd-line: #e6e9f2;
    --wd-pain: #e8590c;
    --wd-pain-ink: #b8420a;
    --wd-pain-bg: #fff4e6;
    --wd-pain-line: #ffd8a8;
    --wd-ok-bg: #eef1ff;
    --wd-ok-line: #c9d2ff;
    --wd-green: #2b8a3e;
    padding: var(--section-padding, 80px 0);
    background-color: var(--white, #fff);
}

.work-demo .section-header {
    max-width: 820px;
}

.work-demo .section-header h2 {
    text-wrap: balance;
}

.work-demo-stage {
    container-type: inline-size;
}

.work-demo-stage [hidden] {
    display: none !important;
}

.work-demo-stage p {
    margin: 0;
}

.work-demo-cta {
    text-align: center;
    margin: 34px 0 0;
    font-weight: 600;
    color: var(--wd-text);
}

.work-demo-cta a {
    white-space: nowrap;
}

/* ---------- top bar: who is working, requests waiting ---------- */
.wd { max-width: 960px; margin: 0 auto; }
.wd .hud { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.wd .modes { display: inline-flex; gap: 2px; padding: 4px; border-radius: 99px; background: #f1f3f9; }
.wd .modes button { border: 0; background: transparent; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--wd-muted); cursor: pointer; white-space: nowrap; }
.wd .modes button.hand[aria-pressed="true"] { background: var(--wd-pain); color: #fff; }
.wd .modes button.prog[aria-pressed="true"] { background: var(--wd-primary); color: #fff; }
.wd .modes button:focus-visible { outline: 3px solid var(--wd-accent); outline-offset: 2px; }
.wd .modes.flash button[aria-pressed="true"] { animation: wd-flash .8s ease 2; }
.wd[data-mode="hand"] .modes.flash button[aria-pressed="true"] { --wd-fl: rgba(232, 89, 12, .3); }
.wd .stat { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #f4f6fb; font-size: 14px; font-weight: 600; color: var(--wd-text); }
.wd .stat b { font-size: 18px; color: var(--wd-ink); font-variant-numeric: tabular-nums; }
.wd[data-mode="hand"] .left { background: var(--wd-pain-bg); color: var(--wd-pain-ink); }
.wd[data-mode="hand"] .left b { color: var(--wd-pain-ink); }
.wd[data-mode="prog"] .left { background: var(--wd-ok-bg); color: var(--wd-primary); }
.wd[data-mode="prog"] .left b { color: var(--wd-primary); }

/* ---------- the five steps of a request ---------- */
.wd .strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.wd .strip .lbl { margin-inline-end: 4px; font-size: 12.5px; font-weight: 700; color: var(--wd-muted); }
.wd .strip ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.wd .strip li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border: 1.5px solid transparent; border-radius: 99px; background: #f4f6fb; font-size: 13px; font-weight: 600; color: var(--wd-text); transition: background .15s, border-color .15s, color .15s; }
.wd .strip li b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e3e7f2; color: var(--wd-ui); font-size: 11px; }
.wd[data-mode="hand"] .strip li.on { background: var(--wd-pain-bg); border-color: var(--wd-pain); color: var(--wd-pain-ink); }
.wd[data-mode="hand"] .strip li.on b { background: var(--wd-pain); color: #fff; }
.wd[data-mode="prog"] .strip li.on { background: var(--wd-ok-bg); border-color: var(--wd-primary); color: var(--wd-primary); }
.wd[data-mode="prog"] .strip li.on b { background: var(--wd-primary); color: #fff; }

/* ---------- the computer ---------- */
.wd .monitor { padding: 12px; border-radius: 18px; background: #1f2340; box-shadow: 0 30px 60px rgba(31, 35, 64, .22); transition: box-shadow .5s; }
.wd[data-mode="prog"] .monitor { box-shadow: 0 0 0 4px rgba(67, 97, 238, .55), 0 0 46px rgba(67, 97, 238, .4), 0 30px 60px rgba(31, 35, 64, .22); }
.wd .screen { position: relative; overflow: hidden; border-radius: 8px; font-size: 13px; line-height: 1.4; color: var(--wd-text); }
.wd .ribbon { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; overflow: hidden; font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: background .5s, color .5s; }
.wd .ribbon svg { flex: none; width: 15px; height: 15px; }
.wd .ribbon small { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; opacity: .85; }
.wd .ribbon .dot { flex: none; width: 8px; height: 8px; margin-inline-start: auto; border-radius: 50%; background: currentColor; opacity: .5; }
.wd[data-mode="hand"] .ribbon { background: var(--wd-pain-bg); color: var(--wd-pain-ink); box-shadow: inset 0 -1px 0 var(--wd-pain-line); }
.wd[data-mode="prog"] .ribbon { background: linear-gradient(90deg, var(--wd-primary), var(--wd-secondary)); color: #fff; }
.wd[data-mode="prog"] .ribbon .dot { opacity: 1; background: #7cffb2; box-shadow: 0 0 8px #7cffb2; animation: wd-pulse 1.4s infinite; }
.wd .desk { position: relative; height: 480px; background: linear-gradient(160deg, #eef1fb, #e0e6f7); }
.wd .taskbar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-top: 1px solid #dde2f0; background: #f8f9fd; }
.wd .taskbar .app { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #eef1f8; color: var(--wd-ui); }
.wd .taskbar .app svg { width: 15px; height: 15px; }
.wd .taskbar .app.on { background: #fff; color: var(--wd-primary); box-shadow: inset 0 -2px 0 var(--wd-primary), 0 1px 3px rgba(30, 33, 64, .12); }
.wd .tclock { margin-inline-start: auto; font-size: 12px; font-weight: 700; color: var(--wd-ui); font-variant-numeric: tabular-nums; }
.wd .stand { width: 120px; height: 26px; margin: 0 auto; background: linear-gradient(#2a2f52, #1f2340); clip-path: polygon(32% 0, 68% 0, 78% 100%, 22% 100%); }
.wd .base { width: 220px; height: 8px; margin: 0 auto; border-radius: 8px; background: #1f2340; }
.wd .demo-tag { margin-top: 8px; text-align: end; font-size: 12px; color: var(--wd-muted); }

/* ---------- windows ---------- */
.wd .w { position: absolute; z-index: 1; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(30, 33, 64, .14); transition: box-shadow .2s, filter .2s; }
.wd .w.front { z-index: 3; box-shadow: 0 18px 40px rgba(30, 33, 64, .3); }
.wd .w:not(.front) { filter: saturate(.6) brightness(.97); }
.wd .w.mail { top: 14px; left: 14px; width: 53%; }
.wd .w.portal { top: 14px; right: 14px; width: 41%; }
.wd .w.xls { bottom: 14px; left: 14px; width: 50%; }
.wd .w.sys { bottom: 14px; right: 14px; width: 44%; background: #f5f6fa; }
.wd .bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--wd-line); background: #eef1f8; font-size: 12px; font-weight: 700; color: var(--wd-ui); }
.wd .bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c9cfe3; }
.wd .bar span { margin-inline-start: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd .bar em { margin-inline-start: auto; padding: 1px 8px; border-radius: 99px; background: var(--wd-pain); color: #fff; font-size: 11px; font-style: normal; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.wd .bar em.on { opacity: 1; transform: none; }
.wd .w.sys .bar { border: 0; background: linear-gradient(90deg, var(--wd-primary), var(--wd-secondary)); color: #fff; }
.wd .w.sys .bar i { background: rgba(255, 255, 255, .55); }
.wd .w.xls .bar { border-bottom-color: #cfe8d8; background: #e7f4ec; color: #1e6b3a; }
.wd .w.xls .bar i { background: #b7dcc5; }

/* ---------- what's inside the windows ---------- */
.wd .form, .wd .pf { padding: 8px 14px 14px; }
.wd .w label { display: block; margin: 6px 0 4px; font-size: 11px; font-weight: 700; color: var(--wd-ui); }
.wd .form label { margin: 4px 0 3px; }
.wd .in { display: flex; align-items: center; height: 30px; padding: 0 10px; overflow: hidden; border: 1.5px solid #d7dcea; border-radius: 6px; background: #fff; font-weight: 700; color: var(--wd-ink); white-space: nowrap; }
.wd .form .in { height: 28px; }
.wd .in.act { border-color: var(--wd-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, .18); }
.wd .row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wd .row .in { flex: 1; }
.wd .btnx { padding: 7px 13px; border: 0; border-radius: 6px; background: #eef1f8; font: inherit; font-size: 12px; font-weight: 700; color: var(--wd-ui); white-space: nowrap; transition: transform .1s; }
.wd .btnx.pri { background: var(--wd-primary); color: #fff; }
.wd .btnx.press { transform: scale(.9); }
.wd .toast { overflow: hidden; font-size: 12px; font-weight: 700; color: var(--wd-green); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.wd .toast.on { opacity: 1; }
.wd .kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--wd-line); font-size: 12.5px; }
.wd .kv span { font-weight: 600; color: var(--wd-muted); }
.wd .kv b { color: var(--wd-ink); white-space: nowrap; }
.wd .kv b.ok { color: var(--wd-green); }
.wd .res { margin-top: 8px; opacity: .3; transition: opacity .2s; }
.wd .res.on { opacity: 1; }
.wd .mailbox { display: grid; grid-template-columns: 38% 1fr; min-height: 170px; }
.wd .inbox { border-inline-end: 1px solid var(--wd-line); background: #fafbfe; }
.wd .inbox li { padding: 7px 10px; border-bottom: 1px solid #eef0f6; font-size: 11px; line-height: 1.35; color: var(--wd-muted); }
.wd .inbox li b { display: block; font-size: 12px; color: var(--wd-ink); }
.wd .inbox li.unread b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--wd-primary); vertical-align: 1px; }
.wd .inbox li.hl { background: #e9edff; }
.wd .read { min-width: 0; padding: 9px 12px; }
.wd .read .empty { padding-top: 40px; text-align: center; font-size: 12px; color: var(--wd-muted); }
.wd .read .subj { margin-bottom: 4px; font-size: 13px; font-weight: 800; color: var(--wd-ink); }
.wd .compose { min-height: 30px; margin-top: 8px; padding: 6px 8px; border: 1.5px solid #d7dcea; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 600; color: var(--wd-ink); }
.wd .xl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.wd .xl th { padding: 4px 6px; overflow: hidden; border: 1px solid #e3e6ef; background: #f1f3f8; font-size: 10.5px; font-weight: 600; text-align: start; color: var(--wd-muted); white-space: nowrap; }
.wd .xl td { height: 27px; padding: 0 7px; overflow: hidden; border: 1px solid #e9ecf3; font-weight: 600; color: var(--wd-ink); text-overflow: ellipsis; white-space: nowrap; }
.wd .xl th:first-child, .wd .xl td:first-child { width: 28px; background: #f7f8fb; font-size: 10.5px; text-align: center; color: var(--wd-muted); }
.wd .xl td.act { box-shadow: inset 0 0 0 2px #1f9d55; }

/* ---------- messages on the screen ---------- */
.wd .modal { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(30, 33, 64, .3); opacity: 0; pointer-events: none; transition: opacity .2s; }
.wd .modal.on { opacity: 1; }
.wd .modal .box { width: min(300px, 82%); padding: 16px 20px; border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 20px 40px rgba(30, 33, 64, .25); }
.wd .modal b { display: block; margin-bottom: 2px; color: var(--wd-ink); }
.wd .modal span { font-size: 13px; color: var(--wd-muted); }
.wd .modal em { display: inline-block; margin-top: 12px; padding: 6px 16px; border-radius: 6px; background: var(--wd-primary); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.wd .toast2 { position: absolute; left: 50%; bottom: 48px; z-index: 6; max-width: 92%; padding: 8px 14px; overflow: hidden; border-radius: 99px; background: var(--wd-primary); color: #fff; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.wd .toast2.on { opacity: 1; transform: translate(-50%, 0); }
.wd .ov { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(245, 247, 255, .86); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.wd .ov.on { opacity: 1; }
.wd .ov .card { max-width: 390px; padding: 22px 26px; border-top: 5px solid var(--wd-pain); border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 20px 50px rgba(30, 33, 64, .18); }
.wd .ov.prog .card { border-top-color: var(--wd-primary); }
.wd .ov .t { font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--wd-ink); font-variant-numeric: tabular-nums; }
.wd .ov p { margin-top: 6px; font-size: 16px; color: var(--wd-text); }
.wd .ov p b { color: var(--wd-pain-ink); }
.wd .ov.prog p b { color: var(--wd-primary); }
.wd .ov p.sub { font-size: 14px; color: var(--wd-muted); }
/* the switch between "by hand" and "the program" is always announced */
.wd .ov.switch.prog { background: rgba(67, 97, 238, .2); }
.wd .ov.switch .card { padding: 24px 28px 20px; border-top-width: 0; }
.wd .ov .sw-ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: var(--wd-pain-bg); color: var(--wd-pain); }
.wd .ov.prog .sw-ic { background: var(--wd-ok-bg); color: var(--wd-primary); animation: wd-pop .6s; }
.wd .ov .sw-ic svg { width: 30px; height: 30px; }
.wd .ov .t2 { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--wd-ink); }
.wd .ov.prog .t2 { color: var(--wd-primary); }
.wd .ov .pbar { display: block; height: 5px; margin-top: 16px; overflow: hidden; border-radius: 5px; background: #eef0f6; }
.wd .ov .pbar i { display: block; width: 0; height: 100%; border-radius: 5px; background: var(--wd-pain); animation: wd-fill linear forwards; }
.wd .ov.prog .pbar i { background: var(--wd-primary); }

/* ---------- the pointer ---------- */
.wd .cursor { position: absolute; top: 0; left: 0; z-index: 7; width: 22px; height: 22px; pointer-events: none; transition: transform var(--wd-mv, .42s) cubic-bezier(.65, 0, .35, 1); }
.wd .cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transition: transform .12s; }
.wd .cursor.click svg { transform: scale(.8); }
.wd .cursor.bot path { fill: var(--wd-primary); stroke: #fff; }
.wd .tip { position: absolute; top: 0; left: 0; z-index: 7; padding: 3px 9px; border-radius: 7px; background: var(--wd-ink); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; pointer-events: none; transition: transform var(--wd-mv, .42s) cubic-bezier(.65, 0, .35, 1), opacity .15s; }
.wd .tip.warn { background: var(--wd-pain); }
.wd .tip.bot { background: var(--wd-primary); }
.wd .tip:empty { opacity: 0; }

@keyframes wd-flash { 50% { box-shadow: 0 0 0 7px var(--wd-fl, rgba(67, 97, 238, .3)); } }
@keyframes wd-pulse { 50% { opacity: .35; } }
@keyframes wd-pop { 40% { transform: scale(1.05); } }
@keyframes wd-fill { to { width: 100%; } }

/* ---------- phones and narrow screens: windows stack like on a small laptop ---------- */
@container (max-width: 760px) {
    .wd .hud { gap: 6px; }
    .wd .modes { width: 100%; }
    .wd .modes button { flex: 1; padding: 7px 8px; font-size: 13px; }
    .wd .stat { padding: 6px 10px; font-size: 12.5px; }
    .wd .stat b { font-size: 16px; }
    .wd .strip, .wd .strip ol { gap: 4px; }
    .wd .strip .lbl { width: 100%; }
    .wd .strip li { gap: 5px; padding: 3px 9px 3px 4px; font-size: 11.5px; }
    .wd .strip li b { width: 17px; height: 17px; font-size: 10px; }
    .wd .monitor { padding: 7px; border-radius: 14px; }
    .wd .ribbon { padding: 0 10px; font-size: 12px; }
    .wd .ribbon small { display: none; }
    .wd .desk { height: 440px; }
    .wd .w.mail, .wd .w.portal, .wd .w.sys, .wd .w.xls { top: auto; right: auto; bottom: auto; left: 8px; width: calc(100% - 16px); }
    .wd .w.mail { top: 8px; }
    .wd .w.portal { top: 34px; }
    .wd .w.sys { top: 60px; }
    .wd .w.xls { top: 86px; }
    .wd .mailbox { grid-template-columns: 1fr; }
    .wd .inbox { display: none; }
    .wd .read .empty { padding-top: 24px; }
    .wd .stand { width: 90px; height: 18px; }
    .wd .base { width: 160px; height: 6px; }
    .wd .ov .card { padding: 18px; }
    .wd .ov .t { font-size: 26px; }
    .wd .ov .t2 { font-size: 20px; }
    .wd .ov p { font-size: 15px; }
    .wd .toast2 { bottom: 44px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .wd .cursor, .wd .tip, .wd .w, .wd .ribbon, .wd .monitor { transition: none; }
    .wd .ov .sw-ic, .wd .modes.flash button, .wd .ribbon .dot { animation: none; }
}