/* Local screenshots with lightweight, looping product demonstrations. */
.feature-page .feature-muted { background: var(--gray-50); }
.feature-detail { scroll-margin-top: 80px; }
.feature-page .module-content h2 { margin-bottom: var(--space-lg); }
.feature-page .module-tag svg { width: 18px; height: 18px; }
.feature-page .module-visual, .feature-page .module-content { min-width: 0; }
.feature-demo { --progress: 0; position: relative; container-type: inline-size; margin: 0; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 14px; background: white; box-shadow: var(--shadow-xl); text-align: left; }
.screen-crop { position: relative; overflow: hidden; width: 100%; background: white; }
.screen-crop > img { position: absolute; max-width: none; height: auto; }
.question-added { position: absolute; left: 56.7%; width: 10.5%; height: 7.1%; display: grid; place-items: center; background: #f8f8f8; opacity: 0; }
.question-added > span { display: grid; place-items: center; width: 6.24cqw; height: 2.94cqw; color: white; background: #318436; border-radius: 30px; padding: 0; font-size: 1.14cqw; line-height: 1; }
.question-added-1 { top: 30%; }
.question-added-2 { top: 40.7%; }
.question-added-3 { top: 51.4%; }
.question-added.is-added { opacity: 1; }
.question-cursor { position: absolute; width: 5%; aspect-ratio: 1; border: 2px solid #249aff; border-radius: 50%; left: 60%; opacity: 0; box-shadow: 0 0 0 4px #249aff22; }
.demo-questions.is-playing .question-cursor { opacity: 1; }
.chat-stage { position: relative; aspect-ratio: 1395 / 834; overflow: hidden; }
.chat-backdrop { display: block; width: 100%; height: auto; }
.chat-click { position: absolute; left: 87.9%; top: 75.7%; width: 5%; aspect-ratio: 1; border: 2px solid #249aff; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--chat-click-scale, 1)); box-shadow: 0 0 0 4px #249aff22; opacity: var(--chat-click-opacity, 0); }
.chat-screen { position: absolute; right: 2%; bottom: 0; width: 43%; height: 73%; display: flex; flex-direction: column; border-radius: 8px 8px 0 0; overflow: hidden; background: #b1e1cc; box-shadow: 0 0 12px #26394d26; transform: translateY(var(--chat-offset, 0%)); }
.chat-messages { flex: 1; min-height: 0; padding: 8px; }
.chat-sent { padding: 9px; font-size: clamp(8px, 1.9cqw, 12px); line-height: 1.45; color: #303943; background: #e2f9ef; border: 1px solid #6bac7f; border-radius: 5px; opacity: 0; }
.chat-sent small { display: block; color: #7b827d; font-size: .85em; margin-top: 3px; }
.chat-receipt { font-size: 1.3em; margin-left: 3px; }
.demo-chat[data-step="2"] .chat-sent, .demo-chat[data-step="3"] .chat-sent { opacity: 1; }
.demo-chat[data-step="3"] .chat-receipt { color: #008cf0; }
.chat-composer { height: 23%; min-height: 23%; overflow: hidden; padding: 6px 28px 6px 22px; position: relative; display: flex; align-items: center; background: white; font-size: clamp(8px, 1.85cqw, 11px); line-height: 1.35; color: #303943; border-bottom: 1px solid #1700bc; }
.chat-attachment { position: absolute; left: 6px; color: #81909b; }
.chat-typed::after { content: '|'; color: var(--primary-dark); }
.demo-chat[data-step="2"] .chat-typed::after, .demo-chat[data-step="3"] .chat-typed::after { content: ''; }
.chat-send { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #38c835; width: 20px; }
.chat-send svg { width: 100%; height: 20px; }
.demo-chat[data-step="1"] .chat-send { filter: drop-shadow(0 0 4px #38c835); }
.chat-recipient { display: flex; justify-content: space-between; gap: 8px; background: white; padding: 5px 8px; color: #1b00b8; font-size: clamp(7px, 1.6cqw, 10px); font-weight: 700; }
.chat-recipient > span { color: #81909b; }
.report-viewport { aspect-ratio: 1.62; overflow: hidden; background: #f9fbfa; }
.report-pan { width: 180%; max-width: none; height: auto; transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)); }
.chart-stage, .round-stage, .selection-stage { position: relative; overflow: hidden; }
/* Clip a stationary grid instead of squeezing it as the lines appear. */
.chart-mask { position: absolute; top: 15.3%; bottom: 21%; left: 8.1%; right: 1.8%; background-color: white; background-image: linear-gradient(#e9ebed 1px, transparent 1px), linear-gradient(90deg,#e9ebed 1px,transparent 1px); background-size: 100% 12.5%, 3.704% 100%; clip-path: inset(0 0 0 calc(var(--progress) * 100%)); }
.round-viewport, .selection-viewport { aspect-ratio: 1.62; overflow: hidden; }
.round-stage, .selection-stage { transform: translateY(var(--scroll-y, 0px)); }
.round-click { position: absolute; width: 5%; aspect-ratio: 1; border: 2px solid #009bff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px #009bff22; opacity: 0; z-index: 2; }


.demo-toast { display: flex; align-items: center; gap: 8px; position: absolute; bottom: 14px; left: 50%; width: max-content; max-width: calc(100% - 24px); transform: translate(-50%, 12px); padding: 10px 14px; background: #eaf9f1; border: 1px solid #7dd5a5; border-radius: 8px; color: #16633a; font-size: 12px; font-weight: 600; opacity: 0; box-shadow: var(--shadow-md); }
.demo-toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.demo-round[data-step="4"] .demo-toast, .demo-selection[data-step="4"] .demo-toast { opacity: 1; transform: translate(-50%, 0); }
.selection-mark { position: absolute; border: 3px solid #18b96b; background: #23c77e0a; box-shadow: 0 0 0 2px #ffffffbb; opacity: 0; }
.selection-mark svg { position: absolute; right: 5px; bottom: 8px; padding: 2px; color: white; background: #18b96b; border-radius: 50%; width: 24px; height: 24px; }
.selection-mark-1 { left: 75.1%; top: 23.5%; width: 24%; height: 19.1%; }
.selection-mark-2 { left: 75.1%; top: 42.8%; width: 24%; height: 19.1%; }
.selection-mark-3 { left: 29.8%; top: 62.1%; width: 25.2%; height: 18.9%; }
.selection-mark-4 { left: 29.8%; top: 81.2%; width: 25.2%; height: 18.8%; }
.selection-mark.is-selected { opacity: 1; }
.selection-cursor { position: absolute; width: 24px; height: 24px; border: 3px solid white; border-radius: 50%; background: var(--primary-dark); color: white; box-shadow: var(--shadow-md); opacity: 0; transition: left .45s ease, top .45s ease; }
.selection-cursor svg { width: 100%; height: 100%; }
.demo-selection.is-playing .selection-cursor { opacity: 1; }
.approval-stage { padding: 18px; background: linear-gradient(135deg,#f0f4ff,#f8fafc); }
.approval-request { display: grid; grid-template-columns: 1fr auto; padding: 12px; gap: 3px; margin-bottom: 12px; border: 1px solid var(--gray-200); background: white; border-radius: 8px; }
.approval-request > span { grid-column: 1 / -1; font-size: 9px; letter-spacing: .1em; color: var(--gray-500); }
.approval-request strong, .approval-request b { font-size: 13px; }
.approval-request b { color: var(--primary-dark); }
.approval-node { display: flex; align-items: center; gap: 10px; position: relative; background: white; border: 1px solid #dce2eb; border-radius: 8px; padding: 10px; }
.approval-node strong { display: block; font-size: 12px; }
.approval-node small { display: block; font-size: 10px; color: var(--gray-500); margin-top: 2px; }
.approval-check { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: 50%; color: var(--gray-400); }
.approval-check svg { width: 16px; height: 16px; }
.approval-status { font-size: 10px; color: var(--gray-500); margin-left: auto; }
.approval-node.is-approved { border-color: #79cba1; background: #f6fdf9; }
.approval-node.is-approved .approval-check { background: var(--success); color: white; border-color: var(--success); }
.approval-node.is-approved .approval-status { color: #187947; }
.approval-connector { width: 2px; height: 12px; margin: 0 auto; background: #b8c8e8; }
.approval-condition { border: 1px solid #c8d3ef; color: var(--primary-dark); width: fit-content; margin: 0 auto 10px; background: #eef2ff; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; }
.approval-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 2px solid #b8c8e8; padding-top: 12px; position: relative; }
.approval-branches .approval-node { flex-wrap: wrap; padding: 10px; }
.approval-branches .approval-node::before { content: ''; position: absolute; width: 2px; height: 12px; top: -13px; left: 50%; background: #b8c8e8; }
.approval-branches .approval-status { width: 100%; margin-left: 36px; }
.approval-result { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dce2eb; background: white; border-radius: 8px; padding: 9px; color: var(--gray-500); font-size: 12px; font-weight: 600; }
.approval-result svg { width: 16px; height: 16px; }
.demo-approval[data-step="4"] .approval-result { background: #e7f9ee; color: #16633a; border-color: #79cba1; }
@media (max-width: 1024px) { .feature-page .module-visual { width: 100%; max-width: 640px; margin: 0 auto; } }
@media (max-width: 480px) {
 .approval-stage { padding: 8px; }
 .approval-request { padding: 8px; margin-bottom: 8px; }
 .approval-node { gap: 6px; padding: 8px; }
 .approval-node strong { font-size: 10px; }
 .approval-node small, .approval-status { font-size: 8px; }
 .approval-check { width: 20px; height: 20px; }
 .approval-branches { gap: 8px; }
 .approval-branches .approval-node { padding: 7px; gap: 4px; }
 .approval-branches .approval-status { margin-left: 24px; }
 .approval-request strong, .approval-request b { font-size: 11px; }
 .approval-result { font-size: 10px; padding: 7px; }
 .demo-toast { font-size: 9px; padding: 6px; }
 .selection-cursor { width: 18px; height: 18px; }
 .selection-mark svg { width: 18px; height: 18px; }
 .chat-messages { padding: 5px; }
 .chat-sent { padding: 5px; }
 .chat-composer { padding-left: 7px; padding-right: 20px; }
 .chat-attachment { display: none; }
 .chat-send { width: 16px; right: 3px; }
 .chat-recipient { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) { .feature-demo * { transition: none !important; } }

.chat-attachment svg { width: 13px; height: 20px; }
@media (max-width: 480px) {
 .approval-stage * { line-height: 1.35; }
 .approval-connector { height: 8px; }
 .approval-condition { margin-bottom: 8px; }
}

.demo-round[data-step="1"] .round-click, .demo-round[data-step="2"] .round-click, .demo-round[data-step="3"] .round-click { opacity: 1; }
.demo-round .demo-toast { bottom: 64px; }

.chat-typed { display: block; max-height: 100%; overflow: hidden; }

/* Join the two supplied captures at the shared whitespace above the participant list. */
.round-top, .round-bottom { position: relative; overflow: hidden; background: white; }
.round-top { aspect-ratio: 1604 / 700; }
.round-bottom { aspect-ratio: 1604 / 1153; }
.round-top img, .round-bottom img { position: absolute; display: block; width: 100%; height: auto; max-width: none; left: 0; }
.round-top img { top: 0; }
.round-bottom img { top: -17.606245%; }
.round-publish-target { position: absolute; left: 21.07%; top: 93.69%; width: 16.83%; height: 4.05%; border-radius: 4px; pointer-events: none; }
.demo-round[data-step="3"] .round-publish-target { background: #28c57422; box-shadow: 0 0 0 4px #28c57433; transform: scale(1.04); }