/* Scripted product demos for the website's product pages (2026-10-12).
   Each demo is a small replica of a real tool screen that plays itself: facts are typed in, the button is
   pressed, the real loading steps run, the quick-questions card appears when the tool would ask, and the
   result is written line by line. No mouse, no recording. Driven by site-demos.js. */
.dm { margin: 2rem 0 0; }
.dm-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.dm-tab { font: inherit; font-size: .8rem; font-weight: 600; color: #a1a1a6; background: rgba(255,255,255,.03); border: 1px solid #2a2a30; border-radius: 980px; padding: .5rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; transition: color .2s, border-color .2s, background .2s; }
.dm-tab:hover { color: #f5f5f7; border-color: #3a3a42; }
.dm-tab[aria-selected="true"] { color: #f5f5f7; border-color: rgba(201,168,76,.6); background: rgba(201,168,76,.08); }
.dm-tab small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; }
.dm-tab[aria-selected="true"] small { color: var(--gold2); }
.dm-tab:focus-visible, .dm-replay:focus-visible { outline: 2px solid rgba(232,196,106,.9); outline-offset: 2px; }

.dm-win { border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: linear-gradient(180deg, #141417, #0e0e11); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.dm-bar { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.dm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a40; }
.dm-bar i:nth-child(1) { background: #ff5f57; } .dm-bar i:nth-child(2) { background: #febc2e; } .dm-bar i:nth-child(3) { background: #28c840; }
.dm-title { margin-left: .6rem; font-size: .76rem; font-weight: 600; color: #a1a1a6; letter-spacing: .02em; }
.dm-replay { margin-left: auto; font: inherit; font-size: .72rem; font-weight: 600; color: #a1a1a6; background: none; border: 1px solid #2a2a30; border-radius: 980px; padding: .28rem .8rem; cursor: pointer; transition: color .2s, border-color .2s; }
.dm-replay:hover { color: var(--gold2); border-color: rgba(201,168,76,.5); }
.dm-body { padding: 1.3rem; min-height: var(--dm-min, 560px); }
.dm-cap { margin: .9rem 0 0; font-size: .74rem; color: #8e8e93; }

/* two panes */
.dm-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem; align-items: start; }
.dm-pane { min-width: 0; }
.dm-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6e6e73; margin: 0 0 .5rem; }
.dm-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.dm-chip { font-size: .72rem; font-weight: 500; color: #a1a1a6; border: 1px solid #2a2a30; border-radius: 8px; padding: .38rem .65rem; transition: color .25s, border-color .25s, background .25s; }
.dm-chip.on { color: #f5f5f7; border-color: rgba(201,168,76,.65); background: rgba(201,168,76,.1); }
.dm-chip em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--gold2); margin-left: .35rem; letter-spacing: .06em; }
.dm-field { border: 1px solid #2a2a30; border-radius: 10px; background: rgba(0,0,0,.25); padding: .7rem .8rem; font-size: .8rem; line-height: 1.6; color: #d2d2d7; min-height: 4.8rem; margin-bottom: .9rem; overflow-wrap: anywhere; }
.dm-field.sm { min-height: 0; padding: .5rem .8rem; }
.dm-field.filled { border-color: #3a3a42; }
.dm-row { display: flex; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.dm-sel { flex: 1 1 120px; border: 1px solid #2a2a30; border-radius: 10px; padding: .45rem .7rem; font-size: .74rem; color: #d2d2d7; background: rgba(0,0,0,.25); }
.dm-sel b { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6e6e73; margin-bottom: .1rem; }
.dm-btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: .8rem; font-weight: 700; color: #050508; border: 0; border-radius: 10px; padding: .65rem 1.2rem; background: linear-gradient(135deg, var(--gold), var(--gold2) 55%, var(--gold)); transition: transform .2s, box-shadow .2s, opacity .2s; width: 100%; }
.dm-btn.press { transform: scale(.97); box-shadow: 0 0 0 4px rgba(201,168,76,.25); }
.dm-btn[disabled] { opacity: .55; }
.dm-caret { display: inline-block; width: 2px; height: 1em; background: var(--gold2); margin-left: 2px; vertical-align: -.12em; animation: dmBlink 1s steps(2) infinite; }
@keyframes dmBlink { 50% { opacity: 0; } }
.dm-file { display: flex; align-items: center; gap: .65rem; border: 1px dashed #3a3a42; border-radius: 10px; padding: .7rem .85rem; margin-bottom: .9rem; font-size: .78rem; color: #d2d2d7; }
.dm-file svg { width: 18px; height: 18px; fill: none; stroke: var(--gold2); stroke-width: 1.8; flex: none; }
.dm-file small { display: block; color: #8e8e93; font-size: .68rem; }

/* output panes */
.dm-out { border: 1px solid #2a2a30; border-radius: 14px; background: rgba(0,0,0,.2); min-height: 470px; padding: 1rem; position: relative; display: flex; flex-direction: column; }
.dm-out-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; font-size: .72rem; font-weight: 600; color: #a1a1a6; }
.dm-status { font-size: .62rem; font-weight: 700; padding: .25rem .6rem; border-radius: 6px; white-space: nowrap; }
.dm-status.gold { background: rgba(201,168,76,.14); color: var(--gold2); }
.dm-status.green { background: rgba(111,239,184,.1); color: #6fefb8; }
.dm-status.red { background: rgba(248,113,113,.1); color: #f87171; }
.dm-idle { margin: auto; text-align: center; color: #6e6e73; font-size: .78rem; max-width: 24ch; line-height: 1.6; }
.dm-stages { margin: auto 0; padding: .4rem .4rem; display: grid; gap: .7rem; }
.dm-stage { display: flex; align-items: center; gap: .7rem; font-size: .8rem; color: #d2d2d7; animation: dmIn .35s both; }
.dm-stage .dm-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(201,168,76,.3); border-top-color: var(--gold2); animation: dmSpin .8s linear infinite; flex: none; }
.dm-stage.done { color: #8e8e93; }
.dm-stage.done .dm-dot { animation: none; border: 0; background: rgba(111,239,184,.18); position: relative; }
.dm-stage.done .dm-dot::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #6fefb8; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes dmSpin { to { transform: rotate(360deg); } }
@keyframes dmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* paper (documents and emails) */
.dm-paper { background: #f4f2ec; color: #1d1d1f; border-radius: 10px; padding: 1.3rem 1.4rem 1.5rem; font-size: .8rem; line-height: 1.7; flex: 1; animation: dmIn .4s both; }
.dm-letterhead { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 2px solid #c9a84c; padding-bottom: .55rem; margin-bottom: .9rem; }
.dm-letterhead b { font-family: 'Fraunces', Georgia, serif; font-size: 1rem; letter-spacing: .04em; color: #1d1d1f; }
.dm-letterhead span { font-size: .68rem; color: #6e6e73; }
.dm-re { font-weight: 700; margin: 0 0 .7rem; font-size: .8rem; }
.dm-paper p { margin: 0 0 .65rem; }
.dm-paper b { color: #8a6d1f; }
.dm-paper .dm-re b { color: inherit; }
.dm-paper .dm-sig { color: #6e6e73; font-style: italic; }
.dm-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .75rem; font-size: .7rem; color: #8e8e93; }
.dm-meta b { color: var(--gold2); }
.dm-note { font-size: .68rem; color: #8e8e93; margin-top: .6rem; line-height: 1.5; }
.dm-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.dm-tools span { font-size: .68rem; font-weight: 600; color: #d2d2d7; border: 1px solid #2a2a30; border-radius: 7px; padding: .28rem .6rem; animation: dmIn .35s both; }

/* quick questions card (copy of the real one) */
.dm-cq { position: absolute; inset: 0; background: #0e0e11; border-radius: 14px; padding: 1.1rem; z-index: 2; display: flex; flex-direction: column; justify-content: center; animation: dmIn .35s both; }
.dm-cq h5 { margin: 0 0 .8rem; font-size: .82rem; font-weight: 600; color: #f5f5f7; }
.dm-cq .q { margin-bottom: .85rem; }
.dm-cq .q p { margin: 0 0 .4rem; font-size: .78rem; color: #d2d2d7; }
.dm-cq .opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.dm-cq .o { font-size: .72rem; border: 1px solid #2a2a30; border-radius: 980px; padding: .38rem .8rem; color: #a1a1a6; transition: all .25s; }
.dm-cq .o.on { color: #050508; background: var(--gold2); border-color: var(--gold2); font-weight: 600; }
.dm-cq .acts { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .4rem; font-size: .72rem; color: #8e8e93; }
.dm-cq .go { font-weight: 700; color: #050508; background: linear-gradient(135deg, var(--gold), var(--gold2)); border-radius: 8px; padding: .45rem 1rem; opacity: .5; transition: opacity .25s, transform .2s; }
.dm-cq .go.ready { opacity: 1; }
.dm-cq .go.press { transform: scale(.95); }
.dm-cq .hint { margin-top: .7rem; font-size: .68rem; color: #6e6e73; line-height: 1.5; }

/* analyzer results */
.dm-rows { display: grid; gap: .55rem; }
.dm-risk { border: 1px solid #2a2a30; border-radius: 10px; padding: .7rem .85rem; background: rgba(255,255,255,.02); font-size: .78rem; line-height: 1.6; color: #d2d2d7; animation: dmIn .35s both; }
.dm-risk .top { display: flex; align-items: center; gap: .55rem; margin-bottom: .2rem; }
.dm-risk .top b { font-size: .78rem; color: #f5f5f7; }
.dm-tag { font-size: .58rem; font-weight: 700; letter-spacing: .08em; padding: .15rem .45rem; border-radius: 5px; }
.dm-tag.high { background: rgba(248,113,113,.14); color: #f87171; }
.dm-tag.med { background: rgba(251,191,36,.13); color: #fbbf24; }
.dm-tag.miss { background: rgba(147,197,253,.13); color: #93c5fd; }
.dm-risk .ask { color: #a1a1a6; }
.dm-risk .ask b { color: var(--gold2); font-weight: 600; }
.dm-kv { display: grid; grid-template-columns: 9rem 1fr; gap: 0; border: 1px solid #2a2a30; border-radius: 10px; overflow: hidden; font-size: .78rem; }
.dm-kv div { padding: .5rem .8rem; border-bottom: 1px solid #1f1f24; animation: dmIn .35s both; }
.dm-kv div:nth-child(odd) { color: #8e8e93; background: rgba(255,255,255,.02); }
.dm-kv div:nth-child(even) { color: #f5f5f7; }
.dm-kv div:nth-last-child(-n+2) { border-bottom: 0; }
.dm-ba { display: grid; gap: .7rem; }
.dm-ba .box { border: 1px solid #2a2a30; border-radius: 10px; padding: .75rem .9rem; font-size: .78rem; line-height: 1.65; color: #d2d2d7; }
.dm-ba .box h6 { margin: 0 0 .35rem; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6e6e73; }
.dm-ba .box.after { border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.05); }
.dm-excerpt { border: 1px solid #2a2a30; border-radius: 10px; background: rgba(0,0,0,.25); padding: .7rem .85rem; font-size: .72rem; line-height: 1.65; color: #8e8e93; margin-bottom: .9rem; }
.dm-excerpt mark { background: rgba(201,168,76,.18); color: #e8c46a; border-radius: 3px; padding: 0 .15rem; }
.dm-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* forwarding demos: inbox -> automatic work -> result */
.dm-flow { display: grid; grid-template-columns: minmax(0, 5fr) 3.2rem minmax(0, 7fr); gap: .6rem; align-items: stretch; }
.dm-mail { border: 1px solid #2a2a30; border-radius: 14px; background: rgba(0,0,0,.22); padding: 1rem; font-size: .76rem; line-height: 1.6; color: #d2d2d7; animation: dmIn .4s both; }
.dm-mail .hd { display: grid; gap: .1rem; padding-bottom: .65rem; margin-bottom: .65rem; border-bottom: 1px solid #25252a; font-size: .7rem; color: #8e8e93; }
.dm-mail .hd b { color: #f5f5f7; font-weight: 600; }
.dm-attach { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; border: 1px solid #3a3a42; border-radius: 8px; padding: .35rem .65rem; font-size: .7rem; color: #d2d2d7; }
.dm-arrow { display: flex; align-items: flex-start; justify-content: center; padding-top: 5.5rem; }
.dm-arrow i { width: 100%; height: 2px; background: linear-gradient(90deg, rgba(201,168,76,.15), var(--gold2)); position: relative; border-radius: 2px; }
.dm-arrow i::after { content: ''; position: absolute; right: -1px; top: -4px; border: solid var(--gold2); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg); }
.dm-result { border: 1px solid #2a2a30; border-radius: 14px; background: rgba(0,0,0,.2); padding: 1rem; display: flex; flex-direction: column; min-height: 430px; }
.dm-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.dm-pill { font-size: .68rem; font-weight: 600; color: #d2d2d7; border: 1px solid #2a2a30; border-radius: 980px; padding: .3rem .7rem; display: inline-flex; align-items: center; gap: .45rem; animation: dmIn .35s both; }
.dm-pill .dm-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(201,168,76,.3); border-top-color: var(--gold2); animation: dmSpin .8s linear infinite; }
.dm-pill.done .dm-dot { animation: none; border: 0; background: rgba(111,239,184,.8); }
.dm-line { margin-top: .8rem; font-size: .72rem; color: #a1a1a6; display: flex; flex-wrap: wrap; gap: .4rem 1rem; animation: dmIn .35s both; }
.dm-line b { color: var(--gold2); font-weight: 600; }
.dm-time { padding: 1.4rem 1rem 1rem; }
.dm-track { position: relative; height: 4px; background: #25252a; border-radius: 4px; margin: 2.6rem 0 3.4rem; }
.dm-track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 4px; transition: width 1.6s cubic-bezier(.4,0,.2,1); }
.dm-tick { position: absolute; top: -7px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #17171a; border: 2px solid #3a3a42; transition: border-color .3s, background .3s; }
.dm-tick.on { border-color: var(--gold2); background: var(--gold2); }
.dm-tick span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; color: #8e8e93; top: 26px; text-align: center; line-height: 1.4; }
.dm-tick span b { display: block; color: #f5f5f7; font-size: .72rem; }
.dm-tick.up span { top: auto; bottom: 26px; }

@media (max-width: 860px) {
  .dm-split, .dm-flow { grid-template-columns: 1fr; }
  .dm-arrow { height: 1.6rem; padding-top: 0; align-items: center; } .dm-arrow i { width: 2px; height: 100%; background: linear-gradient(180deg, rgba(201,168,76,.15), var(--gold2)); }
  .dm-arrow i::after { right: -4px; top: auto; bottom: -1px; transform: rotate(45deg); }
  .dm-body { padding: 1rem; min-height: 0; }
  .dm-kv { grid-template-columns: 7rem 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dm-stage, .dm-paper, .dm-risk, .dm-mail, .dm-cq, .dm-pill, .dm-line, .dm-tools span, .dm-kv div { animation: none; } .dm-caret { animation: none; } .dm-track .fill { transition: none; } }

/* Scripted cursor, menus and the drop zone (2026-10-12) */
.dm-win { position: relative; }
.dm-cur { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.4,0,.2,1), opacity .3s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); margin: -2px 0 0 -4px; }
.dm-cur svg { display: block; transition: transform .12s; transform-origin: 20% 15%; }
.dm-cur.down svg { transform: scale(.82); }
.dm-rip { position: absolute; z-index: 6; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--gold2); pointer-events: none; animation: dmRip .65s ease-out both; }
@keyframes dmRip { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.dm-menu { position: absolute; z-index: 5; background: #1a1a1e; border: 1px solid #3a3a42; border-radius: 10px; padding: .3rem; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: dmIn .2s both; }
.dm-menu .m { font-size: .76rem; color: #d2d2d7; padding: .45rem .6rem; border-radius: 7px; }
.dm-menu .m.cur { color: var(--gold2); }
.dm-menu .m.hov { background: rgba(201,168,76,.18); color: #f5f5f7; }
.dm-sel.changed { border-color: rgba(201,168,76,.6); }
.dm-sel span[data-f="v"] { display: block; }
.dm-drop { border: 1px dashed #3a3a42; border-radius: 10px; padding: 1.4rem .9rem; text-align: center; font-size: .78rem; color: #8e8e93; margin-bottom: .9rem; }
.dm-file { border-style: solid; border-color: rgba(201,168,76,.5); }
.dm-pane [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .dm-cur, .dm-rip { display: none; } .dm-menu { animation: none; } }