/* ============================================================
   THE APPS IN THE SETUP VIDEO (Aryza page; 28 Oct 2026, Dom: the whole
   flow, "like you recorded all these tools and screens"; 29 Oct 2026,
   Dom: "ui identical as real world ui", redrawn from the real screens).
   On the player's 1280 x 800 stage (css/demo-player.css):
     .dv-win    one browser with three tabs, Claude, Aryza Advize and
                Askpilot; the tab and the address follow the screen
     .cl        Claude, read from claude.ai: the sidebar, Settings >
                Connectors, Add custom connector, and a conversation
                with the Askpilot steps, the answer in Claude's serif
     .adv       Aryza Advize (css/demo-advize.css)
     .ap        Askpilot, read from app-dev.askpilot.com: Geist, the
                gradient sidebar, a source (Connect, Tools, Webhook
                events), Workflows, a session with its Workflow panel
     .dv-pop    the sign-in window Claude opens (signin.askpilot.com)
     .wa        the client's iPhone: the Lock Screen with a WhatsApp
                notification, then WhatsApp (iOS 26, Liquid Glass) and
                the keyboard
   With .is-split on the stage the browser steps aside for the phone,
   so the session and the chat can be compared side by side.
   Everything that appears grows in with .dv-in (a 0fr to 1fr row), so
   lists and feeds move smoothly and can be measured where they land.
   Markup: tools/demos/aryza-setup.html; script: js/demos/aryza-setup.js.
   ============================================================ */

.dv { background: linear-gradient(140deg, #ECEEF5 0%, #F3EEF6 55%, #F6F1EE 100%); font-family: var(--font-sans, 'Manrope', system-ui, sans-serif); }
.dv svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dv .is-fill, .dp symbol .is-fill { fill: currentColor; stroke: none; }
.dv p, .dv h3, .dv h4, .dv ol, .dv ul { margin: 0; }
.dv ol, .dv ul { padding: 0; }

/* what appears grows in, row by row */
.dv-in { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .32s ease, margin .45s cubic-bezier(.2, .8, .2, 1); }
.dv-in > * { min-height: 0; overflow: hidden; }
/* while hidden it keeps no room at all: no fixed height on what grows in,
   and its own padding and borders wait until it shows */
.dv-in:not(.is-on) > * { padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; }
.dv-in.is-on { grid-template-rows: 1fr; opacity: 1; }

/* ---------- the browser ---------- */
.dv-win {
    position: absolute; left: 0; top: 0; width: 1280px; height: 800px; overflow: hidden; background: #fff;
    transition: left .8s cubic-bezier(.3, .8, .2, 1), top .8s cubic-bezier(.3, .8, .2, 1), width .8s cubic-bezier(.3, .8, .2, 1), height .8s cubic-bezier(.3, .8, .2, 1), border-radius .8s ease, box-shadow .8s ease;
}
.dv.is-split .dv-win { left: 16px; top: 22px; width: 884px; height: 756px; border-radius: 12px; box-shadow: 0 30px 60px -28px rgba(20, 17, 40, .45), 0 0 0 1px rgba(20, 17, 40, .08); }
.dv-tabs { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 40px; padding: 0 10px 0 88px; background: #DFE3E8; }
.dv-lights { position: absolute; left: 16px; top: 15px; display: flex; gap: 8px; }
.dv-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.dv-lights i:nth-child(2) { background: #FEBC2E; }
.dv-lights i:nth-child(3) { background: #28C840; }
.dv-tab { position: relative; display: flex; align-items: center; gap: 8px; width: 214px; height: 33px; padding: 0 10px 0 12px; border-radius: 9px 9px 0 0; color: #3C4043; transition: background-color .15s ease; }
.dv-tab + .dv-tab::before { content: ''; position: absolute; left: -2px; top: 9px; width: 1px; height: 16px; background: #B7BDC5; }
.dv-tab.dp-cur::before, .dv-tab.dp-cur + .dv-tab::before { display: none; }
.dv-tab.dp-cur { background: #fff; }
.dv-tab.is-hover:not(.dp-cur) { background: #EDF0F3; }
.dv-tab img { flex: none; width: 15px; height: 15px; }
.dv-tab b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tab svg { flex: none; width: 13px; height: 13px; color: #5F6368; }
.dv-fav-az { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(140deg, #AFC6FF, #8F9CF2); font-size: 7.5px; font-weight: 700; color: #fff; }
.dv-tab-new { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 0 3px 6px; color: #5F6368; }
.dv-tab-new svg { width: 15px; height: 15px; }
.dv-bar { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 10px; border-bottom: 1px solid #E3E5E8; background: #fff; }
.dv-nav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #5F6368; transition: background-color .15s ease; }
.dv-nav.is-dim { color: #BEC2C7; }
.dv-nav.is-hover { background: #EEF0F2; }
.dv-nav svg { width: 17px; height: 17px; }
.dv-omni { flex: 1; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 10px 0 6px; padding: 0 14px; border-radius: 15px; background: #EEF1F4; font-size: 13px; color: #202124; white-space: nowrap; overflow: hidden; }
.dv-omni svg { flex: none; width: 13px; height: 13px; color: #5F6368; }
.dv-omni .dv-omni-star { margin-left: auto; width: 15px; height: 15px; }
.dv-me { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3B5BDB; font-size: 10px; font-weight: 700; color: #fff; }
.dv-view { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; overflow: hidden; }
.dv-app { position: absolute; inset: 0; display: none; }
.dv-app.dp-cur { display: block; }

/* ============================================================
   CLAUDE (claude.ai, 29 Oct 2026)
   ============================================================ */
.dv-app.cl { background: #fff; font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; color: rgba(0, 0, 0, .9); }
.cl svg { stroke-width: 1.6; }
.cl-ph { color: #8E8E8E; }
.is-filled > .cl-ph { display: none; }
.cl-caret { display: none; flex: none; width: 1.5px; height: 17px; margin-left: 1px; background: #222; animation: adv-blink 1s steps(1) infinite; }
.is-focus > .cl-caret { display: inline-block; }
.is-typing > .cl-caret { animation: none; }

/* the sidebar */
.cl-side { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; width: 252px; padding: 10px 8px 10px; box-sizing: border-box; border-right: 1px solid #ECEBE8; background: #F9F9F8; overflow: hidden; }
.cl-brand { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; color: #3B3B3B; }
.cl-brand svg { width: 17px; height: 17px; }
.cl-brand b { font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: #1F1E1D; }
.cl-snav2 { display: grid; gap: 1px; margin-top: 10px; }
.cl-snav2 span { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 9px; border-radius: 8px; font-size: 14px; font-weight: 450; }
.cl-snav2 svg { flex: none; width: 17px; height: 17px; color: #333; }
.cl-new-chat { background: #ECEBE8; }
.dv[data-screen="cl-chat"] .cl-new-chat { background: none; }
.cl-sh { display: flex; align-items: center; gap: 4px; margin: 20px 9px 6px; font-size: 12px; font-weight: 520; color: rgba(0, 0, 0, .58); }
.cl-sh svg { width: 9px; height: 9px; }
.cl-pin { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 9px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pin svg { flex: none; width: 16px; height: 16px; color: #555; }
.cl-recents { display: grid; }
.cl-rc { display: block; height: 32px; padding: 0 9px; border-radius: 8px; font-size: 14px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rc.is-cur { background: #ECEBE8; }
.cl-me { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 9px 2px; font-size: 14px; }
.cl-me-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E5E4DF; font-size: 11px; font-weight: 600; }
.cl-me b { font-weight: 500; }
.cl-me span:not(.cl-me-av) { color: rgba(0, 0, 0, .55); }
.cl-me svg { width: 17px; height: 17px; margin-left: auto; color: #555; }

.cl-main { position: absolute; left: 252px; right: 0; top: 0; bottom: 0; }
.cl-page { position: absolute; inset: 0; display: none; }
.cl-page.dp-cur { display: block; }
.cl-chat.dp-cur { display: flex; flex-direction: column; }
.cl-page.cl-set { z-index: 10; }

/* a new chat */
.cl-hello { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 214px; }
.cl-hello img { width: 32px; height: 32px; }
.cl-hello h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 37px; font-weight: 400; letter-spacing: -.015em; color: #1F1E1D; }
.cl-box { width: 640px; margin: 26px auto 0; padding: 14px 14px 10px 16px; box-sizing: border-box; border: 1px solid #E3E3E3; border-radius: 20px; background: #fff; box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .06); transition: border-color .15s ease, box-shadow .15s ease; }
.cl-box.is-focus { border-color: #D2D2D2; box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .12); }
.cl-in { display: flex; align-items: flex-start; min-height: 44px; font-size: 15.5px; }
.cl-box-row { display: flex; align-items: center; gap: 14px; height: 32px; color: #555; }
.cl-box-row svg { width: 18px; height: 18px; }
.cl-box-mic { margin-left: auto; }
.cl-go { display: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #C6613F; color: #fff; }
.cl-go.is-on { display: grid; }
.cl-go.is-hover { background: #B5532F; }
.cl-go svg { width: 17px; height: 17px; stroke-width: 2.1; }
.cl-under { display: flex; justify-content: space-between; width: 640px; margin: 10px auto 0 !important; padding: 0 16px; box-sizing: border-box; font-size: 14px; font-weight: 450; }
.cl-under span { display: flex; align-items: center; gap: 4px; }
.cl-under svg { width: 13px; height: 13px; }
.cl-under b { font-weight: 450; }

/* Settings, Connectors */
.cl-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.cl-modal { position: absolute; left: 50%; top: 22px; display: flex; flex-direction: column; width: 900px; height: 676px; transform: translateX(-50%); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .35); }
.cl-modal-h { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px 0 18px; border-bottom: 1px solid #EBEBEB; }
.cl-modal-h b { font-size: 15.5px; font-weight: 600; }
.cl-x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #444; transition: background-color .15s ease; }
.cl-x.is-hover { background: #F0F0F0; }
.cl-x svg { width: 17px; height: 17px; }
.cl-modal-b { flex: 1; display: flex; min-height: 0; }
.cl-snav { flex: none; display: flex; flex-direction: column; width: 196px; padding: 14px 12px; border-right: 1px solid #EBEBEB; }
.cl-snav > span { display: flex; align-items: center; gap: 11px; height: 29px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; }
.cl-snav > span svg { width: 16px; height: 16px; color: #333; }
.cl-snav .cl-snav-arr { width: 13px; height: 13px; margin-left: auto; }
.cl-snav .is-cur { background: #EFEFEF; }
.cl-snav small { margin: 12px 0 5px 8px; font-size: 12px; color: #777; }
.cl-snav .cl-ssearch { height: 28px; margin-bottom: 2px; border: 1px solid #E2E2E2; color: #8E8E8E; font-size: 13px; }
.cl-conn { position: relative; flex: 1; min-width: 0; padding: 16px 20px; }
.cl-conn-h { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cl-conn-h h4 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.cl-seg { display: flex; align-items: center; padding: 3px; border-radius: 9px; background: #F0F0F0; font-size: 13.5px; }
.cl-seg b { padding: 4px 10px; border-radius: 7px; background: #fff; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cl-seg span { padding: 4px 10px; color: #555; }
.cl-csearch { display: flex; align-items: center; gap: 8px; width: 210px; height: 30px; margin-left: auto; padding: 0 11px; border: 1px solid #E2E2E2; border-radius: 9px; font-size: 13.5px; color: #8E8E8E; }
.cl-csearch svg { width: 14px; height: 14px; }
.cl-filter { color: #555; }
.cl-filter svg { width: 17px; height: 17px; }
.cl-add { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 8px; border-radius: 8px; background: #1F1E1D; font-size: 13.5px; font-weight: 500; color: #fff; transition: background-color .15s ease; }
.cl-add.is-hover { background: #3A3936; }
.cl-add svg { width: 14px; height: 14px; }
.cl-menu { position: absolute; right: 0; top: 38px; z-index: 3; display: none; padding: 5px; border: 1px solid #E6E6E6; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25); }
.cl-menu.is-on { display: block; animation: cl-pop .16s ease; }
@keyframes cl-pop { from { opacity: 0; transform: translateY(-4px); } }
.cl-menu span { display: block; padding: 8px 12px; border-radius: 7px; font-size: 13.5px; }
.cl-menu span.is-hover { background: #F2F2F2; }
.cl-th, .cl-tr { display: grid; grid-template-columns: 1fr 156px 120px; align-items: center; }
.cl-th { padding: 0 0 8px; border-bottom: 1px solid #EBEBEB; font-size: 12.5px; color: #666; }
.cl-tr { height: 43px; border-bottom: 1px solid #F0F0F0; font-size: 14px; }
.cl-tr > span { display: flex; align-items: center; gap: 10px; }
.cl-tr img { width: 16px; height: 16px; padding: 2px; border: 1px solid #EDEDED; border-radius: 5px; box-sizing: content-box; }
.cl-tr em { margin-left: 8px; padding: 1px 6px; border: 1px solid #DCDCDC; border-radius: 5px; font-size: 10.5px; font-style: normal; color: #666; }
.cl-ok { width: 15px; height: 15px; color: #333; }
.cl-tr.cl-tr-new { height: auto; padding: 11px 0; line-height: 21px; }
.cl-tr-new .cl-ok { display: none; }
.cl-tr-new.is-done .cl-ok { display: block; }
.cl-tr-new.is-done .cl-connect { display: none; }
.cl-tr-new { transition: background-color 1s ease; }
.cl-tr-new.is-flash { background: #FBF6E9; }
.cl-connect { padding: 5px 11px; border-radius: 8px; background: #F0F0F0; font-size: 13px; transition: background-color .15s ease; }
.cl-connect.is-hover { background: #E2E2E2; }

/* Add custom connector */
.cl-dlg-wrap { position: absolute; inset: 0; z-index: 5; display: none; background: rgba(0, 0, 0, .22); }
.cl-dlg-wrap.is-on { display: block; }
.cl-dlg { position: absolute; left: 50%; top: 168px; width: 510px; padding: 16px 16px 15px; transform: translateX(-50%); border-radius: 12px; background: #fff; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .4); animation: cl-dlg .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes cl-dlg { from { opacity: 0; transform: translateX(-50%) scale(.97); } }
.cl-dlg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px !important; }
.cl-dlg-h b { font-size: 15.5px; font-weight: 600; }
.cl-dlg-h svg { width: 16px; height: 16px; color: #444; }
.cl-dlg-t { font-size: 14.5px; line-height: 1.4; color: rgba(0, 0, 0, .78); }
.cl-dlg-t u { color: #2B5DB8; text-underline-offset: 2px; }
.cl-dlg-warn { margin-top: 16px !important; }
.cl-field { display: flex; align-items: center; height: 34px; margin-top: 12px; padding: 0 11px; border: 1px solid #DADADA; border-radius: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.cl-field.is-focus { border-color: #9AA6C9; box-shadow: 0 0 0 3px rgba(80, 110, 200, .14); }
.cl-hint { margin-top: 6px !important; font-size: 12.5px; line-height: 1.35; color: rgba(0, 0, 0, .62); }
.cl-dlg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px !important; }
.cl-cancel, .cl-continue { padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.cl-cancel { background: #F0F0F0; }
.cl-continue { background: #F0F0F0; color: #A8A8A8; transition: background-color .2s ease, color .2s ease; }
.cl-continue.is-ready { background: #1F1E1D; color: #fff; }
.cl-continue.is-ready.is-hover { background: #3A3936; }

/* the conversation */
.cl-top { flex: none; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px 0 20px; color: #333; }
.cl-top b { font-size: 14px; font-weight: 500; }
.cl-top .cl-top-chev { width: 14px; height: 14px; }
.cl-share { margin-left: auto; padding: 5px 12px; border: 1px solid #E3E3E3; border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.cl-feed { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.cl-thread { flex: none; width: 690px; min-height: 100%; margin: 0 auto; padding: 18px 0 10px; box-sizing: border-box; }
.cl-thread > .dv-in.is-on { margin-bottom: 18px; }
.cl-u { display: flex; justify-content: flex-end; }
.cl-u p { max-width: 520px; padding: 10px 16px; border-radius: 14px; background: #F2F2F2; font-size: 15px; line-height: 1.45; }
.cl-sum { display: flex; align-items: center; gap: 7px; font-size: 15px; color: rgba(0, 0, 0, .6); }
.cl-sum [data-k$="-done"] { display: none; }
.cl-sum.is-done [data-k$="-live"] { display: none; }
.cl-sum.is-done [data-k$="-done"] { display: inline; }
.cl-sum:not(.is-done) [data-k$="-live"] { background: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .9) 50%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .45) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dv-shine 1.6s linear infinite; }
@keyframes dv-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.cl-sum-tri { width: 10px; height: 10px; color: rgba(0, 0, 0, .55); transform: rotate(90deg); transition: transform .3s ease; }
.cl-sum.is-done .cl-sum-tri { transform: none; }
.cl-steps { margin-top: 9px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; }
.cl-step { display: flex; align-items: center; gap: 8px; padding: 9px 13px; line-height: 19px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.cl-steps > .dv-in:first-child .cl-step { border-top: 0; }
.cl-step span { flex: none; color: rgba(0, 0, 0, .6); }
.cl-step svg { flex: none; width: 9px; height: 9px; color: rgba(0, 0, 0, .55); }
.cl-a { font-family: 'Source Serif 4', Georgia, serif; font-size: 16.5px; line-height: 1.6; color: #1F1E1D; }
.cl-a > p + ol, .cl-a ol + div { margin-top: 8px; }
.cl-a ol { padding-left: 24px; }
.cl-a li { padding-left: 4px; }
.cl-a li + li { margin-top: 4px; }
.cl-a > p:not(.is-filled), .cl-a li:not(.is-filled) { display: none; }
.cl-link { display: inline-flex; align-items: center; gap: 5px; color: #1F1E1D; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .35); text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.cl-link.is-hover { text-decoration-color: #1F1E1D; }
.cl-link svg { width: 14px; height: 14px; color: #555; }
.cl-think { padding: 4px 0; }
.cl-think img { width: 24px; height: 24px; animation: cl-think 2.4s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes cl-think { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.82); } 100% { transform: rotate(360deg) scale(1); } }
.cl-compose { flex: none; padding: 4px 0 12px; }
.cl-reply { position: relative; display: block; width: 690px; min-height: 96px; margin: 0 auto; padding: 13px 14px 50px 16px; border: 1px solid #DEDEDE; border-radius: 18px; background: #fff; font-size: 15px; line-height: 1.5; box-sizing: border-box; box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .08); transition: border-color .15s ease; }
.cl-reply.is-focus { border-color: #CFCFCF; }
.cl-reply .cl-caret { display: none; height: 17px; vertical-align: -3px; }
.cl-reply.is-focus .cl-caret { display: inline-block; }
.cl-reply-row { position: absolute; left: 14px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 14px; color: #555; }
.cl-reply-row svg { width: 18px; height: 18px; }
.cl-reply-row b { margin-left: auto; font-size: 14px; font-weight: 450; color: #333; }
.cl-compose-f { width: 690px; margin: 8px auto 0 !important; text-align: center; font-size: 12px; color: #8E8E8E; }

/* ============================================================
   ASKPILOT (app-dev.askpilot.com, 29 Oct 2026)
   ============================================================ */
.dv-app.ap.dp-cur { display: flex; background: #fff; font-family: Geist, Inter, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: #141C20; }
.ap svg { stroke-width: 1.6; }

/* the sidebar */
.apx-side {
    flex: none; display: flex; flex-direction: column; width: 248px; padding: 12px 8px 8px; box-sizing: border-box; overflow: hidden; white-space: nowrap;
    border-right: 1px solid #E6EBED;
    background: linear-gradient(176deg, rgba(246, 244, 255, .3) .6%, rgba(255, 247, 253, .3) 31%, rgba(247, 255, 255, .3) 67%, rgba(250, 255, 250, .3) 99.7%), #FAFAFA;
    transition: width .8s cubic-bezier(.3, .8, .2, 1), padding .8s cubic-bezier(.3, .8, .2, 1), opacity .45s ease, border-width .8s ease;
}
.apx-org { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 6px 0 6px; }
.apx-org-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: #1D2B53; font-size: 12px; font-weight: 700; color: #fff; }
.apx-org b { flex: 1; font-size: 14px; font-weight: 600; }
.apx-collapse { width: 16px; height: 16px; color: #54626C; }
.apx-nav { display: grid; gap: 2px; margin-top: 14px; }
.apx-nav span { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 10px; font-size: 14px; transition: background-color .2s ease; }
.apx-nav svg { flex: none; width: 15px; height: 15px; }
.apx-nav span.is-cur { background: #E6EBED; }
.apx-tabs { display: flex; gap: 8px; margin: 18px 12px 8px !important; font-size: 14px; }
.apx-tabs b { font-weight: 600; }
.apx-sess { display: grid; gap: 1px; }
.apx-s { position: relative; display: flex; align-items: flex-start; gap: 7px; padding: 6px 12px; border-radius: 10px; transition: background-color .3s ease; }
.apx-s > img, .apx-s > svg { flex: none; width: 12px; height: 12px; margin-top: 3px; color: #141C20; }
.apx-s > span { min-width: 0; flex: 1; }
.apx-s b { display: block; font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.apx-s small { display: block; font-size: 10px; font-weight: 500; color: #7C8B91; }
.apx-s.is-sel { background: #E6EBED; }
.apx-s.is-hover:not(.is-sel) { background: #EFF2F3; }
.apx-s.is-ping { background: #EEF1FD; }
.apx-await { display: none; flex: none; align-self: center; padding: 2px 7px; border-radius: 999px; background: #D9E0FC; color: #3B55D4; font-style: normal; font-size: 10.5px; font-weight: 600; }
.apx-s.is-await .apx-await { display: inline-block; }
.apx-user { display: flex; align-items: center; gap: 9px; margin: auto -8px 0; padding: 10px 14px 2px; border-top: 1px solid #E6EBED; }
.apx-uav { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #E1E6E8; background: #fff; font-size: 9.5px; font-weight: 600; color: #141C20; }
.apx-user b { flex: 1; font-size: 14px; font-weight: 600; }
.apx-user svg { width: 16px; height: 16px; color: #54626C; }

/* a page */
.apx-page { display: none; }
.apx-page.dp-cur { display: block; }
.apx-main { flex: 1; min-width: 0; padding: 30px 32px 0; box-sizing: border-box; overflow: hidden; }
.apx-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.apx-title svg { width: 20px; height: 20px; color: #54626C; stroke-width: 1.7; }
.apx-sub { margin-top: 10px !important; font-size: 14px; color: #7C8B91; }
.apx-stabs { display: flex; margin-top: 32px !important; border-bottom: 1px solid #E6EBED; }
.apx-stabs span { position: relative; padding: 0 12px 10px; font-size: 14px; transition: color .2s ease; }
.apx-stabs span.is-cur { font-weight: 600; }
.apx-stabs span.is-cur::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #4C6BEE; }
.apx-stabs span.is-hover { color: #4C6BEE; }
.apx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid #4C6BEE; border-radius: 10px; background: #4C6BEE; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.apx-btn.is-hover { background: #3D5AD6; border-color: #3D5AD6; }
.apx-btn-off { border-color: #C5CED3; background: #C5CED3; }
.apx-btn-g { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid #BFC6C9; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: #141C20; }
.apx-btn-g svg { width: 15px; height: 15px; }
.apx-sw { position: relative; flex: none; display: inline-block; width: 30px; height: 17px; border-radius: 999px; background: #CFD8DC; transition: background-color .25s ease; }
.apx-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .25s ease; }
.apx-sw.is-on { background: #141C20; }
.apx-sw.is-on::after { left: 15px; }

/* a source: Connect, then Tools */
.apx-pane-tools.is-off { display: none; }
.apx-connect { display: flex; flex-direction: column; align-items: center; margin-top: 92px; text-align: center; }
.apx-connect img { width: 40px; height: 40px; }
.apx-connect h4 { margin-top: 18px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.apx-connect p { margin-top: 6px; font-size: 15px; color: #7C8B91; }
.apx-connect .apx-btn { margin-top: 20px; }
.apx-connect.is-gone { display: none; }
.apx-tools { display: none; }
.apx-tools.is-on { display: block; animation: dv-fade .3s ease; }
@keyframes dv-fade { from { opacity: 0; } }
.apx-th { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 16px; border-bottom: 1px solid #E6EBED; }
.apx-th b { font-weight: 600; }
.apx-th span { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.apx-tr { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; }
.apx-tr b { display: block; font-weight: 600; }
.apx-tr small { display: block; margin-top: 1px; font-size: 13.5px; color: #7C8B91; }

/* a source: Webhook events */
.apx-pane-hooks { display: none; }
.apx-pane-hooks.is-on { display: block; }
.apx-hooks { display: grid; grid-template-columns: 1fr 1.32fr; gap: 16px; padding: 14px 16px; }
.apx-ev b { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.apx-ev svg { width: 13px; height: 13px; color: #54626C; }
.apx-ev small { display: block; margin-top: 2px; font-size: 12px; color: #7C8B91; }
.apx-setup { padding: 8px 10px 9px; border: 1px solid #E6EBED; border-radius: 8px; background: #F8FAFB; font-size: 13.5px; line-height: 1.32; }
.apx-setup-t { display: flex; gap: 6px; }
.apx-setup-t svg { flex: none; width: 12px; height: 12px; margin-top: 2px; color: #9AA6AC; }
.apx-setup-t b, .apx-steps b { font-weight: 600; }
.apx-url { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 10px 18px !important; padding: 6px 8px; border: 1px solid #E6EBED; border-radius: 6px; background: #fff; }
.apx-url code { flex: 1; min-width: 0; font: 13.5px/1.32 Geist, Inter, sans-serif; word-break: break-all; }
.apx-copy { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 4px; border-radius: 6px; color: #141C20; transition: background-color .15s ease; }
.apx-copy.is-hover { background: #EEF1F3; }
.apx-copy svg { width: 16px; height: 16px; }
.apx-copy .apx-copy-b { display: none; color: #16A34A; stroke-width: 2.2; }
.apx-copy.is-on .apx-copy-a { display: none; }
.apx-copy.is-on .apx-copy-b { display: block; }
.apx-steps { padding-left: 36px !important; }
.apx-steps li + li { margin-top: 1px; }
.apx-setup-last { margin: 6px 0 0 18px !important; }

/* Connect Aryza Advize, over the whole app */
.apx-dlg-wrap { position: absolute; inset: 0; z-index: 8; display: none; background: rgba(40, 46, 50, .32); }
.apx-dlg-wrap.is-on { display: block; animation: dv-fade .2s ease; }
.apx-dlg { position: absolute; left: 50%; top: 96px; width: 500px; padding: 16px 16px 0; box-sizing: border-box; transform: translateX(-50%); border: 1px solid #CFD8DC; border-radius: 10px; background: #fff; box-shadow: 0 20px 50px -20px rgba(20, 28, 32, .35); animation: dv-dlg .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes dv-dlg { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.98); } }
.apx-dlg h4 { font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.apx-dlg label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.apx-dlg h4 + label { margin-top: 18px; }
.apx-field { display: flex; align-items: center; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; font-size: 14px; white-space: nowrap; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.apx-field.is-focus { border-color: #4C6BEE; box-shadow: 0 0 0 3px rgba(76, 107, 238, .15); }
.apx-field em { margin-left: auto; font-style: normal; color: #7C8B91; }
.apx-field-key .dp-val { letter-spacing: .1em; }
.apx-ph { color: #9AA6AC; }
.is-filled > .apx-ph { display: none; }
.apx-caret { display: none; flex: none; width: 1.5px; height: 16px; margin-left: 1px; background: #141C20; animation: adv-blink 1s steps(1) infinite; }
.is-focus > .apx-caret { display: inline-block; }
.is-typing > .apx-caret { animation: none; }
.apx-hint { display: flex; align-items: center; gap: 5px; margin-top: 6px !important; font-size: 12px; color: #7C8B91; }
.apx-hint svg { width: 11px; height: 11px; color: #9AA6AC; }
.apx-dlg-f { display: flex; justify-content: flex-end; gap: 10px; margin: 20px -16px 0 !important; padding: 14px 16px 16px; border-top: 1px solid #E6EBED; }

/* Workflows */
.apx-tools-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 28px !important; padding-bottom: 20px; border-bottom: 1px solid #E6EBED; }
.apx-search { display: flex; align-items: center; gap: 8px; width: 264px; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; color: #9AA6AC; }
.apx-search svg { width: 15px; height: 15px; }
.apx-wth, .apx-wr { display: grid; grid-template-columns: 1.35fr .8fr 2.25fr 1.25fr 40px 30px; align-items: center; gap: 10px; padding: 0 16px; }
.apx-wth { height: 54px; border-bottom: 1px solid #E6EBED; font-weight: 600; }
.apx-wth span:nth-child(3), .apx-wth span:nth-child(4), .apx-wr > span:nth-child(3), .apx-wr > span:nth-child(4) { justify-content: flex-end; text-align: right; }
.apx-wr { height: 55px; transition: background-color 1.2s ease; }
.apx-wr > span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apx-wr > span > svg { flex: none; width: 16px; height: 16px; }
.apx-wr > span:nth-child(2) svg { width: 15px; height: 15px; }
.apx-wr b { font-weight: 600; }
.apx-wr img { flex: none; width: 14px; height: 14px; }
.apx-wr > span:last-child svg { width: 16px; height: 16px; }
.apx-notrig { color: #9AA6AC; }
.apx-wr-new.is-flash { background: #EEF2FE; }

/* a session: the feed, and the Workflow panel */
.apx-sessv.dp-cur { display: flex; padding: 0; }
.apx-sm { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #E6EBED; }
.apx-sh { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; border-bottom: 1px solid #E6EBED; }
.apx-sh b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apx-ar { display: inline-flex; align-items: center; gap: 4px; height: 25px; padding: 0 8px; border: 1px solid #CFD8DC; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: #54626C; }
.apx-ar svg { width: 13px; height: 13px; }
.apx-ar.is-off { display: none; }
.apx-mark-done { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #CFD8DC; border-radius: 8px; }
.apx-mark-done svg { width: 14px; height: 14px; stroke-width: 2; }
.apx-feed { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
.apx-feed-in { flex: none; width: 100%; max-width: 640px; min-height: 100%; margin: 0 auto; padding: 22px 24px 6px; box-sizing: border-box; line-height: 1.45; }
.apx-feed-in > .dv-in.is-on { margin-bottom: 18px; }
.apx-mh { display: flex; align-items: center; gap: 9px; }
.apx-mh b { font-weight: 600; }
.apx-mh time { font-size: 12px; color: #7C8B91; }
.apx-av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; box-sizing: border-box; border: 1px solid #E1E6E8; border-radius: 8px; background: #fff; }
.apx-av img { width: 14px; height: 14px; }
.apx-av-me { border-radius: 50%; font-size: 9.5px; font-weight: 600; }
.apx-link { display: inline-flex; align-items: center; gap: 2px; margin-top: 9px !important; }
.apx-link svg { width: 13px; height: 13px; color: #54626C; }
.apx-link-s { font-size: 12px; color: #7C8B91; }
.apx-worked { display: inline-flex; align-items: center; gap: 2px; margin-top: 9px !important; color: #7C8B91; }
.apx-worked svg { width: 13px; height: 13px; transition: transform .3s ease; }
.apx-w-live { display: none; }
.apx-ask.is-working .apx-w-live { display: inline; background: linear-gradient(90deg, #9AA6AC 0%, #9AA6AC 38%, #141C20 50%, #9AA6AC 62%, #9AA6AC 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dv-shine 1.5s linear infinite; }
.apx-ask.is-working .apx-w-done { display: none; }
.apx-ask.is-working .apx-worked svg { transform: rotate(90deg); }
.apx-rsteps { display: grid; padding-top: 4px; }
.apx-step { display: flex; align-items: center; gap: 6px; height: 31px; white-space: nowrap; }
.apx-step img { flex: none; width: 14px; height: 14px; }
.apx-step .apx-mark { width: 15px; height: 15px; margin-right: 6px; filter: grayscale(1) brightness(.35); }
.apx-step b { font-weight: 600; }
.apx-step svg { width: 12px; height: 12px; color: #7C8B91; }
/* the step in hand turns, as the app's mark does while it works */
.apx-rsteps .is-live .apx-mark { animation: apx-spin 1.2s linear infinite; }
@keyframes apx-spin { to { transform: rotate(360deg); } }
.apx-body { padding-top: 8px; }
.apx-body p + p { margin-top: 8px !important; }
.apx-body i { font-style: italic; }
.apx-sum-h { margin-top: 14px !important; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.apx-chips { display: flex; gap: 6px; }
.apx-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid #E6EBED; border-radius: 7px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 28, 32, .05); }
.apx-chips span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.apx-chips .is-g { background: #F1FAF5; }
.apx-chips .is-g::before { background: #10B981; }
.apx-chips .is-b { background: #EFF3FE; }
.apx-chips .is-b::before { background: #4C6BEE; }
.apx-card { margin-top: 10px; border: 1px solid #E6EBED; border-radius: 10px; box-shadow: 0 2px 6px rgba(20, 28, 32, .05); overflow: hidden; }
.apx-card-h { padding: 11px 12px; color: #54626C; }
.apx-ci { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #E6EBED; }
.apx-ci svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: #10B981; }
.apx-ci b { display: block; font-weight: 600; }
.apx-ci small { display: block; font-size: 12px; color: #54626C; }

/* Actions needing your approval */
.apx-appr-h { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px !important; }
.apx-appr-h b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.apx-appr-h span { color: #7C8B91; }
.apx-appr-b { display: none; }
.apx-appr.is-approved .apx-appr-a, .apx-appr.is-approved .apx-appr-h span { display: none; }
.apx-appr.is-approved .apx-appr-b { display: inline; }
.apx-in { border: 1px solid #E6EBED; border-radius: 12px; box-shadow: 0 2px 8px rgba(20, 28, 32, .06); overflow: hidden; }
.apx-in-h { padding: 12px; border-bottom: 1px solid #E6EBED; color: #54626C; }
.apx-in-b { padding: 12px 12px 8px; }
.apx-in-q { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.apx-in-q i { flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #4C6BEE; }
.apx-in-c { margin: 4px 0 8px !important; color: #7C8B91; }
.apx-opt { display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 10px; border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
.apx-opt em { width: 10px; font-style: normal; font-size: 13px; color: #7C8B91; }
.apx-opt svg { display: none; width: 16px; height: 16px; margin-left: auto; color: #4C6BEE; stroke-width: 2; }
.apx-opt.is-hover { background: #F5F7F8; }
.apx-opt.is-picked { background: #F5F7F8; }
.apx-opt.is-picked svg { display: block; }
.apx-opt-c { color: #7C8B91; }
.apx-opt .apx-opt-pen { display: block; width: 14px; height: 14px; margin: 0; color: #7C8B91; }
.apx-appr.is-approved .apx-opt:not(.is-picked) { color: #9AA6AC; }
.apx-appr.is-approved .apx-opt.is-picked { background: none; }
.apx-in-f { padding: 10px 12px 12px; border-top: 1px solid #E6EBED; }
.apx-submit { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #4C6BEE; font-weight: 600; color: #fff; transition: background-color .15s ease; }
.apx-submit.is-hover { background: #3D5AD6; }
.apx-submitted { display: none; align-items: center; justify-content: center; gap: 6px; height: 22px; font-weight: 600; }
.apx-submitted svg { width: 15px; height: 15px; color: #4C6BEE; }
.apx-appr.is-approved .apx-submit { display: none; }
.apx-appr.is-approved .apx-submitted { display: flex; }

/* the message box, and auto-run over it */
.apx-compose { flex: none; width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 24px 14px; box-sizing: border-box; }
.apx-arpill { display: flex; align-items: center; gap: 5px; width: max-content; height: 24px; margin: 0 auto 8px !important; padding: 0 9px; border-radius: 999px; background: #4C6BEE; font-size: 12.5px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.apx-arpill.is-on { opacity: 1; transform: none; }
.apx-arpill svg { width: 13px; height: 13px; stroke-width: 2; }
.apx-arpill .apx-ar-i { width: 12px; height: 12px; opacity: .75; }
.apx-ar-b { display: none; }
.apx-arpill.is-later .apx-ar-a { display: none; }
.apx-arpill.is-later .apx-ar-b { display: inline; }
.apx-cbox { padding: 12px 12px 10px; border: 1px solid #CFD8DC; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(20, 28, 32, .05); }
.apx-cbox p { color: #9AA6AC; }
.apx-srcs { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-top: 16px; padding: 0 8px; border: 1px solid #E1E6E8; border-radius: 8px; font-size: 12.5px; font-weight: 500; }
.apx-srcs svg { width: 13px; height: 13px; stroke-width: 1.4; }
.apx-srcs .apx-srcs-i { width: 12px; height: 12px; color: #9AA6AC; }

/* the Workflow panel */
.apx-wfpanel { flex: none; width: 248px; transition: width .8s cubic-bezier(.3, .8, .2, 1); }
.apx-wfpanel-h { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 16px; font-weight: 600; }
.apx-wfpanel-h svg { width: 18px; height: 18px; color: #54626C; }
.apx-todos { padding: 4px 16px; }
.apx-todos-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; text-align: center; font-weight: 600; color: #54626C; }
.apx-todos-empty svg { width: 24px; height: 24px; }
[data-k="t-list"].is-on + .apx-todos-empty { display: none; }
.apx-todo { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; line-height: 1.3; transition: color .4s ease; }
.apx-todo + .apx-todo::before { content: ''; position: absolute; left: 7.5px; top: -9px; height: 16px; width: 1px; background: #E1E6E8; }
.apx-todo i { position: relative; flex: none; width: 16px; height: 16px; margin-top: 0; box-sizing: border-box; border: 1.5px solid #9AA6AC; border-radius: 50%; background: #fff; transition: background-color .3s ease, border-color .3s ease; }
.apx-todo.is-prog i { background: linear-gradient(90deg, #C3CCD0 50%, #fff 50%); border-color: #9AA6AC; }
.apx-todo.is-done i { border-color: #4C6BEE; background: #4C6BEE; animation: apx-pop .4s cubic-bezier(.16, 1, .3, 1); }
.apx-todo.is-done i::after { content: ''; position: absolute; left: 4.3px; top: 1.8px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.apx-todo.is-done span { color: #9AA6AC; text-decoration: line-through; }
@keyframes apx-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: none; } }

/* side by side with the phone: the menu folds away */
.dv.is-split .apx-side { width: 0; padding-left: 0; padding-right: 0; border-right-width: 0; opacity: 0; }
.dv.is-split .apx-wfpanel { width: 232px; }

/* ============================================================
   SIGN IN TO ASKPILOT: the window Claude opens
   ============================================================ */
.dv-pop {
    position: absolute; left: 50%; top: 116px; z-index: 30; width: 500px; overflow: hidden;
    border-radius: 12px; background: #fff; box-shadow: 0 40px 90px -20px rgba(10, 10, 20, .5), 0 0 0 1px rgba(10, 10, 20, .1);
    opacity: 0; transform: translateX(-50%) translateY(14px) scale(.97); pointer-events: none;
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.dv-pop.is-on { opacity: 1; transform: translateX(-50%); }
.dv-pop-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; background: #ECEEF1; border-bottom: 1px solid #DDE0E4; }
.dv-pop-bar .dv-lights { top: 13px; left: 14px; }
.dv-pop-url { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 12px; background: #fff; font-size: 12px; color: #3C4043; }
.dv-pop-url svg { width: 11px; height: 11px; color: #5F6368; }
.dv-pop-b { padding: 30px 30px 32px; background: linear-gradient(160deg, #F6F4FF 0%, #FFF7FD 35%, #F4FCFC 70%, #FAFFF7 100%); font-family: Geist, Inter, sans-serif; color: #141C20; }
.dv-pop-card { padding: 26px 26px 24px; border: 1px solid #E6EBED; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 10px 30px -18px rgba(20, 28, 32, .3); }
.dv-pop-logos { display: flex; align-items: center; justify-content: center; gap: 7px; }
.dv-pop-logos span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; border: 1px solid #ECECF0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.dv-pop-logos span img { width: 27px; height: 27px; }
.dv-pop-logos i { width: 5px; height: 5px; border-radius: 50%; background: #CFD8DC; }
.dv-pop-card h4 { margin-top: 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.dv-pop-acc { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px !important; padding: 8px 16px 8px 9px; border: 1px solid #E6EBED; border-radius: 12px; text-align: left; }
.dv-pop-acc b { display: block; font-size: 13px; }
.dv-pop-acc small { display: block; font-size: 12px; color: #7C8B91; }
.dv-pop-t { margin-top: 16px !important; font-size: 13px; line-height: 1.5; color: #54626C; }
.dv-pop-f { display: flex; justify-content: center; gap: 10px; margin-top: 22px !important; }
.dv-pop-f span { min-width: 110px; justify-content: center; }

/* ============================================================
   THE CLIENT'S IPHONE: the Lock Screen, then WhatsApp (iOS 26)
   ============================================================ */
.wa {
    position: absolute; left: 920px; top: 24px; z-index: 10; width: 342px; height: 752px; padding: 10px; box-sizing: border-box;
    border-radius: 60px; background: linear-gradient(150deg, #3A3A40, #1B1B1F 40%, #2B2B30);
    box-shadow: 0 40px 70px -30px rgba(20, 17, 40, .6), inset 0 0 0 1.5px #55555C, inset 0 0 0 4px #121215;
    font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #111B21;
    opacity: 0; transform: translateX(380px); transition: opacity .55s ease, transform .8s cubic-bezier(.3, .8, .2, 1);
}
.dv.is-split .wa { opacity: 1; transform: none; }
.wa svg { stroke-width: 1.8; }
.wa-screen { position: relative; height: 100%; border-radius: 50px; overflow: hidden; background: #000; }
.wa-time-b { display: none; }
.wa.is-later .wa-time-a { display: none; }
.wa.is-later .wa-time-b { display: inline; }

/* the status bar, over everything */
.wa-status { position: absolute; left: 0; right: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 6px; height: 52px; padding: 4px 26px 0 38px; box-sizing: border-box; color: #fff; transition: color .4s ease; }
.wa.is-app .wa-status { color: #111; }
.wa-status b { width: 70px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.wa-island { position: absolute; left: 50%; top: 11px; width: 104px; height: 31px; margin-left: -52px; border-radius: 18px; background: #000; }
.wa-sig { display: flex; align-items: flex-end; gap: 1.5px; margin-left: auto; height: 11px; }
.wa-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.wa-sig i:nth-child(1) { height: 4px; } .wa-sig i:nth-child(2) { height: 6px; } .wa-sig i:nth-child(3) { height: 8.5px; } .wa-sig i:nth-child(4) { height: 11px; }
.wa-wifi { width: 16px; height: 12px; }
.wa-bat { position: relative; width: 24px; height: 11.5px; box-sizing: border-box; border: 1.2px solid currentColor; border-radius: 3.5px; opacity: .95; }
.wa-bat::after { content: ''; position: absolute; right: -3.5px; top: 3px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5; }
.wa-bat em { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 15px; border-radius: 1.5px; background: currentColor; }

/* the Lock Screen */
.wa-lock {
    position: absolute; inset: 0; z-index: 30; color: #fff; text-align: center;
    background: radial-gradient(90% 55% at 15% 8%, rgba(140, 197, 255, .9) 0%, transparent 60%), radial-gradient(80% 50% at 95% 35%, rgba(255, 150, 190, .75) 0%, transparent 60%), radial-gradient(90% 60% at 30% 95%, rgba(255, 184, 120, .7) 0%, transparent 60%), linear-gradient(165deg, #3E62D6 0%, #6A4BC9 45%, #C25C9C 80%, #E68A6E 100%);
    transition: opacity .4s ease, transform .45s cubic-bezier(.3, .8, .2, 1);
}
.wa.is-app .wa-lock { opacity: 0; transform: translateY(-40px); pointer-events: none; }
.wa-lock-ico { width: 15px; height: 15px; margin: 64px auto 0; opacity: .9; }
.wa-lock-date { margin-top: 10px !important; font-size: 18px; font-weight: 600; opacity: .92; }
.wa-lock-time { margin-top: -2px !important; font-family: 'SF Pro Rounded', -apple-system, 'Helvetica Neue', sans-serif; font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -.03em; text-shadow: 0 2px 16px rgba(30, 20, 90, .25); }
.wa-noti {
    position: absolute; left: 10px; right: 10px; top: 478px; display: flex; gap: 10px; padding: 12px 13px 13px 12px; box-sizing: border-box; text-align: left;
    border-radius: 24px; background: rgba(250, 250, 252, .62); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 8px 24px -10px rgba(20, 10, 60, .35); color: #111;
    opacity: 0; transform: translateY(-26px) scale(.94); transition: opacity .35s ease, transform .55s cubic-bezier(.2, 1.3, .3, 1);
}
.wa-noti.is-on { opacity: 1; transform: none; }
.wa-noti-app { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, #5BE584, #1CB955); }
.wa-noti-app img { width: 23px; height: 23px; filter: brightness(0) invert(1); }
.wa-noti-h { display: flex; align-items: baseline; gap: 6px; }
.wa-noti-h b { flex: 1; font-size: 15px; font-weight: 600; }
.wa-noti-h span { font-size: 13px; color: rgba(0, 0, 0, .5); }
.wa-noti-ago { display: none; }
.wa.is-later .wa-noti-now { display: none; }
.wa.is-later .wa-noti-ago { display: inline; }
.wa-noti-t { margin-top: 1px !important; font-size: 14.5px; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wa-noti.is-press { transform: scale(.97); transition: transform .15s ease; }
.wa-lock-foot { position: absolute; left: 40px; right: 40px; bottom: 44px; display: flex; justify-content: space-between; }
.wa-lock-foot span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wa-lock-foot svg { width: 22px; height: 22px; color: #fff; }

/* WhatsApp */
.wa-app {
    position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; overflow: hidden;
    /* WhatsApp's own chat wallpaper, the doodles at full width (Dom, 30 Oct 2026; was a drawn tile) */
    background: #F8F4EF url('/images/demos/whatsapp-chat-bg.webp') center top / 100% auto repeat-y;
    opacity: 0; transform: scale(.94); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.wa.is-app .wa-app { opacity: 1; transform: none; }
/* the glass fades at the edges, where the bars float over the chat */
/* iOS 26's scroll edge: under the status bar and the floating header the chat is
   frosted almost opaque, then fades out below the header (30 Oct 2026: it used to
   fade from the middle of the header, so older messages showed through it) */
.wa-app::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 15; height: 142px; background: linear-gradient(rgba(248, 244, 239, .99) 0%, rgba(248, 244, 239, .98) 79%, rgba(248, 244, 239, 0) 100%);   /* opaque to just under the header (112 px), then a short fade */ pointer-events: none; }   /* no backdrop blur: Chrome lets a blurred layer out past the screen's rounded corners */
.wa-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 118px 0 8px; box-sizing: border-box; overflow: hidden; }
.wa-chat-in { flex: none; padding: 0 10px; }
.wa-sys { margin: 0 16px 12px !important; padding: 7px 11px; border-radius: 12px; background: #FDF4C5; text-align: center; font-size: 12.5px; line-height: 1.35; color: #54656F; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.wa-sys svg { display: inline-block; width: 11px; height: 11px; margin: 0 3px -1px 0; stroke-width: 2; }
.wa-day { display: flex; justify-content: center; margin-bottom: 10px !important; }
.wa-day span { padding: 4px 11px; border-radius: 9px; background: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 500; color: #54656F; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.wa-chat-in > .wa-msg, .wa-chat-in > .dv-in.is-on { margin-bottom: 6px; }
.wa-msg { display: flex; }
.wa-msg p { position: relative; max-width: 80%; padding: 7px 10px 8px 11px; border-radius: 18px; font-size: 16px; line-height: 1.32; letter-spacing: -.005em; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-in p { background: #fff; }
.wa-out { justify-content: flex-end; }
.wa-out p { background: #DCF8C6; }
.wa-in.wa-tail p { border-top-left-radius: 4px; }
.wa-out.wa-tail p { border-top-right-radius: 4px; }
.wa-in.wa-tail p::before, .wa-out.wa-tail p::before { content: ''; position: absolute; top: 0; width: 9px; height: 12px; background: inherit; }
.wa-in.wa-tail p::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 45%); border-top-left-radius: 2px; }
.wa-out.wa-tail p::before { right: -7px; clip-path: polygon(0 0, 100% 0, 25% 45%, 0 100%); border-top-right-radius: 2px; }
.wa-msg time { float: right; display: flex; align-items: center; gap: 3px; margin: 8px 0 -6px 10px; font-size: 11px; color: #667781; }
.wa-msg time svg { width: 16px; height: 11px; color: #53BDEB; stroke-width: 1.6; }
/* a message landing */
.dv-in.is-on > .wa-msg p { animation: wa-land .45s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes wa-land { 0% { transform: translateY(10px) scale(.96); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* the bars: clear over the chat, glass buttons */
.wa-glass { background: rgba(255, 255, 255, .64); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(0, 0, 0, .04), 0 2px 10px -2px rgba(30, 20, 10, .14); }
.wa-head { position: absolute; left: 0; right: 0; top: 52px; z-index: 20; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px 0 10px; box-sizing: border-box; }
.wa-back { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.wa-back svg { width: 22px; height: 22px; margin-left: -2px; stroke-width: 2.4; }
.wa-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.wa-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #1D2B53; font-size: 11px; font-weight: 700; color: #fff; }
.wa-who b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wa-calls { display: flex; align-items: center; gap: 18px; height: 42px; padding: 0 14px; border-radius: 999px; }
.wa-calls svg { width: 22px; height: 22px; }
.wa-bar { position: relative; z-index: 22; flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 10px 34px; transition: margin-bottom .38s cubic-bezier(.2, .8, .2, 1); }
.wa.is-kbd .wa-bar { margin-bottom: 8px; }
.wa-plus { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; }
.wa-plus svg { width: 22px; height: 22px; stroke-width: 2; }
.wa-field { position: relative; flex: 1; min-width: 0; display: block; min-height: 42px; padding: 10px 40px 10px 15px; box-sizing: border-box; border-radius: 21px; font-size: 16px; line-height: 1.38; }
.wa-stk { position: absolute; right: 11px; bottom: 10px; width: 22px; height: 22px; color: #3B4A54; }
.wa-caret { display: none; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: #1DAB61; animation: adv-blink 1s steps(1) infinite; }
.wa-field.is-focus .wa-caret { display: inline-block; }
.wa-field.is-typing .wa-caret { animation: none; }
.wa-acts { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 6px 0 4px; }
.wa-acts svg { width: 24px; height: 24px; }
.wa-send { display: none; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #1DAB61; color: #fff; transition: transform .15s ease; }
.wa-send svg { width: 19px; height: 19px; margin-left: 2px; }
.wa-field.is-filled ~ .wa-acts { display: none; }
.wa-field.is-filled ~ .wa-send { display: grid; }
.wa-send.is-press { transform: scale(.9); }

/* the keyboard (iOS 26, light) */
.wa-kbdw { position: relative; z-index: 24; flex: none; height: 0; overflow: hidden; transition: height .38s cubic-bezier(.2, .8, .2, 1); }
.wa.is-kbd .wa-kbdw { height: 304px; }
.wa-kbd {
    position: absolute; left: 0; right: 0; bottom: 0; height: 304px; padding: 4px 4px 0; box-sizing: border-box;
    border-radius: 28px 28px 50px 50px; background: rgba(214, 217, 224, .94);   /* the bottom corners follow the screen's: a blurred layer is not clipped by the screen's own rounding (30 Oct 2026: its square corners showed outside the phone) */ -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .8);
}
.wa-kbd-sug { display: flex; height: 40px; align-items: center; }
.wa-kbd-sug span { flex: 1; text-align: center; font-size: 16px; color: #111; }
.wa-kbd-sug span + span { border-left: 1px solid rgba(60, 60, 67, .2); }
.wa-kr { display: flex; justify-content: center; gap: 6px; margin-top: 11px !important; }
.wa-kr:first-of-type { margin-top: 4px !important; }
.wa-kr2 { padding: 0 15px; }
.wa-kr i { position: relative; display: grid; place-items: center; flex: 1; max-width: 29px; height: 43px; border-radius: 9px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .28); font-style: normal; font-size: 22px; line-height: 1; color: #111; }
.wa-kr .wa-kx { flex: none; max-width: none; width: 42px; background: #ABB1BB; font-size: 15px; }
.wa-kr .wa-kx svg { width: 20px; height: 20px; stroke-width: 1.7; }
.wa-kr4 i { font-size: 15px; }
.wa-kr .wa-kspace { max-width: none; flex: 1; }
.wa-kr .wa-kret { width: 86px; }
.wa-kr i.is-down { background: #D8DCE2; }
.wa-kr i[data-c]:not([data-c="space"]).is-down::after {
    content: attr(data-c); position: absolute; left: 50%; bottom: 30px; display: grid; place-items: center; width: 46px; height: 54px; margin-left: -23px;
    border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); font-size: 32px;
}
.wa-kbd-foot { position: absolute; right: 22px; bottom: 26px; color: #4A4F57; }
.wa-kbd-foot svg { width: 22px; height: 22px; }
.wa-home { position: absolute; left: 50%; bottom: 8px; z-index: 45; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #111; transition: background-color .4s ease; }
.wa:not(.is-app) .wa-home { background: rgba(255, 255, 255, .92); }

/* on the phone the pointer is a finger: a soft grey touch, as in a screen recording */
.dp-viewport:has(.dp-cursor.is-off) .dp-ring { background: rgba(60, 60, 67, .3); border-color: rgba(60, 60, 67, .38); }

/* ============================================================
   ON A PHONE (.dp-narrow on the player, set by js/demo-player.js for a
   frame under 560px; 30 Oct 2026, Dom: "always show the key part"):
   the picture holds only part of the stage at a readable size, so the
   wide columns come in, as the apps do in a narrower window, and a whole
   line, dialog, or row with its button fits in it. The Advize forms
   follow in css/demo-advize.css.
   ============================================================ */
.dp-narrow .cl-box, .dp-narrow .cl-under { width: 400px; }
.dp-narrow .cl-thread, .dp-narrow .cl-reply, .dp-narrow .cl-compose-f { width: 400px; }
.dp-narrow .cl-modal { width: 640px; }
.dp-narrow .cl-csearch { display: none; }
.dp-narrow .cl-filter { margin-left: auto; }
.dp-narrow .cl-th, .dp-narrow .cl-tr { grid-template-columns: 1fr 96px 84px; }
.dp-narrow .cl-dlg, .dp-narrow .dv-pop, .dp-narrow .apx-dlg { width: 440px; }

@media (prefers-reduced-motion: reduce) {
    .cl-think img, .apx-rsteps .apx-mark, .cl-sum [data-k$="-live"], .apx-w-live { animation: none !important; }
}