/* Actual Figma promo exports + native adaptations of their chat/document components.
   Asset provenance: assets/product/figma-promos/SOURCES.md */
.promo-canvas {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182b42; background: #dbe8f7;
}
.promo-canvas img { display: block; max-width: none; object-fit: contain; }
.promo-canvas > img { position: absolute; }
.promo-canvas::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 70% 20%,#ffffff45,transparent 70%); pointer-events: none; }
.promo-canvas p { margin: 8px 0; }
.promo-bubble { padding: 14px 16px; background: #fff; border: 1px solid #bed0ea; border-radius: 20px 20px 20px 5px; box-shadow: 0 9px 24px #0d264626; font-size: clamp(11px,2.8cqw,16px); line-height: 1.45; }
.promo-bubble > small { display: block; margin-bottom: 7px; color: #698199; font-size: .68em; font-weight: 550; }
.promo-bubble time { display: block; margin-top: 8px; text-align: right; color: #7790a4; font-size: .7em; }
.promo-sent { background: #cbe0f8; border-color: #0da6f2; border-radius: 20px 20px 5px 20px; }
.promo-divider { display: flex; align-items: center; gap: 7px; margin: 12px 0; font-size: .67em; color: #8a939a; font-style: italic; white-space: nowrap; }
.promo-divider::before,.promo-divider::after { content:""; height:1px; flex:1; background:#aab7c8; }
.promo-voice { display: flex; align-items:center; gap:8px; }
.promo-voice > span { width:32px; height:32px; display:grid; place-items:center; background:white; color:#0da6f2; border-radius:50%; }
.promo-voice i { flex:1; color:#8ba9c2; font-style:normal; letter-spacing:1px; font-size:24px; white-space:nowrap; overflow:hidden; }
.promo-voice small { color:#8192a3; font-size:10px; }
.promo-reaction { display:inline-block; padding:4px 9px; margin-top:6px; border-radius:20px; background:#fff; border:1px solid #b9d4e7; font-size:11px; color:#496881; }
.promo-ai { position:relative; padding:22px 20px 16px; background:white; border:1px solid #bed0ea; border-radius:24px; box-shadow:0 15px 35px #173a6126; font-size:clamp(12px,2.6cqw,15px); line-height:1.5; }
.promo-ai > img { position:absolute; top:-16px; left:-14px; width:40px; height:40px; padding:9px; background:#0da6f2; border:2px solid #a9e1fb; border-radius:50%; box-shadow:0 6px 16px #0da6f230; }
.promo-ai > b { color:#172f47; font-weight:600; }
.promo-ai ul { padding-left:17px; margin:12px 0; }
.promo-ai li { margin:8px 0; }
.promo-citation { display:block; color:#009de7; font-size:.75em; }
.promo-forward { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:15px; border:1px solid #8fd5f6; border-radius:20px; padding:9px 12px; color:#009de7; background:#ecf9ff; font-size:.8em; font-weight:600; }
.promo-chat-label { display:flex; align-items:center; gap:10px; color:#234362; font-size:13px; font-weight:600; }
.promo-chat-label img,.promo-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.promo-chat-label small { display:block; color:#8295a6; font-size:10px; font-weight:400; margin-top:4px; }

/* Capture rail: a different scale and silhouette in every card. */
.feature-graphic.promo-canvas { padding:0; }
.promo-capture-task { background:linear-gradient(#3675ce,#1b3e72); }
.promo-task-phone { top:3%; left:50%; translate:-50% 0; width:auto; height:94%; object-fit:contain!important; }
.promo-task-pop { width:94%; left:3%; bottom:3%; filter:drop-shadow(0 10px 15px #10284530); }
.promo-capture-ai { background:linear-gradient(155deg,#d8ebfa,#8ab6e8); }
.promo-ai-phone { width:68%; right:5%; top:8%; border-radius:24px; box-shadow:0 15px 45px #1b3e7238; }
.promo-summary-pop { width:100%; left:-4%; bottom:0; }
.promo-capture-plan { background:#d1e2f4; }
.promo-plan-phone { inset:0; width:100%; height:100%; object-fit:cover!important; object-position:top; }
.promo-capture-records { background:linear-gradient(160deg,#2e64a9,#142b4d); }
.promo-record-paper { width:39%; top:7%; right:9%; box-shadow:0 16px 30px #0c1f4938; }
.promo-desktop { width:105%; left:-2%; top:27%; filter:drop-shadow(0 16px 18px #07173340); }
.promo-source-row { position:absolute; left:6%; right:6%; bottom:7%; display:flex; justify-content:center; gap:8px; }
.promo-source-row span { display:flex; align-items:center; gap:6px; padding:10px 13px; background:#fff; border:1px solid #d4e1f0; border-radius:15px; font-size:12px; box-shadow:0 5px 15px #132f5430; }
.promo-source-row img { width:22px; height:22px; }

/* Team panels retain the live selector; only the visual changes. */
.situation-example { position:relative; isolation:isolate; overflow:hidden; justify-content:flex-start; padding:26px; }
.situation-example > .situation-label { order:-2; }
.situation-visuals { width:100%; margin:5px 0 20px; }
.situation-art { display:none; width:100%; height:400px; border-radius:22px; background:transparent; }
[data-situation-tone="whatsapp"] .situation-art--whatsapp,
[data-situation-tone="jobs"] .situation-art--jobs,
[data-situation-tone="partners"] .situation-art--partners,
[data-situation-tone="records"] .situation-art--records,
[data-situation-tone="analytics"] .situation-art--analytics { display:block; }
.promo-situation-hand { width:70%; right:-2%; top:0; }
.promo-question { position:absolute; width:62%; left:4%; bottom:8%; font-size:clamp(15px,3.6cqw,19px); font-weight:550; }
.promo-situation-report { width:70%; left:12%; top:18px; border-radius:5px; box-shadow:0 20px 35px #1b3e7233; }
.promo-stamp { position:absolute; right:1%; bottom:20px; padding:14px 18px; color:#1b3e72; border:1px solid #b5d5e9; background:#fff; border-radius:14px; font-size:15px; line-height:1.5; box-shadow:0 9px 25px #1b3e7225; }
.promo-situation-translation { width:auto; height:100%; left:50%; translate:-50% 0; }
.promo-situation-record { width:55%; right:2%; top:5%; box-shadow:0 15px 35px #1b3e7233; }
.promo-situation-answer { width:100%; left:-7%; bottom:0; }
.promo-heatmap-paper { position:absolute; top:11%; left:3%; width:94%; border-radius:15px; padding:12px; background:white; box-shadow:0 15px 35px #1b3e7226; }
.promo-heatmap { width:100%; height:auto; }
.promo-measure { position:absolute; bottom:2%; left:8%; right:8%; display:flex; align-items:center; gap:20px; padding:16px 22px; background:#1b3e72; border-radius:17px; color:white; }
.promo-measure b { font-size:57px; font-weight:650; line-height:1; }
.promo-measure span { font-size:15px; line-height:1.5; }
.situation-example blockquote { margin:8px 0 15px; font-size:clamp(1.2rem,1.7vw,1.5rem); line-height:1.35; }
.situation-example .situation-ai-response { width:100%; padding:16px; border:1px solid #ffffffc9; background:#ffffffcf; border-radius:16px; }
.situation-example .situation-ai-response p { font-size:.85rem; line-height:1.55; }
.situation-example .text-link { margin-top:20px; }

/* Workflows: document, conversation, device, voice note, quote, connected desktop. */
.workflow-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:58px; }
.workflow-card { min-width:0; overflow:hidden; border:1px solid #e3e9ed; border-radius:28px; background:#f7f9fa; }
.workflow-card-copy { min-height:230px; padding:30px 30px 22px; }
.workflow-kicker { font-size:.65rem; font-weight:700; letter-spacing:.09em; color:#648095; }
.workflow-card-copy h3 { margin:14px 0 12px; max-width:450px; font-size:clamp(1.65rem,2.2vw,2.1rem); line-height:1.13; letter-spacing:-.045em; color:#1c314a; }
.workflow-card-copy p { max-width:470px; margin:0; color:#728090; font-size:.94rem; line-height:1.65; }
.workflow-art { height:470px; margin:0 16px; border-radius:22px; }
.workflow-steps { display:flex; flex-wrap:wrap; gap:12px; padding:23px 28px; }
.workflow-steps > span { display:flex; align-items:center; gap:6px; font-size:10px; color:#728090; }
.workflow-steps i { display:grid; place-items:center; width:20px; height:20px; border:1px solid #d7e2e8; border-radius:50%; font-style:normal; font-size:9px; color:#315578; }
.promo-workflow-report { background:radial-gradient(ellipse at 100% 20%,#598fcd,#1b3e72 80%); }
.promo-report-back { position:absolute; top:15%; left:25%; width:64%; height:85%; background:#eaf1f9; border-radius:5px; box-shadow:0 20px 40px #08213c55; }
.promo-report-page { top:7%; left:12%; width:68%; border-radius:5px; box-shadow:0 12px 30px #0e223754; }
.promo-report-request { position:absolute; z-index:2; right:3%; bottom:7%; display:flex; align-items:center; gap:12px; padding:16px 22px; background:white; border:1px solid #abd7f4; border-radius:20px; box-shadow:0 12px 32px #0b274d4d; font-size:16px; line-height:1.45; }
.promo-report-request img { width:28px; height:28px; }
.promo-workflow-summary { background:radial-gradient(ellipse at 80% 20%,#fff6de,transparent 65%),#e9dccc; }
.promo-hour { position:absolute; top:-3%; left:5%; font-size:clamp(80px,28cqw,160px); font-weight:650; letter-spacing:-.07em; color:#bca88d55; }
.promo-summary-thread { position:absolute; inset:8% 8% auto; }
.promo-summary-thread .promo-sent { margin:22px 0 27px 22%; }
.promo-summary-thread .promo-ai { margin-right:9%; }
.promo-summary-sparkle { position:absolute; width:70px; right:-3%; top:41%; }
.promo-workflow-service { background:#214b81; }
.promo-service-phone { width:auto; height:100%; top:0; left:50%; translate:-50% 0; object-fit:contain!important; }
.promo-service-check { width:70px; top:9%; right:5%; }
.promo-service-caption { position:absolute; left:3%; bottom:4%; max-width:42%; padding:16px; border-radius:18px; background:white; box-shadow:0 10px 35px #13315a33; }
.promo-service-caption b,.promo-service-caption span { display:block; }
.promo-service-caption b { font-size:25px; letter-spacing:-.03em; }
.promo-service-caption span { margin-top:7px; font-size:12px; color:#6e859b; }
.promo-workflow-leave { background:radial-gradient(ellipse at 15% 0%,#f5e6ff,transparent),#b3a8d7; }
.promo-people-phone { width:52%; top:9%; right:5%; filter:drop-shadow(0 16px 24px #27144735); }
.promo-leave-voice { position:absolute; left:5%; top:6%; width:61%; }
.promo-mic { position:absolute; width:62px; right:-12px; top:-15px; }
.promo-leave-voice .promo-bubble { padding:16px; }
.promo-leave-result { position:absolute; left:5%; bottom:9%; right:8%; display:flex; align-items:center; gap:13px; padding:20px; background:white; border:1px solid #bed0ea; border-radius:20px; box-shadow:0 14px 35px #29134130; }
.promo-leave-result b { font-size:20px; }
.promo-leave-result p { font-size:11px; color:#708499; }
.promo-workflow-quote { background:linear-gradient(155deg,#eee3bd,#f7efd6); }
.promo-quote-question { position:absolute; top:5%; right:5%; width:63%; z-index:2; }
.promo-quote-paper { position:absolute; top:24%; left:9%; width:76%; padding:22px; background:white; box-shadow:0 18px 45px #72583225; border-radius:4px; }
.promo-document-brand { display:flex; align-items:center; gap:8px; font-size:8px; color:#1b3e72; letter-spacing:.07em; }
.promo-document-brand img { width:20px; height:20px; }
.promo-document-brand small { margin-left:auto; font-size:7px; }
.promo-quote-paper h4 { margin:19px 0 8px; color:#162d45; font-size:28px; font-weight:600; letter-spacing:-.04em; }
.promo-quote-paper p { font-size:12px; line-height:1.5; }
.promo-quote-paper p span { color:#8c99a5; font-size:10px; }
.promo-quote-line { display:flex; justify-content:space-between; gap:10px; padding:16px 0; margin-top:18px; border-block:1px solid #dce5ed; font-size:13px; }
.promo-quote-line small { color:#7c8c9b; font-size:10px; }
.promo-total { display:flex; align-items:end; justify-content:space-between; padding:16px 0; }
.promo-total > span { font-size:10px; color:#7c8c9b; }
.promo-total strong { font-size:32px; color:#1b3e72; font-weight:600; letter-spacing:-.05em; }
.promo-total strong span { font-size:17px; color:#90a0af; }
.promo-quote-paper .promo-citation { font-size:9px; }
.promo-quote-ready { position:absolute; bottom:4%; right:3%; display:flex; align-items:center; gap:9px; padding:12px 18px; background:#e5f8ed; border:1px solid #addcc4; color:#2b725a; border-radius:30px; font-size:12px; box-shadow:0 8px 25px #425d3026; }
.promo-quote-ready > img { width:22px; height:22px; }
.promo-quote-ready .promo-quote-spark { position:absolute; width:50px; height:50px; right:-14px; top:-38px; }
.promo-workflow-connected { background:linear-gradient(150deg,#d6eafa,#9dc8d7); }
.promo-connected-request { position:absolute; z-index:2; top:5%; right:5%; width:65%; background:#e4f3d6; border-color:#91bd8b; }
.promo-connected-request img { display:inline-block; width:20px; height:20px; vertical-align:middle; margin-right:4px; }
.promo-connected-desktop { width:105%; top:22%; left:-7%; }
.promo-connected-reply { position:absolute; left:8%; right:13%; bottom:7%; }
.promo-connected-reply .promo-ai { padding:20px; }

/* An open exchange, not two generic dashboard cards. */
.external-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:42px; }
.comms-board.promo-comms { display:block; width:100%; min-height:740px; padding:0; background:linear-gradient(140deg,#d5e6f8,#a6c5e5); }
.promo-comms-heading { position:absolute; top:5%; left:6%; z-index:2; color:#1b3e72; }
.promo-comms-heading > span { font-size:10px; letter-spacing:.13em; }
.promo-comms-heading > b { display:block; margin-top:13px; font-size:31px; line-height:1.1; letter-spacing:-.04em; font-weight:650; }
.promo-comms-hand { width:63%; right:-14%; top:14%; mask-image:linear-gradient(to right,transparent,#000 22%); }
.promo-whatsapp-exchange { position:absolute; left:6%; top:23%; width:58%; }
.promo-whatsapp-exchange .promo-chat-label { margin-bottom:16px; }
.promo-whatsapp-exchange .promo-wa { background:#e3f4d2; border-color:#bdd2b0; border-radius:18px 18px 5px 18px; margin-left:10%; }
.promo-wa-reply { margin:10px 15% 0 0; }
.promo-sync-arrow { position:absolute; left:14%; top:51%; color:#0da6f2; font-size:40px; }
.promo-onsite-exchange { position:absolute; left:9%; top:59%; width:73%; }
.promo-onsite-exchange > .promo-chat-label { margin-bottom:14px; }
.promo-translated { display:flex; align-items:start; gap:10px; }
.promo-translated > div { flex:1; }
.promo-translated .promo-bubble { background:#f5faff; border-color:#75b6e0; }
.promo-comms-saved { position:absolute; bottom:3%; right:5%; display:flex; align-items:center; gap:11px; padding:13px 18px; border-radius:15px; background:#fff; box-shadow:0 10px 24px #1b3e7233; }
.promo-comms-saved img { width:26px; height:26px; }
.promo-comms-saved b,.promo-comms-saved small { display:block; }
.promo-comms-saved b { font-size:13px; color:#1b3e72; }
.promo-comms-saved small { font-size:10px; color:#7b8f9f; margin-top:5px; }
@media (max-width:1000px) {
 .external-grid { grid-template-columns:1fr; }
 .comms-board.promo-comms { max-width:700px; margin:auto; }
 .workflow-card-copy { min-height:260px; padding:25px; }
}
@media (max-width:760px) {
 .workflow-gallery { grid-template-columns:1fr; gap:22px; }
 .workflow-card-copy { min-height:0; padding:25px; }
 .workflow-art { margin:0 12px; height:440px; }
 .workflow-card-copy h3 { font-size:1.7rem; }
 .promo-summary-thread { inset:6% 7% auto; }
 .promo-summary-thread .promo-sent { margin:20px 0 24px 15%; }
 .promo-summary-thread .promo-ai { margin-right:0; padding:18px 16px 14px; }
 .promo-ai li { margin:6px 0; }
 .promo-summary-sparkle { width:53px; top:35%; right:-5%; }
 .promo-report-page { width:82%; left:5%; }
 .promo-report-request { font-size:13px; bottom:5%; padding:13px 17px; }
 .promo-people-phone { width:66%; top:18%; right:0; }
 .promo-leave-voice { width:76%; top:8%; }
 .promo-leave-result { bottom:7%; padding:15px; }
 .promo-leave-result b { font-size:17px; }
 .promo-quote-paper { top:24%; left:6%; width:84%; padding:19px; }
 .promo-quote-question { width:78%; }
 .promo-total strong { font-size:28px; }
 .promo-connected-request { width:79%; }
 .promo-connected-desktop { top:28%; width:112%; }
 .promo-connected-reply { left:7%; right:7%; bottom:7%; }
 .situation-example { padding:24px 18px; }
 .situation-art { height:350px; }
 .promo-situation-hand { width:80%; right:-10%; }
 .promo-situation-report { width:85%; left:5%; }
 .promo-situation-record { width:67%; }
 .promo-situation-answer { width:110%; bottom:4%; }
 .promo-measure { bottom:8%; gap:15px; padding:15px; }
 .promo-measure b { font-size:45px; }
 .promo-measure span { font-size:12px; }
 .comms-board.promo-comms { min-height:760px; }
 .promo-comms-heading > b { font-size:29px; }
 .promo-comms-hand { width:80%; right:-30%; top:18%; }
 .promo-whatsapp-exchange { width:79%; top:24%; }
 .promo-whatsapp-exchange .promo-chat-label { font-size:12px; }
 .promo-sync-arrow { top:52%; }
 .promo-onsite-exchange { left:6%; top:60%; width:84%; }
 .promo-comms-saved { left:6%; right:6%; bottom:3%; padding:13px; }
}