/* =====================================================================
   Davision product UI kit
   Device frames, the live voice / text / lead panels, capability grids,
   channel strips and the trust band. Shared by the case studies and the
   home page (experience switcher + case showcase).
   Every frame is a size container, so radii, bezels and type inside it
   scale with the frame instead of the viewport.
   ===================================================================== */

/* ---------------------------------------------------------------------
   device frames
   --------------------------------------------------------------------- */
.dv { position: relative; container-type: inline-size; }
.dv img, .dv video { display: block; }
.dv-in { position: relative; }
.dv-screen { position: relative; overflow: hidden; background: #111; isolation: isolate; }
.dv-screen > img, .dv-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* desktop browser */
.dv-desk .dv-in { border-radius: 1.5cqw; overflow: hidden; background: #101015; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4cqw 9cqw rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); }
.dv-bar { display: flex; align-items: center; gap: 0.6cqw; height: max(22px, 3.1cqw); padding: 0 1.4cqw; background: #18181f; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dv-bar > i { width: max(6px, 0.85cqw); height: max(6px, 0.85cqw); border-radius: 50%; background: rgba(255,255,255,0.16); flex-shrink: 0; }
.dv-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 0.6cqw; max-width: 46%; height: max(15px, 2cqw); padding: 0 1.4cqw; border-radius: 100px; background: rgba(255,255,255,0.06); color: #a9a9b2; font: 500 max(8.5px, 1.05cqw)/1 var(--font-main); white-space: nowrap; overflow: hidden; }
.dv-url svg { width: max(8px, 0.95cqw); height: max(8px, 0.95cqw); flex-shrink: 0; opacity: 0.7; }
.dv-url b { font-weight: 500; transition: opacity 0.25s ease; overflow: hidden; text-overflow: ellipsis; }
.dv-desk .dv-screen { aspect-ratio: 16 / 10; }
.is-light .dv-desk .dv-in, .dv-desk.is-light .dv-in { border-color: rgba(0,0,0,0.1); box-shadow: 0 4cqw 9cqw rgba(0,0,0,0.18); }

/* tablet, landscape */
.dv-tab .dv-in { padding: 2.1cqw; border-radius: 4.6cqw; background: linear-gradient(160deg, #26262e, #0b0b0f); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 5cqw 10cqw rgba(0,0,0,0.5); }
.dv-tab .dv-screen { aspect-ratio: 1.43; border-radius: 2.5cqw; }

/* phone */
.dv-phone .dv-in { padding: 3.3cqw; border-radius: 15cqw; background: linear-gradient(165deg, #2a2a33, #0a0a0e 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 1.2cqw #050507, 0 8cqw 16cqw rgba(0,0,0,0.55); }
.dv-phone .dv-screen { aspect-ratio: 390 / 844; border-radius: 12cqw; }
.dv-phone .dv-in::after { content: ''; position: absolute; z-index: 6; top: 6.4cqw; left: 50%; width: 29cqw; height: 8.2cqw; border-radius: 10cqw; background: #000; transform: translateX(-50%); }

/* kiosk totem */
.dv-kiosk .dv-in { padding: 3.2cqw 3.2cqw 22cqw; border-radius: 4.5cqw 4.5cqw 2.4cqw 2.4cqw; background: linear-gradient(170deg, #30303a 0%, #121217 40%, #0a0a0d 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6cqw 14cqw rgba(0,0,0,0.55); }
.dv-kiosk .dv-screen { aspect-ratio: 9 / 16; border-radius: 1.6cqw; }
.dv-kiosk .dv-in::after { content: ''; position: absolute; left: 50%; bottom: 9.5cqw; width: 18cqw; height: 1.3cqw; border-radius: 2cqw; background: linear-gradient(90deg, rgba(106,108,255,0.2), rgba(169,171,255,0.85), rgba(106,108,255,0.2)); transform: translateX(-50%); box-shadow: 0 0 3cqw rgba(106,108,255,0.7); }
.dv-kiosk .dv-foot { width: 88%; height: 3.4cqw; margin: 0 auto; border-radius: 0 0 2cqw 2cqw; background: linear-gradient(180deg, #24242b, #0d0d11); box-shadow: 0 5cqw 6cqw rgba(0,0,0,0.6); }
.dv-kiosk .dv-foot::after { content: ''; display: block; width: 120%; height: 7cqw; margin: 2cqw 0 0 -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(106,108,255,0.22), transparent); }

/* a lit screen: soft glow behind any frame */
.dv-glow::before { content: ''; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 30%; background: radial-gradient(closest-side, rgba(106,108,255,0.32), transparent); filter: blur(30px); }

/* ---------------------------------------------------------------------
   compositions: several frames + floating UI on one fixed-ratio canvas
   --------------------------------------------------------------------- */
.dv-comp { position: relative; container-type: inline-size; }
.dv-comp > .dv, .dv-comp > .ui-float { position: absolute; }
.dv-comp::after { content: ''; display: block; padding-top: var(--ratio, 68%); }

.ui-float {
  z-index: 8; display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw 1.5cqw; border-radius: 1.6cqw;
  font: 500 clamp(9.5px, 1.25cqw, 14px)/1.35 var(--font-main); color: #fff;
  background: rgba(14,14,20,0.72); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2.4cqw 5cqw rgba(0,0,0,0.42);
}
.ui-float small { display: block; font-size: 0.8em; color: #a8a8b2; font-weight: 500; letter-spacing: 0.02em; }
.ui-float b { font-weight: 600; }
.ui-float .ic { flex-shrink: 0; width: 2.9cqw; height: 2.9cqw; min-width: 24px; min-height: 24px; border-radius: 30%; display: grid; place-items: center; background: rgba(106,108,255,0.18); color: #c3c4ff; }
.ui-float .ic svg { width: 58%; height: 58%; }
.ui-float .ic.ok { background: rgba(61,220,132,0.16); color: #67e8a3; }
.ui-float.is-light { background: rgba(255,255,255,0.86); color: #111; border-color: rgba(0,0,0,0.08); box-shadow: 0 2.4cqw 5cqw rgba(0,0,0,0.16); }
.ui-float.is-light small { color: #6b6b73; }
.ui-float.is-light .ic { background: rgba(76,79,215,0.1); color: #4c4fd7; }
.ui-float.is-light .ic.ok { background: rgba(31,170,96,0.12); color: #1f9a58; }

/* gentle float, staggered by --fd */
.ui-bob { animation: uiBob 6s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes uiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8cqw); } }

/* voice equaliser */
.eq { display: inline-flex; align-items: center; gap: 2px; height: 1em; }
.eq i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: 0.15s; } .eq i:nth-child(3) { animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.45s; } .eq i:nth-child(5) { animation-delay: 0.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 9px #3ddc84; flex-shrink: 0; animation: csPulse 2.4s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   the modes module: Voice / Text / Lead (or hand-off), one at a time
   --------------------------------------------------------------------- */
.cx-modes { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 64px; align-items: center; margin-top: 56px; }
.cx-tabs { display: flex; flex-direction: column; gap: 10px; }
.cx-tab {
  position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; width: 100%;
  padding: 22px 22px 24px; border-radius: 22px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  background: transparent; border: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.cx-tab:hover { background: rgba(255,255,255,0.03); }
.cx-tab.is-on { background: linear-gradient(150deg, rgba(40,40,60,0.55), rgba(14,14,20,0.6)); border-color: rgba(255,255,255,0.1); }
.cx-tab:focus-visible { outline: 2px solid #6a6cff; outline-offset: 3px; }
.cx-tab .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #9fa0ff; transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.cx-tab.is-on .ic { background: linear-gradient(140deg, #6a6cff, #3d40c8); color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(76,79,215,0.45); }
.cx-tab .ic svg { width: 22px; height: 22px; }
.cx-tab .txt { display: block; min-width: 0; }
.cx-tab b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: #f2f2f5; line-height: 1.2; }
.cx-tab small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8c8c94; margin-bottom: 4px; }
.cx-tab .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.16,1,0.3,1); }
.cx-tab.is-on .more { grid-template-rows: 1fr; }
.cx-tab .more > span { overflow: hidden; margin: 0; padding-top: 8px; font-size: 15px; line-height: 1.6; color: #9d9da6; opacity: 0; transition: opacity 0.4s ease; }
.cx-tab.is-on .more > span { opacity: 1; transition-delay: 0.15s; }
.cx-tab .bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.cx-tab.is-on .bar { opacity: 1; }
.cx-tab .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a6cff, #a9abff); transform: scaleX(0); transform-origin: left center; }
.cx-modes.is-auto .cx-tab.is-on .bar i { animation: cxBar var(--dur, 9s) linear forwards; }
.cx-modes.is-paused .cx-tab.is-on .bar i { animation-play-state: paused; }
@keyframes cxBar { to { transform: scaleX(1); } }

.cx-stage { position: relative; min-height: 560px; display: grid; }
.cx-pane { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.55s; }
.cx-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease 0.1s, transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s, visibility 0s; }
.cx-stage::before { content: ''; position: absolute; inset: 6% 8%; border-radius: 40%; background: radial-gradient(closest-side, rgba(106,108,255,0.22), transparent); filter: blur(40px); z-index: -1; }

/* the app panel every pane is drawn in */
.ap { position: relative; width: min(100%, 420px); border-radius: 28px; overflow: hidden; background: #0e0e13; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 50px 110px rgba(0,0,0,0.55); font-family: var(--font-main); }
.ap.is-light { background: #fbfbfd; color: #111; border-color: rgba(0,0,0,0.08); box-shadow: 0 50px 110px rgba(0,0,0,0.18); }
.ap-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ap.is-light .ap-head { border-color: rgba(0,0,0,0.06); }
.ap-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.ap-head b { display: block; font-size: 14.5px; color: #fff; }
.ap.is-light .ap-head b { color: #111; }
.ap-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9a9aa3; }
.ap-head .tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 100px; color: #c9caff; background: rgba(106,108,255,0.14); border: 1px solid rgba(106,108,255,0.3); white-space: nowrap; }
.ap.is-light .ap-head .tag { color: #4c4fd7; background: rgba(76,79,215,0.07); border-color: rgba(76,79,215,0.2); }
.ap-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.ap.is-light .ap-foot { border-color: rgba(0,0,0,0.06); }
.ap-foot span { flex: 1; height: 38px; border-radius: 100px; background: rgba(255,255,255,0.06); color: #8a8a93; font-size: 13px; display: flex; align-items: center; padding: 0 16px; }
.ap.is-light .ap-foot span { background: #f0f0f4; color: #8a8a93; }
.ap-foot i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #6a6cff, #3d40c8); color: #fff; }
.ap-foot i svg { width: 17px; height: 17px; }
.ap-note { text-align: center; font-size: 11px; color: #73737c; padding: 0 0 12px; letter-spacing: 0.02em; }

/* --- voice --- */
.vx-video { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: #1a1a22; }
.vx-video > img, .vx-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); }
.vx-video::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(8,8,12,0.92)); }
.vx-pill { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 100px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vx-pill .eq { color: #8f91ff; }
.vx-lang { position: absolute; z-index: 2; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 7px 11px; border-radius: 100px; color: #fff; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vx-caps { position: relative; z-index: 2; margin-top: -86px; padding: 0 16px 6px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; justify-content: flex-end; }
.vx-cap { font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; max-width: 92%; }
.vx-cap.me { align-self: flex-end; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-right-radius: 5px; }
.vx-cap.ag { align-self: flex-start; color: #ececf2; background: rgba(76,79,215,0.26); border: 1px solid rgba(106,108,255,0.38); border-bottom-left-radius: 5px; }
.vx-cap.ag em { font-style: normal; color: #b9baff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.vx-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px 18px; }
.vx-ctrl span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 100px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.vx-ctrl span.end { background: #e5342b; border-color: transparent; }
.vx-ctrl svg { width: 16px; height: 16px; }

/* --- text --- */
.tx-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; min-height: 360px; justify-content: flex-end; }
.tx-msg { font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 18px; max-width: 86%; }
.tx-msg.me { align-self: flex-end; color: #fff; background: #2b2c3a; border-bottom-right-radius: 6px; }
.tx-msg.ag { align-self: flex-start; color: #e8e8ee; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); border-bottom-left-radius: 6px; }
.ap.is-light .tx-msg.me { background: #15151b; }
.ap.is-light .tx-msg.ag { color: #222; background: #f0f0f5; border-color: transparent; }
.tx-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 13px 15px; border-radius: 18px; background: rgba(255,255,255,0.06); }
.ap.is-light .tx-typing { background: #f0f0f5; }
.tx-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8a8a93; animation: txDot 1.1s ease-in-out infinite; }
.tx-typing i:nth-child(2) { animation-delay: 0.15s; } .tx-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes txDot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.tx-card { align-self: flex-start; width: 86%; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.ap.is-light .tx-card { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.tx-card-img { position: relative; aspect-ratio: 16 / 8; background: radial-gradient(ellipse at 50% 85%, rgba(106,108,255,0.28), transparent 60%), linear-gradient(160deg, #20202b, #101016); display: grid; place-items: center; }
.ap.is-light .tx-card-img { background: radial-gradient(ellipse at 50% 85%, rgba(76,79,215,0.12), transparent 60%), #f3f3f6; }
.tx-card-img img { width: 82%; height: auto; }
.tx-card-img.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-card-in { padding: 12px 14px 14px; }
.tx-card-in small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8f91ff; margin-bottom: 3px; }
.ap.is-light .tx-card-in small { color: #4c4fd7; }
.tx-card-in b { display: block; font-size: 15px; color: #fff; }
.ap.is-light .tx-card-in b { color: #111; }
.tx-card-in .kv { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: #a3a3ac; }
.tx-card-in .kv span strong { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.ap.is-light .tx-card-in .kv span strong { color: #111; }
.tx-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tx-btns span { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 100px; color: #dcdcff; background: rgba(106,108,255,0.14); border: 1px solid rgba(106,108,255,0.28); }
.tx-btns span.solid { color: #fff; background: linear-gradient(140deg, #6a6cff, #3d40c8); border-color: transparent; }
.ap.is-light .tx-btns span { color: #4c4fd7; background: rgba(76,79,215,0.07); border-color: rgba(76,79,215,0.2); }
.ap.is-light .tx-btns span.solid { color: #fff; background: #15151b; border-color: transparent; }
.tx-quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tx-quick span { font-size: 12.5px; padding: 8px 12px; border-radius: 100px; color: #d4d4dc; border: 1px solid rgba(255,255,255,0.14); }
.ap.is-light .tx-quick span { color: #333; border-color: rgba(0,0,0,0.14); }

/* flight card (Talya) */
.fl-card { align-self: flex-start; width: 88%; border-radius: 18px; padding: 14px 16px; background: linear-gradient(150deg, rgba(25,99,202,0.32), rgba(14,14,20,0.6)); border: 1px solid rgba(90,150,255,0.35); color: #fff; }
.fl-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #a9c8ff; }
.fl-top .st { color: #67e8a3; display: inline-flex; align-items: center; gap: 6px; }
.fl-top .st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.fl-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 12px 0 10px; }
.fl-route b { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.04em; }
.fl-route b small { display: block; font-family: var(--font-main); font-size: 11px; font-weight: 500; letter-spacing: 0; color: #b6c6e6; }
.fl-route i { position: relative; height: 1px; background: rgba(255,255,255,0.3); }
.fl-route i svg { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%) rotate(90deg); color: #fff; background: #17325e; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.fl-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.2); }
.fl-meta span { font-size: 10.5px; color: #b6c6e6; letter-spacing: 0.06em; text-transform: uppercase; }
.fl-meta span strong { display: block; font-size: 14px; color: #fff; letter-spacing: 0; text-transform: none; margin-top: 2px; }

/* --- lead --- */
.lx-body { padding: 18px 18px 6px; display: flex; flex-direction: column; gap: 12px; }
.lx-title { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; }
.ap.is-light .lx-title { color: #111; }
.lx-title em { display: block; font-style: normal; font-size: 12.5px; font-weight: 500; color: #8f8f98; margin-top: 3px; }
.lx-steps { display: flex; gap: 6px; }
.lx-steps i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.ap.is-light .lx-steps i { background: rgba(0,0,0,0.08); }
.lx-steps i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #6a6cff, #a9abff); transform: scaleX(0); transform-origin: left; }
.lx-field { position: relative; padding: 9px 12px 10px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.4s ease, background 0.4s ease; }
.ap.is-light .lx-field { background: #fff; border-color: rgba(0,0,0,0.09); }
.lx-field small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a93; }
.lx-val { display: block; margin-top: 3px; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; }
.ap.is-light .lx-val { color: #111; }
.lx-by { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #b5b6ff; padding: 4px 8px; border-radius: 100px; background: rgba(106,108,255,0.14); }
.ap.is-light .lx-by { color: #4c4fd7; background: rgba(76,79,215,0.08); }
.lx-by svg { width: 11px; height: 11px; }
.lx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.45; color: #9d9da6; }
.ap.is-light .lx-consent { color: #66666e; }
.lx-box { flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.3); display: grid; place-items: center; color: transparent; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.ap.is-light .lx-box { border-color: rgba(0,0,0,0.25); }
.lx-box svg { width: 12px; height: 12px; }
.lx-send { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 100px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(140deg, #6a6cff, #3d40c8); box-shadow: 0 14px 30px rgba(76,79,215,0.35); }
.ap.is-light .lx-send { background: #15151b; box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.lx-send svg { width: 16px; height: 16px; }
.lx-send .tap { position: absolute; right: 22%; top: 55%; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.75); opacity: 0; }
.lx-done { margin: 4px 18px 0; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.32); }
.ap.is-light .lx-done { background: rgba(31,170,96,0.07); border-color: rgba(31,170,96,0.28); }
.lx-done .ok { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #3ddc84; color: #06240f; }
.lx-done .ok svg { width: 20px; height: 20px; }
.lx-done b { font-size: 14px; color: #fff; }
.ap.is-light .lx-done b { color: #111; }
.lx-done span { font-size: 12px; color: #a3e8c0; }
.ap.is-light .lx-done span { color: #1f8a50; }
.lx-crm { margin: 10px 18px 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.14); font-size: 12px; color: #a8a8b0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ap.is-light .lx-crm { background: #f6f6f9; border-color: rgba(0,0,0,0.12); color: #66666e; }
.lx-crm .hd { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8f91ff; }
.ap.is-light .lx-crm .hd { color: #4c4fd7; }
.lx-crm strong { display: block; color: #fff; font-size: 13px; font-weight: 600; margin-top: 1px; }
.ap.is-light .lx-crm strong { color: #111; }

/* ---------------------------------------------------------------------
   choreography: children carry --d (delay); .is-run starts the scene.
   Restarted from JS by toggling .is-run.
   --------------------------------------------------------------------- */
.cx-pane [data-in] { opacity: 0; }
.is-run [data-in] { animation: inUp 0.55s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both; }
.is-run [data-in="fade"] { animation-name: inFade; }
/* a typing indicator and the reply it turns into share one grid cell, so nothing reflows */
.tx-swap { display: grid; justify-items: start; }
.tx-swap.me { justify-items: end; }
.tx-swap > * { grid-area: 1 / 1; }
.is-run [data-in="out"] { animation: outFade 0.25s ease var(--d, 0s) both; }
.cx-pane [data-in="out"] { opacity: 1; }
@keyframes inUp { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes inFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes outFade { from { opacity: 1; } to { opacity: 0; transform: scale(0.9); } }

.is-run .lx-val { animation: lxType var(--t, 0.9s) steps(var(--n, 16)) var(--d, 0s) both; }
@keyframes lxType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.lx-field .lx-by { opacity: 0; }
.is-run .lx-field .lx-by { animation: inFade 0.4s ease calc(var(--d, 0s) + var(--t, 0.9s)) both; }
.is-run .lx-field { animation: lxFocus 1.2s ease var(--d, 0s) both; }
@keyframes lxFocus { 0% { border-color: rgba(106,108,255,0.7); } 100% { border-color: rgba(255,255,255,0.08); } }
.ap.is-light .is-run .lx-field, .is-run .ap.is-light .lx-field { animation-name: lxFocusL; }
@keyframes lxFocusL { 0% { border-color: rgba(76,79,215,0.6); } 100% { border-color: rgba(0,0,0,0.09); } }
.is-run .lx-steps i::after { animation: lxStep 0.6s ease var(--d, 0s) forwards; }
@keyframes lxStep { to { transform: scaleX(1); } }
.is-run .lx-box { animation: lxCheck 0.3s ease var(--d, 0s) forwards; }
@keyframes lxCheck { to { background: #6a6cff; border-color: #6a6cff; color: #fff; } }
.is-run .lx-send { animation: lxPress 0.5s ease var(--d, 0s) both; }
@keyframes lxPress { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.96); } }
.is-run .lx-send .tap { animation: lxTap 0.7s ease calc(var(--d, 0s) - 0.15s) both; }
@keyframes lxTap { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------------------------------------------------------------------
   capabilities, channels, journey, trust
   --------------------------------------------------------------------- */
.cx-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.cx-cap {
  position: relative; padding: 26px 24px 26px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(30,30,42,0.62), rgba(11,11,16,0.75)); border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.4s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cx-cap::before { content: ''; position: absolute; z-index: -1; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(106,108,255,0.22), transparent); opacity: 0; transition: opacity 0.5s ease; }
.cx-cap:hover { border-color: rgba(106,108,255,0.4); transform: translateY(-4px); }
.cx-cap:hover::before { opacity: 1; }
.cx-cap .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; background: rgba(106,108,255,0.12); border: 1px solid rgba(106,108,255,0.28); color: #b9baff; }
.cx-cap .ic svg { width: 22px; height: 22px; }
.cx-cap b { display: block; font-size: 16.5px; font-weight: 600; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.cx-cap span { display: block; font-size: 14px; line-height: 1.55; color: #9d9da6; }
.cx-cap .via { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cx-cap .via em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #bfc0ff; padding: 4px 9px; border-radius: 100px; background: rgba(106,108,255,0.1); }
.cs-light .cx-cap, .cs-paper .cx-cap { background: #fff; border-color: rgba(0,0,0,0.06); }
/* capability sheet (owner, 18 Oct 2026, Toya): one panel with hairlines between the cells, no chips. The number sits
   top right, the icon in a thin ring, then the title and one line; hovering draws the brand colour along the top. */
.cxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 56px; border-radius: 28px; overflow: hidden;
  background: var(--bt-line, rgba(0,0,0,0.1)); border: 1px solid var(--bt-line, rgba(0,0,0,0.1)); }
.cxs-i { position: relative; padding: 34px 30px 38px; background: var(--bt-card, #fff); }
.cxs-i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bt-acc, #4c4fd7); transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.cxs-i:hover::after { transform: scaleX(1); }
.cxs-n { position: absolute; top: 32px; right: 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--bt-faint, #888); font-variant-numeric: tabular-nums; }
.cxs-i .ic { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 44px; border-radius: 50%; border: 1px solid var(--bt-line2, rgba(0,0,0,0.2));
  color: var(--bt-acc, #4c4fd7); transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.cxs-i .ic svg { width: 20px; height: 20px; }
.cxs-i:hover .ic { background: var(--bt-acc, #4c4fd7); border-color: var(--bt-acc, #4c4fd7); color: #fff; }
.cxs-i b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--bt-ink, #111); }
.cxs-i p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--bt-mute, #555); }
@media (max-width: 1100px) { .cxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cxs { grid-template-columns: minmax(0, 1fr); border-radius: 22px; } .cxs-i { padding: 26px 22px 28px; } .cxs-i .ic { margin-bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .cxs-i::after, .cxs-i .ic { transition: none; } }
.cs-light .cx-cap:hover, .cs-paper .cx-cap:hover { border-color: rgba(76,79,215,0.32); box-shadow: 0 24px 50px rgba(0,0,0,0.07); }
.cs-light .cx-cap .ic, .cs-paper .cx-cap .ic { background: rgba(76,79,215,0.07); border-color: rgba(76,79,215,0.18); color: #4c4fd7; }
.cs-light .cx-cap b, .cs-paper .cx-cap b { color: #111; }
.cs-light .cx-cap span, .cs-paper .cx-cap span { color: #62626a; }
.cs-light .cx-cap .via em, .cs-paper .cx-cap .via em { color: #4c4fd7; background: rgba(76,79,215,0.07); }

.cx-chans { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 14px; margin-top: 48px; }
.cx-chan { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.cx-chan .hd { display: flex; align-items: center; gap: 12px; }
.cx-chan .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #6a6cff, #3d40c8); box-shadow: 0 10px 24px rgba(76,79,215,0.35); }
.cx-chan .ic svg { width: 21px; height: 21px; }
.cx-chan b { font-size: 16px; color: #fff; }
.cx-chan b small { display: block; font-size: 11.5px; font-weight: 500; color: #8c8c95; margin-top: 2px; }
.cx-chan p { margin: 0; font-size: 14px; line-height: 1.55; color: #a0a0a9; }
.cx-chan .modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cx-chan .modes em { font-style: normal; font-size: 11px; font-weight: 600; color: #cfd0ff; padding: 4px 9px; border-radius: 100px; border: 1px solid rgba(106,108,255,0.3); }
.cs-light .cx-chan, .cs-paper .cx-chan { background: #fff; border-color: rgba(0,0,0,0.07); }
.cs-light .cx-chan b, .cs-paper .cx-chan b { color: #111; }
.cs-light .cx-chan p, .cs-paper .cx-chan p { color: #5f5f67; }
.cs-light .cx-chan .modes em, .cs-paper .cx-chan .modes em { color: #4c4fd7; border-color: rgba(76,79,215,0.25); }

.cx-journey { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 18px; margin-top: 56px; }
.cx-phase { position: relative; padding: 30px 26px 28px; border-radius: 26px; background: linear-gradient(160deg, rgba(32,32,46,0.55), rgba(10,10,15,0.75)); border: 1px solid rgba(255,255,255,0.08); }
.cx-phase .n { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: #a9abff; }
.cx-phase .n::after { content: ''; width: 40px; height: 1px; background: rgba(169,171,255,0.5); }
.cx-phase h3 { font-family: var(--font-display); font-size: 25px; font-weight: 600; color: #fff; margin: 14px 0 6px; }
.cx-phase .where { font-size: 13px; color: #8f8f98; margin: 0 0 18px; }
.cx-phase ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-phase li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: #d2d2d9; }
.cx-phase li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #6a6cff; background: radial-gradient(circle, #6a6cff 35%, transparent 40%); }
.cx-phase .ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.cx-phase .ch em { font-style: normal; font-size: 11px; font-weight: 600; color: #e6e6ee; padding: 5px 10px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }

.cx-trust { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.cx-trust > div { padding: 28px 26px; border-left: 1px solid rgba(255,255,255,0.07); }
.cx-trust > div:first-child { border-left: 0; }
.cx-trust .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; color: #67e8a3; background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.25); }
.cx-trust .ic svg { width: 19px; height: 19px; }
.cx-trust b { display: block; font-size: 15.5px; color: #fff; margin-bottom: 6px; }
.cx-trust span { font-size: 13.5px; line-height: 1.55; color: #9a9aa3; }
.cs-light .cx-trust, .cs-paper .cx-trust { background: #fff; border-color: rgba(0,0,0,0.07); }
.cs-light .cx-trust > div, .cs-paper .cx-trust > div { border-color: rgba(0,0,0,0.07); }
.cs-light .cx-trust b, .cs-paper .cx-trust b { color: #111; }
.cs-light .cx-trust span, .cs-paper .cx-trust span { color: #62626a; }
.cs-light .cx-trust .ic, .cs-paper .cx-trust .ic { color: #1f9a58; background: rgba(31,170,96,0.08); border-color: rgba(31,170,96,0.22); }

.cx-illus { margin-top: 18px; font-size: 12.5px; color: #75757e; letter-spacing: 0.02em; }
.cs-light .cx-illus, .cs-paper .cx-illus { color: #8a8a90; }

/* section heads that sit centred */
.cx-head { max-width: 760px; }
.cx-head.is-center { margin: 0 auto; text-align: center; }
.cx-head.is-center .cs-lead { margin: 0 auto; }

/* ---------------------------------------------------------------------
   responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cx-caps { grid-template-columns: repeat(2, 1fr); }
  .cx-chans { grid-template-columns: repeat(2, 1fr); }
  .cx-trust { grid-template-columns: repeat(2, 1fr); }
  .cx-trust > div:nth-child(3) { border-left: 0; }
  .cx-trust > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.07); }
  .cs-light .cx-trust > div:nth-child(n+3), .cs-paper .cx-trust > div:nth-child(n+3) { border-top-color: rgba(0,0,0,0.07); }
  .cx-modes { grid-template-columns: 1fr; gap: 30px; }
  .cx-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -5vw; padding: 0 5vw; scroll-snap-type: x mandatory; }
  .cx-tabs::-webkit-scrollbar { display: none; }
  .cx-tab { flex: 1 0 auto; min-width: 190px; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 14px 16px 16px; scroll-snap-align: start; }
  .cx-tab .ic { width: 38px; height: 38px; border-radius: 12px; }
  .cx-tab .ic svg { width: 19px; height: 19px; }
  .cx-tab b { font-size: 17px; }
  .cx-tab .more { display: none; }
  .cx-tab .bar { left: 16px; right: 16px; }
  .cx-stage { min-height: 0; }
  .cx-journey { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cx-caps, .cx-chans, .cx-trust { grid-template-columns: 1fr; }
  .cx-trust > div { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.07); }
  .cx-trust > div:first-child { border-top: 0; }
  .cs-light .cx-trust > div, .cs-paper .cx-trust > div { border-top-color: rgba(0,0,0,0.07); }
  .cx-cap { padding: 22px 20px; }
  .ap { border-radius: 24px; }
  .tx-body { min-height: 300px; }
  .vx-caps { min-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-bob, .eq i, .tx-typing i, .ui-dot { animation: none !important; }
  .cx-pane [data-in], .is-run [data-in] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cx-pane [data-in="out"] { display: none; }
  .is-run .lx-val, .cx-pane .lx-val { animation: none !important; clip-path: none !important; }
  .cx-pane .lx-field .lx-by { opacity: 1; animation: none !important; }
  .cx-pane .lx-steps i::after { transform: scaleX(1); animation: none !important; }
  .cx-pane .lx-box { background: #6a6cff; border-color: #6a6cff; color: #fff; animation: none !important; }
  .cx-pane, .cx-pane.is-on { transition: none; }
}

/* videos are invisible until they really play (phones paint a play glyph over paused video) */
video.ui-vid, .vx-video video { opacity: 0; transition: opacity 0.8s ease; }
video.ui-vid.is-playing, .vx-video video.is-playing { opacity: 1; }

/* a typing indicator that appears, waits, and gives way to the reply */
.is-run [data-in="typing"] { animation: typingLife var(--t, 1.1s) ease var(--d, 0s) both; }
@keyframes typingLife { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-pane [data-in="typing"] { display: none; } }

/* ---------------------------------------------------------------------
   small UI pieces used inside compositions (sized in em, so they scale
   with the .ui-float font-size, which follows the composition width)
   --------------------------------------------------------------------- */
.ui-card { display: block; }
.mini-fl { padding: 1em 1.15em; border-radius: inherit; background: linear-gradient(150deg, rgba(25,99,202,0.42), rgba(12,14,24,0.72)); color: #fff; }
.mini-fl .mf-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #a9c8ff; }
.mini-fl .st { display: inline-flex; align-items: center; gap: 0.5em; color: #67e8a3; }
.mini-fl .st::before { content: ''; width: 0.6em; height: 0.6em; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0.6em #3ddc84; }
.mini-fl .mf-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8em; margin: 0.8em 0 0.7em; }
.mini-fl .mf-route b { font-family: var(--font-display); font-size: 1.75em; line-height: 1; letter-spacing: 0.04em; }
.mini-fl .mf-route b small { display: block; margin-top: 0.3em; font-family: var(--font-main); font-size: 0.4em; font-weight: 500; letter-spacing: 0; color: #b6c6e6; }
.mini-fl .mf-route i { position: relative; height: 1px; background: rgba(255,255,255,0.32); }
.mini-fl .mf-route i svg { position: absolute; left: 50%; top: 50%; width: 1.2em; height: 1.2em; padding: 0.2em; box-sizing: content-box; border-radius: 50%; background: #17325e; color: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.mini-fl .mf-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding-top: 0.7em; border-top: 1px dashed rgba(255,255,255,0.22); }
.mini-fl .mf-meta span { font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: #b6c6e6; }
.mini-fl .mf-meta strong { display: block; margin-top: 0.2em; font-size: 1.35em; letter-spacing: 0; text-transform: none; color: #fff; font-weight: 600; }
.mini-fl.is-wide { border-radius: 16px; border: 1px solid rgba(90,150,255,0.35); font-size: 14px; }

.vx-after { padding: 4px 16px 4px; }

/* phone screen drawn in HTML (Talya hand-off) */
.ph-ui { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 22cqw 6cqw 8cqw; background: radial-gradient(ellipse at 50% 0%, rgba(25,99,202,0.35), transparent 60%), #0b0d14; color: #fff; font-family: var(--font-main); }
.ph-head { display: flex; align-items: center; gap: 3.5cqw; }
.ph-head img { width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; position: static; }
.ph-head b { display: block; font-size: 5.2cqw; }
.ph-head small { font-size: 3.8cqw; color: #9fb0d0; }
.ph-toast { display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 4cqw; border-radius: 100px; font-size: 3.9cqw; color: #a3e8c0; background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.3); }
.ph-toast svg { width: 4.4cqw; height: 4.4cqw; }
.ph-card .mini-fl.is-wide { font-size: 4.6cqw; border-radius: 5cqw; }
.ph-msg { font-size: 4.2cqw; line-height: 1.45; padding: 3.4cqw 4cqw; border-radius: 5cqw 5cqw 5cqw 1.6cqw; background: rgba(255,255,255,0.07); color: #e3e3ea; }

/* Talya hero composition */
.ta-hero-vis { position: relative; }
.ta-comp .ui-float { white-space: nowrap; }
.ta-comp .ui-float.ui-card { white-space: normal; overflow: hidden; }
.ta-qr { width: min(100%, 520px); }
.ta-qr .ui-float { white-space: nowrap; }

/* Intelligence card (Talya) */
.ix-card { border-radius: 28px; padding: 26px; background: linear-gradient(160deg, rgba(30,30,44,0.7), rgba(10,10,15,0.85)); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 40px 100px rgba(0,0,0,0.45); }
.ix-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ix-top b { font-family: var(--font-display); font-size: 22px; color: #fff; }
.ix-top span { font-size: 12px; color: #8a8a93; }
.ix-tabs { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }
.ix-tabs span { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 100px; color: #a7a7b0; border: 1px solid rgba(255,255,255,0.1); }
.ix-tabs span.on { color: #fff; background: rgba(106,108,255,0.2); border-color: rgba(106,108,255,0.45); }
.ix-topics { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.025); border: 1px dashed rgba(255,255,255,0.1); }
.ix-topics span { font-size: 13.5px; padding: 9px 14px; border-radius: 12px; color: #e7e7ee; background: rgba(106,108,255, calc(0.24 - var(--i) * 0.022)); border: 1px solid rgba(106,108,255, calc(0.5 - var(--i) * 0.04)); }
.ix-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ix-rows > div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.03); }
.ix-rows i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #b9baff; background: rgba(106,108,255,0.12); }
.ix-rows i svg { width: 19px; height: 19px; }
.ix-rows span { font-size: 13px; color: #9a9aa3; line-height: 1.45; }
.ix-rows b { display: block; font-size: 14.5px; color: #fff; }

/* light variant of the modes tabs (Defne) */
.cx-modes.is-light .cx-tab:hover { background: rgba(0,0,0,0.03); }
.cx-modes.is-light .cx-tab.is-on { background: #fff; border-color: rgba(0,0,0,0.07); box-shadow: 0 20px 50px rgba(0,0,0,0.07); }
.cx-modes.is-light .cx-tab .ic { background: rgba(76,79,215,0.07); border-color: rgba(76,79,215,0.16); color: #4c4fd7; }
.cx-modes.is-light .cx-tab.is-on .ic { background: linear-gradient(140deg, #6a6cff, #3d40c8); color: #fff; }
.cx-modes.is-light .cx-tab b { color: #111; }
.cx-modes.is-light .cx-tab small { color: #808088; }
.cx-modes.is-light .cx-tab .more > span { color: #5d5d65; }
.cx-modes.is-light .cx-tab .bar { background: rgba(0,0,0,0.06); }
.cx-modes.is-light .cx-stage::before { background: radial-gradient(closest-side, rgba(76,79,215,0.12), transparent); }
.cx-modes.is-light .ap.vx { background: #121217; }

/* the voice panel on a light page stays dark (it is a video call) */
.ap.vx { background: #0e0e13; }

/* ---------------------------------------------------------------------
   awards (one list in the builder feeds every page)
   --------------------------------------------------------------------- */
.aw-badge { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; border-radius: 100px; background: linear-gradient(135deg, rgba(231,200,115,0.14), rgba(231,200,115,0.03)); border: 1px solid rgba(231,200,115,0.38); box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 18px 40px rgba(0,0,0,0.25); text-align: left; }
.aw-ic { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #f1d58c; background: radial-gradient(circle at 50% 35%, rgba(241,213,140,0.25), rgba(241,213,140,0.05)); }
.aw-ic svg { width: 28px; height: 28px; }
.aw-txt small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #e7c873; }
.aw-txt b { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.cs-light .aw-badge, .cs-paper .aw-badge, .aw-badge.is-light { background: linear-gradient(135deg, rgba(176,135,30,0.1), rgba(176,135,30,0.02)); border-color: rgba(176,135,30,0.35); box-shadow: none; }
.cs-light .aw-ic, .aw-badge.is-light .aw-ic { color: #9a7416; }
.cs-light .aw-txt small, .aw-badge.is-light .aw-txt small { color: #94701a; }
.cs-light .aw-txt b, .aw-badge.is-light .aw-txt b { color: #111; }
.tb-awards { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: -36px 0 64px; }

/* ---------------------------------------------------------------------
   framed still/video, car chip, Defne panels (compositions)
   --------------------------------------------------------------------- */
.dv-frame .dv-in { border-radius: 3cqw; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 5cqw 10cqw rgba(0,0,0,0.5); }
.dv-frame .dv-screen { aspect-ratio: 16 / 9; background: #e9edf3; }
.dv-frame .dv-screen > img, .dv-frame .dv-screen > video { object-position: center 30%; }

.mini-car { display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: 0.6em; padding: 0.7em 1em 0.7em 0.5em; }
.mini-car img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0.6em 0.8em rgba(0,0,0,0.5)); }
.mini-car small { display: block; font-size: 0.75em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #a9abff; }
.mini-car b { display: block; font-size: 1.05em; line-height: 1.25; }

.dfn-panel { position: absolute; z-index: 3; top: 3%; right: 2%; bottom: 3%; width: 33%; display: flex; flex-direction: column; border-radius: 1.6cqw; overflow: hidden; background: rgba(255,255,255,0.97); box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.3); font-size: max(8px, 1.3cqw); }
.dfn-panel .tc-dhead { padding: 0.9em 1em; gap: 0.7em; }
.dfn-panel .tc-dhead img { width: 2.6em; height: 2.6em; position: static; }
.dfn-panel .tc-dhead b { font-size: 1.05em; }
.dfn-panel .tc-dhead small { font-size: 0.85em; }
.dfn-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6em; padding: 0.9em; }
.dfn-panel .tc-msg { font-size: 1em; padding: 0.65em 0.85em; max-width: 92%; margin: 0; opacity: 1; transform: none; }
.dfn-panel .tc-dfoot { padding: 0.7em 0.9em; }
.dfn-panel .tc-dfoot span { height: 2.2em; font-size: 0.9em; }
.dfn-panel .tc-dfoot i { width: 2.2em; height: 2.2em; }
.ph-sheet { position: absolute; z-index: 3; left: 4cqw; right: 4cqw; bottom: 5cqw; border-radius: 6cqw; background: rgba(255,255,255,0.97); box-shadow: 0 4cqw 10cqw rgba(0,0,0,0.35); font-size: 4.6cqw; }
.ph-sheet .tc-dhead { padding: 3.4cqw 4cqw; gap: 3cqw; border: 0; }
.ph-sheet .tc-dhead img { width: 11cqw; height: 11cqw; position: static; }
.ph-sheet .tc-dhead b { font-size: 4.6cqw; }
.ph-sheet .tc-dhead small { font-size: 3.6cqw; }
.ph-sheet .tc-wave { height: 5cqw; }
.ph-sheet .tc-wave i { width: 0.8cqw; }
.tc-hero-vis { position: relative; }
.tc-comp .ui-float { white-space: nowrap; }
.toya-comp .ui-float, .toya-live .ui-float { white-space: nowrap; }
.toya-comp .ui-float.ui-card { white-space: normal; }

/* Defne's plan chip in the voice scene */
.vx-plan { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.vx-plan .pl { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; background: #efe7da; color: #3a3128; }
.vx-plan b { display: block; font-size: 14px; }
.vx-plan small { font-size: 12px; color: #a6a6ae; }
.vx-plan em { font-style: normal; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 100px; background: #fff; color: #111; }

/* Toya hero: a live caption over the film */
.tb-screen-in { container-type: inline-size; }
.tb-float--cap { left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tb-cap-q { font-size: clamp(13px, 1.7cqw, 20px); font-weight: 500; color: #fff; padding: 10px 18px; border-radius: 100px; background: rgba(10,10,14,0.55); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); white-space: nowrap; }
.tb-cap-a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #d9d9ff; }
.tb-cap-a .eq { color: #8f91ff; }
.tb-live-wrap { max-width: 1180px; margin: 56px auto 0; }

/* ---------------------------------------------------------------------
   Toya Owner's Manuals: find + ask with the page beside the answer
   --------------------------------------------------------------------- */
.mv-seg { display: inline-flex; padding: 4px; border-radius: 100px; background: rgba(255,255,255,0.06); align-self: flex-start; }
.mv-seg span { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 100px; color: #a3a3ac; }
.mv-seg span.on { background: #fff; color: #111; }
.mv-result { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(106,108,255,0.1); border: 1px solid rgba(106,108,255,0.3); }
.mv-result img { width: 74px; height: 92px; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.mv-result small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a9abff; }
.mv-result b { display: block; font-size: 16px; color: #fff; margin: 2px 0 4px; }
.mv-result em { font-style: normal; font-size: 12.5px; color: #a3a3ac; }
.mv-result + * { margin-bottom: 6px; }

.mv { width: min(100%, 680px); display: grid; grid-template-columns: 0.92fr 1.08fr; border-radius: 26px; overflow: hidden; background: #0b0b10; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 50px 110px rgba(0,0,0,0.55); }
.mv-chat { display: flex; flex-direction: column; min-width: 0; background: #0d0d12; }
.mv-head { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.mv-head img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.mv-head::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, #0d0d12); }
.mv-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 10px 14px 14px; min-height: 230px; }
.mv-msgs .tx-msg { font-size: 13px; }
.mv-view { display: flex; flex-direction: column; background: #3b3d42; min-width: 0; }
.mv-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #2c2e33; font-size: 11px; color: #d0d0d6; }
.mv-bar span { padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,0.08); }
.mv-bar b { margin-left: auto; font-weight: 500; }
.mv-pages { position: relative; flex: 1; display: grid; place-items: center; padding: 18px; min-height: 300px; }
.mv-cover, .mv-page { grid-area: 1 / 1; width: 74%; aspect-ratio: 0.72; border-radius: 3px; box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
.mv-cover { object-fit: cover; }
.mv-page { z-index: 2; display: flex; flex-direction: column; gap: 7px; padding: 16px 14px; background: #fbfbf9; color: #111; overflow: hidden; }
.mv-page small { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c4122f; }
.mv-page b { font-size: 13px; line-height: 1.25; margin-bottom: 4px; }
.mv-page > i, .mv-hl > i { display: block; width: 100%; height: 5px; border-radius: 3px; background: #e2e2e6; }
.mv-hl { display: flex; flex-direction: column; gap: 7px; margin: 3px -6px; padding: 8px 6px; border-radius: 6px; background: rgba(76,79,215,0.1); box-shadow: inset 3px 0 0 #4c4fd7; }
.mv-hl > i { background: #b8b9f0; }

/* ---------------------------------------------------------------------
   case studies hub
   --------------------------------------------------------------------- */
.hb-hero { position: relative; z-index: 2; padding: 170px 0 50px; }
.hb-h1 { font-family: var(--font-display); font-size: clamp(46px, 7vw, 108px); line-height: 0.98; font-weight: 700; letter-spacing: -0.025em; margin: 22px 0 28px; }
.hb-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.hb-jump a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 100px; text-decoration: none; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.3s ease, background 0.3s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.hb-jump a:hover { border-color: rgba(106,108,255,0.5); background: rgba(106,108,255,0.08); transform: translateY(-2px); }
.hb-jump img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hb-jump b { display: block; font-size: 15px; }
.hb-jump small { font-size: 12px; color: #9a9aa3; }
.hb-case { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 72px; align-items: center; padding: 70px 0; border-top: 1px solid rgba(255,255,255,0.07); scroll-margin-top: 90px; }
.hb-case.is-flip { grid-template-columns: 0.88fr 1.12fr; }
.hb-case.is-flip .hb-vis { order: 2; }
.hb-vis { display: block; position: relative; }
.hb-vis--defne { padding: 4%; border-radius: 34px; background: #ececec; }
.hb-client { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
.hb-client img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.hb-client span { font-size: 13px; color: #8c8c94; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.14); }
.hb-title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
.hb-title span { color: #a9abff; }
.hb-txt .ta-list { margin: 26px 0 24px; }
.hb-txt .aw-badge { margin-top: 26px; }
.hb-sectors { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 50px; }
.hb-sectors a { font-size: 15px; font-weight: 500; color: #e6e6ec; text-decoration: none; padding: 12px 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.14); transition: border-color 0.3s ease, background 0.3s ease; }
.hb-sectors a:hover { border-color: #6a6cff; background: rgba(106,108,255,0.1); }

@media (max-width: 1100px) {
  .hb-case, .hb-case.is-flip { grid-template-columns: 1fr; gap: 40px; }
  .hb-case.is-flip .hb-vis { order: 0; }
}
@media (max-width: 880px) {
  .tb-awards { margin: -30px 0 50px; }
  .tb-float--cap { bottom: 18px; }
  .tb-cap-a { display: none; }
  .mv { grid-template-columns: 1fr; }
  .mv-head { aspect-ratio: 16 / 6; }
  .mv-msgs { min-height: 0; }
  .mv-pages { min-height: 260px; }
  .mv-cover, .mv-page { width: 52%; }
  .hb-hero { padding-top: 130px; }
  .hb-sectors { padding: 0 26px 40px; }
}
@media (max-width: 640px) {
  .aw-badge { padding: 10px 18px 10px 10px; gap: 10px; }
  .aw-ic { width: 36px; height: 36px; }
  .aw-ic svg { width: 24px; height: 24px; }
  .aw-txt b { font-size: 15px; }
  .tb-cap-q { white-space: normal; max-width: 78vw; }
}

/* hero compositions get more room and larger labels */
.dv-comp .ui-float { font-size: clamp(10.5px, 1.75cqw, 15px); padding: 1.3cqw 1.8cqw; gap: 1.2cqw; }
.dv-comp .ui-float.ui-card { padding: 0; }
.tpl-data .ta-hero { grid-template-columns: 1fr 1.02fr; gap: 40px; }
.tpl-walk .tc-hero-grid { grid-template-columns: 0.92fr 1.08fr; gap: 56px; }
@media (max-width: 880px) {
  .tpl-data .ta-hero, .tpl-walk .tc-hero-grid { grid-template-columns: 1fr; }
  .dv-comp .ui-float { font-size: clamp(9.5px, 2.4cqw, 13px); }
}

/* =====================================================================
   v2 heroes: short copy, then a wide stage of live product screens
   ===================================================================== */
.dv-stage { position: relative; container-type: inline-size; }
.dv-stage::after { content: ''; display: block; padding-top: var(--ratio, 50%); }
.dv-stage > * { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 1); }
.dv-stage > .ui-float { width: var(--w, auto); white-space: nowrap; font-size: clamp(10.5px, 1.15cqw, 15px); padding: 0.9cqw 1.2cqw; gap: 0.8cqw; border-radius: 1.1cqw; }
.dv-stage > .ui-float .ic { width: 2.2cqw; height: 2.2cqw; min-width: 26px; min-height: 26px; }
@media (max-width: 700px) {
  .dv-stage::after { padding-top: var(--mratio, var(--ratio)); }
  .dv-stage > * { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: var(--mw, var(--w)); }
  .dv-stage > .m-hide { display: none; }
  .dv-stage > .ui-float { font-size: clamp(9.5px, 2.9cqw, 12px); padding: 2.2cqw 2.8cqw; gap: 2cqw; border-radius: 3cqw; }
  .dv-stage > .ui-float .ic { width: 6cqw; height: 6cqw; min-width: 22px; min-height: 22px; }
}

.hx { position: relative; z-index: 2; padding: 150px 0 40px; text-align: center; overflow: hidden; }
.hx.cs-light { background: #ececec; color: #111; }
.hx-top { max-width: 900px; margin: 0 auto; padding: 0 5vw; }
.hx-client { display: inline-flex; align-items: center; gap: 14px; margin: 22px 0 18px; }
.hx-client img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.hx.cs-light .hx-client img { filter: brightness(0); opacity: 0.85; }
.hx-client span { font-size: 13px; color: #8c8c94; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.16); }
.hx.cs-light .hx-client span { border-color: rgba(0,0,0,0.15); color: #6c6c74; }
.hx-h1 { font-family: var(--font-display); font-size: clamp(40px, 6.2vw, 96px); line-height: 0.98; font-weight: 700; letter-spacing: -0.025em; margin: 0 auto 20px; max-width: 15ch; text-wrap: balance; }
.hx.cs-light .hx-h1 { color: #0d0d0d; }
.hx.cs-light .hx-h1 .cs-accent { color: #4c4fd7; }
.hx-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #a6a6ae; max-width: 620px; margin: 0 auto 30px; }
.hx.cs-light .hx-sub { color: #55555c; }
.hx .cs-btns { justify-content: center; }
.hx .tb-awards { margin: 28px 0 0; }
.hx-chans { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; }
.hx-chans span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: #d8d8e0; padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.hx-chans span svg { width: 14px; height: 14px; color: #a9abff; }
.hx.cs-light .hx-chans span { color: #333; background: #fff; border-color: rgba(0,0,0,0.08); }
.hx.cs-light .hx-chans span svg { color: #4c4fd7; }
.hx-stage { position: relative; max-width: 1360px; margin: 64px auto 0; padding: 0 3vw; }
.hx-stage::before { content: ''; position: absolute; left: 10%; right: 10%; top: 10%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(106,108,255,0.28), transparent); filter: blur(50px); z-index: -1; }
.hx.cs-light .hx-stage::before { background: radial-gradient(closest-side, rgba(76,79,215,0.14), transparent); }
@media (max-width: 880px) {
  .hx { padding: 120px 0 20px; }
  .hx-stage { margin-top: 44px; padding: 0 16px; }
}

/* =====================================================================
   channel showcase: pick a channel, the device and caption change
   ===================================================================== */
.sh { margin-top: 48px; }
.sh-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.sh-ind { display: none; }
.sh-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px; border-radius: 100px; cursor: pointer; overflow: hidden; font: 600 14px/1 var(--font-main); color: #b9b9c2; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.sh-tab svg { width: 18px; height: 18px; }
.sh-tab:hover { color: #fff; border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
.sh-tab.is-on { color: #111; background: #fff; border-color: #fff; }
.sh-tab:focus-visible { outline: 2px solid #6a6cff; outline-offset: 3px; }
.sh-tab .bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(0,0,0,0.08); opacity: 0; }
.sh-tab.is-on .bar { opacity: 1; }
.sh-tab .bar i { display: block; height: 100%; background: #4c4fd7; transform: scaleX(0); transform-origin: left; }
.sh.is-auto .sh-tab.is-on .bar i { animation: cxBar var(--dur, 9s) linear forwards; }
.sh.is-paused .sh-tab.is-on .bar i { animation-play-state: paused; }
.sh.is-light .sh-tab { color: #55555c; background: #fff; border-color: rgba(0,0,0,0.08); }
.sh.is-light .sh-tab.is-on { color: #fff; background: #111; border-color: #111; }
.sh.is-light .sh-tab.is-on .bar { background: rgba(255,255,255,0.15); }
.sh.is-light .sh-tab.is-on .bar i { background: #a9abff; }

.sh-stage { position: relative; display: grid; margin-top: 44px; }
.sh-pane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; }
.sh-pane.is-tall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sh-dev { position: relative; display: flex; justify-content: center; }
.sh-pane.is-desk .sh-dev > .dv { width: 100%; }
.sh-pane.is-tall .sh-dev > .dv-phone { width: min(330px, 80%); }
.sh-pane.is-tall .sh-dev > .dv-kiosk { width: min(340px, 82%); }
/* the 55-inch cabinet kiosk (owner, 18 Oct 2026): screen on a full-height cabinet, a little narrower so it stays on screen */
.sh-pane.is-tall .sh-dev > .dv-kiosk.dv-cab { width: min(290px, 70%); }
.sh-pane.is-card .sh-dev > .ap { width: min(420px, 100%); }
.sh-pane.is-tall, .sh-pane.is-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sh-dev::before { content: ''; position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(106,108,255,0.25), transparent); filter: blur(40px); z-index: -1; }
.sh-k { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a9abff; }
.sh-k svg { width: 17px; height: 17px; }
.sh-cap h3 { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; font-weight: 700; margin: 16px 0 14px; color: #fff; }
.sh-cap p { font-size: 16.5px; line-height: 1.65; color: #a3a3ab; margin: 0 0 22px; }
.sh-cap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sh-cap li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: #dcdce2; }
.sh-cap li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(61,220,132,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367e8a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sh.is-light .sh-cap h3 { color: #111; }
.sh.is-light .sh-cap p { color: #5c5c64; }
.sh.is-light .sh-cap li { color: #2c2c33; }
.sh.is-light .sh-k { color: #4c4fd7; }
/* a showcase with the screens across the width and the words under them, the title on the left and the text on the
   right (owner, 18 Oct 2026, Toya: "separate left and right, the screens wider, the part under them was empty") */
.sh--stack .sh-pane, .sh--stack .sh-pane.is-tall, .sh--stack .sh-pane.is-card { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 52px); }
.sh--stack .sh-dev { width: 100%; max-width: 1120px; margin: 0 auto; }
.sh--stack .sh-pane.is-tall .sh-dev > .dv-phone { width: min(330px, 72%); }
.sh--stack .sh-cap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: clamp(32px, 6vw, 96px); align-items: start;
  width: 100%; max-width: 1120px; margin: 0 auto; padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--bt-line, rgba(255,255,255,0.12)); }
.sh--stack .sh-cap .sh-k, .sh--stack .sh-cap h3 { grid-column: 1; }
.sh--stack .sh-cap h3 { margin-bottom: 0; }
.sh--stack .sh-cap p { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 20px; }
.sh--stack .sh-cap ul { grid-column: 2; }
@media (max-width: 760px) {
  .sh--stack .sh-cap { grid-template-columns: minmax(0, 1fr); }
  .sh--stack .sh-cap h3 { margin-bottom: 14px; }
  .sh--stack .sh-cap p, .sh--stack .sh-cap ul { grid-column: 1; grid-row: auto; }
}
@media (max-width: 1000px) {
  .sh-pane, .sh-pane.is-tall, .sh-pane.is-card { grid-template-columns: 1fr; gap: 30px; }
  .sh-cap { max-width: 560px; }
}
@media (max-width: 700px) {
  .sh-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
  .sh-tabs::-webkit-scrollbar { display: none; }
  .sh-tab { flex: 0 0 auto; height: 42px; padding: 0 16px; font-size: 13px; scroll-snap-align: start; }
  .sh-stage { margin-top: 28px; }
  .sh-pane.is-tall .sh-dev > .dv-phone { width: 66%; }
  .sh-pane.is-tall .sh-dev > .dv-kiosk { width: 62%; }
  .sh-pane.is-tall .sh-dev > .dv-kiosk.dv-cab { width: 54%; }
}

/* =====================================================================
   Home · Leo: one agent, three ways to meet customers
   The agent box morphs between layouts (full screen, a column beside the
   page, a corner widget); each layout has its own scripted scene.
   ===================================================================== */
.xp { max-width: 1200px; margin: 0 auto; }
.xp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.xp-mode { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; text-align: left; cursor: pointer; overflow: hidden; font: inherit; color: #111; background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.07); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.xp-mode:hover { background: #fff; transform: translateY(-2px); }
.xp-mode.is-on { background: #0d0d12; color: #fff; border-color: #0d0d12; box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
.xp-mode:focus-visible { outline: 2px solid #6a6cff; outline-offset: 3px; }
.xp-mode .ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; color: #4c4fd7; background: rgba(76,79,215,0.08); transition: background 0.35s ease, color 0.35s ease; }
.xp-mode.is-on .ic { color: #fff; background: linear-gradient(140deg, #6a6cff, #3d40c8); }
.xp-mode .ic svg { width: 20px; height: 20px; }
.xp-mode b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.xp-mode small { display: block; font-size: 13px; color: #6b6b73; margin-top: 2px; }
.xp-mode.is-on small { color: #a9a9b3; }
.xp-mode .bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: rgba(255,255,255,0.1); opacity: 0; }
.xp-mode.is-on .bar { opacity: 1; }
.xp-mode .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a6cff, #a9abff); transform: scaleX(0); transform-origin: left; }
.xp.is-auto .xp-mode.is-on .bar i { animation: cxBar var(--dur, 10s) linear forwards; }

.xp-frame { border-radius: 22px; overflow: hidden; background: #0b0b10; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 50px 120px rgba(0,0,0,0.25); }
.xp-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: #17171e; container-type: inline-size; }
.xp-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.xp-bar .dv-url { max-width: 300px; height: 24px; font-size: 12px; padding: 0 14px; gap: 7px; }
.xp-bar .dv-url svg { width: 11px; height: 11px; }
.xp-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; --u: 0.0833cqw; background: #050508; }
.xp-view img { display: block; }

/* the page behind the widget (home) */
.xp-home { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.xp-home img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.xp[data-mode="widget"] .xp-home { opacity: 1; }

/* the agent box */
.xp-agent { position: absolute; z-index: 3; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; background: #0b0b10 url('assets/agent/poster.webp') center 30% / cover no-repeat;
  transition: top 0.85s cubic-bezier(0.65,0,0.35,1), left 0.85s cubic-bezier(0.65,0,0.35,1), right 0.85s cubic-bezier(0.65,0,0.35,1), bottom 0.85s cubic-bezier(0.65,0,0.35,1), border-radius 0.85s ease, box-shadow 0.6s ease; }
.xp-vid { position: relative; flex: 1 1 100%; min-height: 0; overflow: hidden; transition: flex-basis 0.85s cubic-bezier(0.65,0,0.35,1); }
.xp-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.xp-pill { position: absolute; z-index: 2; top: calc(18 * var(--u)); left: calc(18 * var(--u)); display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #fff; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.xp-pill .eq { color: #8f91ff; }
.xp-side { position: relative; flex: 0 0 0%; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #0e0e13, #08080b); transition: flex-basis 0.85s cubic-bezier(0.65,0,0.35,1); }

.xp[data-mode="split"] .xp-agent { top: 2.4%; left: 1.4%; right: 64%; bottom: 2.4%; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.xp[data-mode="split"] .xp-vid { flex-basis: 50%; }
.xp[data-mode="split"] .xp-side { flex-basis: 50%; }
.xp[data-mode="widget"] .xp-agent { top: 24%; left: 71.5%; right: 2%; bottom: 4%; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); }
.xp[data-mode="widget"] .xp-vid { flex-basis: 40%; }
.xp[data-mode="widget"] .xp-side { flex-basis: 60%; }

/* scenes: shown for their own mode only */
.xp-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.xp[data-mode="full"] .xp-layer[data-for="full"], .xp[data-mode="split"] .xp-layer[data-for="split"], .xp[data-mode="widget"] .xp-layer[data-for="widget"] { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.45s, visibility 0s; }
.xp-l-full { z-index: 4; pointer-events: none; }
.xp-l-split { z-index: 2; }
.xp-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.xp .sc-me, .xp .sc-ag { font-size: clamp(11px, calc(14 * var(--u)), 15px); }
.xp .sc-me { padding: 0.7em 1em; border-radius: 1.2em 1.2em 0.35em 1.2em; background: #34343d; color: #fff; align-self: flex-end; max-width: 86%; line-height: 1.45; }
.xp .sc-ag { color: #ececf1; align-self: flex-start; line-height: 1.5; max-width: 96%; }
.xp .tx-swap { display: grid; justify-items: start; }
.xp .tx-swap > * { grid-area: 1 / 1; }
.xp .tx-typing { padding: 0.7em 0.9em; border-radius: 1em; background: rgba(255,255,255,0.08); }

/* full screen: captions and the cards Leo brings */
.xp-caps { position: absolute; left: 4%; bottom: 6%; width: 44%; display: flex; flex-direction: column; gap: 10px; }
.xp-cap { font-size: clamp(12px, calc(17 * var(--u)), 17px); line-height: 1.5; padding: 0.75em 1em; border-radius: 1em; color: #fff; }
.xp-cap.me { align-self: flex-start; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.xp-cap.ag { background: rgba(76,79,215,0.3); border: 1px solid rgba(106,108,255,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.xp-cap em { display: block; font-style: normal; font-size: 0.7em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c3c4ff; margin-bottom: 2px; }
.xp-cards { position: absolute; right: 3%; top: 8%; bottom: 8%; width: 31%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.xp-card { border-radius: 18px; overflow: hidden; background: rgba(14,14,20,0.82); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); color: #fff; font-size: clamp(11px, calc(14 * var(--u)), 14px); }
.xp-card-img { position: relative; aspect-ratio: 16 / 8; }
.xp-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.xp-card-img span { position: absolute; left: 10px; top: 10px; font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; background: rgba(0,0,0,0.45); }
.xp-card-in { padding: 0.9em 1.1em 1.1em; }
.xp-card-in b { display: block; font-size: 1.15em; margin-bottom: 0.5em; }
.xp-card-in ul { list-style: none; margin: 0 0 0.9em; padding: 0; display: flex; flex-direction: column; gap: 0.35em; color: #c9c9d1; }
.xp-card-in li::before { content: '✓'; color: #67e8a3; margin-right: 0.5em; font-weight: 700; }
.xp-card-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-card-btns span { font-size: 0.86em; font-weight: 600; padding: 0.55em 0.9em; border-radius: 100px; border: 1px solid rgba(255,255,255,0.22); }
.xp-card-btns span.solid { background: #fff; color: #111; border-color: #fff; }
.xp-mini { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; color: #fff; background: rgba(14,14,20,0.82); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: clamp(11px, calc(14 * var(--u)), 14px); }
.xp-mini svg { width: 2.4em; height: 2.4em; padding: 0.5em; border-radius: 0.7em; color: #fff; background: linear-gradient(140deg, #6a6cff, #3d40c8); box-sizing: border-box; }
.xp-mini b { display: block; }
.xp-mini small { color: #a9a9b3; }
.xp[data-mode="full"] .xp-vid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent 35%, transparent 60%, rgba(0,0,0,0.45)), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55)); }

/* split: the page Leo drives */
.xp-pg { position: absolute; left: 37.4%; top: 2.4%; right: 1.4%; bottom: 2.4%; border-radius: 14px; overflow: hidden; background: #050508; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
/* the live Retail page, laid out at desktop width and scaled into the panel by site-extras.js */
.xp-pgf { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.5s ease; }
.xp-pg.is-ready .xp-pgf { opacity: 1; }
.xp-pgf iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 100%; border: 0; transform-origin: 0 0; pointer-events: none; background: #050508; }
.xp-toast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(14,14,20,0.88); white-space: nowrap; }
.xp-toast::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6a6cff; box-shadow: 0 0 8px #6a6cff; }
.xp-ring { position: absolute; border: 2px solid #8f91ff; border-radius: 14px; box-shadow: 0 0 0 6px rgba(106,108,255,0.18), 0 0 30px rgba(106,108,255,0.5); }
.xp-cal { position: absolute; right: 5%; bottom: 7%; width: 46%; padding: 14px; border-radius: 16px; background: #fff; color: #111; box-shadow: 0 24px 60px rgba(0,0,0,0.45); font-size: clamp(11px, calc(14 * var(--u)), 14px); }
.xp-cal-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.xp-cal-h b { font-size: 1.05em; }
.xp-cal-h span { font-size: 0.85em; color: #6b6b73; }
.xp-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.xp-slots span { text-align: center; font-size: 0.9em; font-weight: 600; padding: 0.55em 0; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); }
.xp-slots span.pick { background: #4c4fd7; border-color: #4c4fd7; color: #fff; }
.xp .xp-slots span.pick[data-in] { opacity: 1; }
.xp.is-run .xp-slots span.pick, .xp-view.is-run .xp-slots span.pick { animation: xpPick 0.4s ease var(--d, 0s) both; }
@keyframes xpPick { from { background: transparent; border-color: rgba(0,0,0,0.12); color: #111; } to { background: #4c4fd7; border-color: #4c4fd7; color: #fff; } }
.xp-booked { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.9em; font-weight: 600; color: #1f8a50; }
.xp-booked svg { width: 1.2em; height: 1.2em; }

/* widget: the conversation under Leo's face */
.xp-l-widget, .xp-l-schat { position: absolute; inset: 0; }
.xp-quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.xp-quick span { font-size: clamp(10px, calc(12.5 * var(--u)), 13px); padding: 0.5em 0.9em; border-radius: 100px; border: 1px solid rgba(255,255,255,0.18); color: #ddd; }
.xp-lead { position: relative; padding: 0.7em 0.9em; border-radius: 12px; background: #fff; color: #111; font-size: clamp(11px, calc(14 * var(--u)), 14px); }
.xp-lead small { display: block; font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a93; }
.xp-lead .lx-val { color: #111; font-size: 1em; }
.xp-send { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-size: 0.85em; font-weight: 600; color: #1f8a50; }
.xp-send svg { width: 1.1em; height: 1.1em; }

/* live: the real agent takes the whole frame */
.xp-view > iframe { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.6s ease; background: #000; }
.xp.is-live .xp-view > iframe { opacity: 1; }
.xp.is-live .xp-layer, .xp.is-live .xp-pill { opacity: 0 !important; }

.xp-foot { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }

@media (max-width: 880px) {
  .xp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .xp-mode { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 16px; }
  .xp-mode .ic { width: 34px; height: 34px; border-radius: 10px; }
  .xp-mode b { font-size: 14px; }
  .xp-mode small { display: none; }
  .xp-frame { border-radius: 18px; }
  .xp-view { aspect-ratio: 9 / 15; --u: 0.24cqw; }
  .xp[data-mode="split"] .xp-agent { top: 2%; left: 2%; right: 2%; bottom: 57%; }
  .xp[data-mode="split"] .xp-vid { flex-basis: 55%; }
  .xp[data-mode="split"] .xp-side { flex-basis: 45%; }
  .xp-pg { left: 2%; right: 2%; top: 44.5%; bottom: 2%; }
  .xp[data-mode="widget"] .xp-agent { top: 38%; left: 3%; right: 3%; bottom: 2.5%; }
  .xp[data-mode="widget"] .xp-vid { flex-basis: 34%; }
  .xp[data-mode="widget"] .xp-side { flex-basis: 66%; }
  .xp-home img { object-position: 30% top; }
  .xp-caps { left: 4%; right: 4%; width: auto; bottom: 4%; }
  .xp-cards { left: 6%; right: 6%; width: auto; top: 5%; bottom: auto; }
  .xp-card { font-size: 12px; }
  .xp-card-img { aspect-ratio: 16 / 6; }
  .xp-card-in ul { display: none; }
  .xp-mini { display: none; }
  .xp-cal { width: 70%; right: 4%; bottom: 5%; }
  .xp-foot { flex-direction: column; gap: 14px; }
}

/* =====================================================================
   Home · case showcase
   ===================================================================== */
.hc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.hc-head h2 { margin: 14px 0 12px; }
.hc-head p { color: var(--text-muted, #9a9aa3); max-width: 520px; font-size: 17px; line-height: 1.65; margin: 0; }
.hc-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.hc-awards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.hc-all, .hc-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-decoration: none; }
.hc-all svg, .hc-link svg { width: 16px; height: 16px; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.hc-all:hover svg, .hc-link:hover svg { transform: translateX(4px); }
.hc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hc-tab { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px 14px 12px; border-radius: 20px; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: #fff; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.hc-tab:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.hc-tab.is-on { background: linear-gradient(150deg, rgba(50,50,80,0.6), rgba(16,16,24,0.7)); border-color: rgba(106,108,255,0.45); }
.hc-tab img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.hc-tab b { display: block; font-family: var(--font-display); font-size: 19px; }
.hc-tab small { font-size: 12.5px; color: #9a9aa3; }
.hc-tab .bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: rgba(255,255,255,0.08); opacity: 0; }
.hc-tab.is-on .bar { opacity: 1; }
.hc-tab .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a6cff, #a9abff); transform: scaleX(0); transform-origin: left; }
.hc-show.is-auto .hc-tab.is-on .bar i { animation: cxBar var(--dur, 12s) linear forwards; }
.hc-show.is-paused .hc-tab.is-on .bar i { animation-play-state: paused; }
.hc-stage { display: grid; margin-top: 26px; }
.hc-pane { grid-area: 1 / 1; display: grid; grid-template-columns: 0.36fr 0.64fr; gap: 44px; align-items: center; }
.hc-client { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hc-client img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.hc-client span { font-size: 12.5px; color: #8c8c94; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.14); }
.hc-txt h3 { font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 38px); line-height: 1.08; font-weight: 700; margin: 0 0 20px; text-wrap: balance; }
.hc-txt h3 span { color: #a9abff; }
.hc-txt ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-txt li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: #d2d2d9; }
.hc-txt li::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(140deg, #6a6cff, #3d40c8); box-shadow: 0 0 10px rgba(106,108,255,0.5); }
.hc-txt .aw-badge { margin: 0 0 24px; }
.hc-vis { display: block; position: relative; text-decoration: none; }
.hc-vis.is-light { padding: 3%; border-radius: 26px; background: #ececec; }
@media (max-width: 1000px) {
  .hc-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hc-head-r { align-items: flex-start; }
  .hc-awards { justify-content: flex-start; }
  .hc-pane { grid-template-columns: 1fr; gap: 28px; }
  .hc-vis { order: -1; }
}
@media (max-width: 640px) {
  .hc-tabs { gap: 6px; }
  .hc-tab { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 16px; }
  .hc-tab img { width: 34px; height: 34px; }
  .hc-tab b { font-size: 15px; }
}

/* hero fold: copy tighter, so the live screens take more of the first view */
.hx { padding: 116px 0 30px; }
.hx-client { margin: 12px 0 10px; }
.hx-client img { height: 26px; }
.hx-h1 { font-size: clamp(36px, 4.9vw, 76px); margin-bottom: 14px; max-width: 17ch; }
.hx-sub { font-size: clamp(15px, 1.25vw, 18px); margin-bottom: 22px; }
.hx-chans { margin-top: 18px; }
.hx-chans span { padding: 6px 11px; font-size: 12px; }
.hx-stage { margin-top: 38px; }
.hx-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.hx-cta .tb-awards { margin: 0; }
.hx-cta .aw-badge { padding: 8px 18px 8px 10px; }
.hx-cta .aw-ic { width: 36px; height: 36px; }
.hx-cta .aw-txt b { font-size: 15px; }
@media (max-width: 880px) {
  .hx { padding-top: 104px; }
  .hx-stage { margin-top: 30px; }
}

/* the case hero fills exactly the first screen on desktop: copy on top, the
   stage scaled to whatever height is left (--r = stage height / width) */
.hx { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hx-stage { width: min(1360px, 100%, calc((100svh - var(--hx-cut, 470px)) / var(--r, 0.5) + 6vw)); margin-left: auto; margin-right: auto; }
.sh-pane.is-desk .sh-dev > .dv-stage { width: 100%; }
@media (max-width: 880px), (max-height: 620px) {
  .hx { min-height: 0; display: block; }
  .hx-stage { width: 100%; }
}

/* compact hero copy: kicker and client on one line, no chips */
.hx-kick { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; }
.hx-kick .hx-client { margin: 0; }
.hx-h1 { font-size: clamp(34px, 4.2vw, 64px); max-width: 21ch; }
.hx-sub { max-width: 700px; }
.hx-stage { --hx-cut: 486px; }
@media (min-height: 1000px) { .hx-stage { --hx-cut: 500px; } }

/* =====================================================================
   Leo · four modes, the action log, and Chat (a chat-app page)
   ===================================================================== */
.xp-modes { grid-template-columns: repeat(4, 1fr); }

/* chat: Leo shrinks into the sidebar avatar; the page is a chat app */
.xp[data-mode="chat"] .xp-agent { top: 3.6%; left: 1.9%; right: 94.9%; bottom: 90.6%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(106,108,255,0.6); }
.xp[data-mode="chat"] .xp-pill, .xp[data-mode="chat"] .xp-ico, .xp[data-mode="chat"] .xp-call { opacity: 0; visibility: hidden; }
.xp[data-mode="chat"] .xp-side { flex-basis: 0%; }
.xp-l-chat { z-index: 2; display: grid; grid-template-columns: 21% 1fr; background: #08080c; }
.xc-side { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(16 * var(--u)) calc(14 * var(--u)); background: linear-gradient(180deg, #0e0e14, #0a0a10 60%, #10123a); border-right: 1px solid rgba(255,255,255,0.06); font-size: clamp(10px, calc(13 * var(--u)), 13px); color: #c9c9d2; }
.xc-brand { display: flex; align-items: center; gap: 10px; height: calc(48 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.xc-ava-slot { width: calc(48 * var(--u)); height: calc(48 * var(--u)); flex-shrink: 0; }
.xc-brand b { display: block; color: #fff; font-size: 1.05em; }
.xc-brand small { color: #8a8a93; font-size: 0.85em; }
.xc-new { display: inline-flex; align-items: center; justify-content: center; height: calc(38 * var(--u)); border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-weight: 600; margin-bottom: calc(10 * var(--u)); }
.xc-h { font-size: 0.82em; color: #7d7d86; margin: calc(6 * var(--u)) 0 calc(2 * var(--u)) calc(8 * var(--u)); }
.xc-row { padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-row.on { background: rgba(255,255,255,0.07); color: #fff; }
.xc-pow { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: #7d7d86; }
.xc-pow img { height: 1em; opacity: 0.7; }
.xc-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: calc(18 * var(--u)) 8% calc(12 * var(--u)); background: radial-gradient(ellipse at 50% 120%, rgba(76,79,215,0.28), transparent 55%), #08080c; }
.xc-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--u)); }
/* Leo's answer runs the full width, as in the dock (no avatar beside it) */
.xc-ans { display: block; }
.xc-ava { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: url('assets/agent/poster.webp') 50% 22% / 220% no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.xc-ans p { margin: 0 0 calc(12 * var(--u)); font-size: clamp(11px, calc(15 * var(--u)), 15px); line-height: 1.55; color: #ececf1; }
.xc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.xc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: calc(14 * var(--u)); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: clamp(10px, calc(13 * var(--u)), 13px); }
.xc-card > img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 25%; }
.xc-card > span:last-child { display: block; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
.xc-card small { display: block; font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9abff; }
.xc-card b { display: block; color: #fff; margin: 2px 0 3px; }
.xc-card em { font-style: normal; color: #9a9aa3; font-size: 0.92em; }
.xc-book { background: linear-gradient(160deg, rgba(76,79,215,0.22), rgba(255,255,255,0.04)); }
.xc-cal { display: grid; place-items: center; aspect-ratio: 16 / 8; color: #c3c4ff; background: rgba(106,108,255,0.12); }
.xc-cal svg { width: 30%; height: 30%; }
.xc-slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.xc-slots i { font-style: normal; font-size: 0.9em; padding: 3px 7px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.18); color: #ddd; }
.xc-slots i.pick { background: #4c4fd7; border-color: #4c4fd7; color: #fff; }
.xc-compose { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(26 * var(--u)); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); font-size: clamp(11px, calc(14 * var(--u)), 14px); color: #9a9aa3; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(106,108,255,0.08); }
.xc-compose span { flex: 1; }
.xc-compose i { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff; }
.xc-compose i.mic { background: rgba(255,255,255,0.08); }
.xc-compose i.go { background: linear-gradient(140deg, #6a6cff, #3d40c8); }
.xc-compose svg { width: 50%; height: 50%; }
.xc-note { margin: calc(8 * var(--u)) 0 0; text-align: center; font-size: clamp(9px, calc(11 * var(--u)), 11px); color: #6f6f78; }

@media (max-width: 880px) {
  .xp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-l-chat { grid-template-columns: 1fr; }
  .xc-side { display: none; }
  .xp[data-mode="chat"] .xp-agent { top: 2.5%; left: 4%; right: 84%; bottom: 90%; }
  .xc-main { padding: 14% 5% 4%; }
  .xc-cards { grid-template-columns: 1fr 1fr; }
  .xc-cards .xc-book { display: none; }
    }
.xp[data-mode="chat"] .xp-layer[data-for="chat"] { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.45s, visibility 0s; }
.xp[data-mode="chat"] .xp-agent { z-index: 5; }

/* Leo listens on the idle loop and talks on his own talking clip, only while he speaks */
.xp-vid video.xp-talk { z-index: 1; }
.xp-vid video.xp-talk.is-playing { opacity: 0; }
.xp[data-mode="full"] .xp-view.is-run video.xp-talk.is-playing { animation: xpTalkFull 17s linear both; }
.xp[data-mode="split"] .xp-view.is-run video.xp-talk.is-playing { animation: xpTalkSplit 6.5s linear both; }
.xp[data-mode="widget"] .xp-view.is-run video.xp-talk.is-playing { animation: xpTalkWidget 6.5s linear both; }
@keyframes xpTalkFull { 0%, 10.5% { opacity: 0; } 12%, 26.5% { opacity: 1; } 28%, 47% { opacity: 0; } 48.5%, 70% { opacity: 1; } 71.5%, 77% { opacity: 0; } 78.5%, 90% { opacity: 1; } 91.5%, 100% { opacity: 0; } }
@keyframes xpTalkSplit { 0%, 14% { opacity: 0; } 18%, 33% { opacity: 1; } 37%, 63% { opacity: 0; } 67%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes xpTalkWidget { 0%, 17% { opacity: 0; } 21%, 39% { opacity: 1; } 43%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xp-vid video.xp-talk { display: none; } }

/* ------------------------------------------------------------------ case intro (owner, 18 Oct 2026)
   Exactly one screen, centred like the solution pages, no picture: the client's logo on top, the sector, one
   headline, one sentence on what the agent does, one action (and the award where there is one), and along the
   foot of the screen the facts that matter first (agent, what it helps with, channels, languages). The page's
   own story follows. Flat surfaces, one accent, no glow; each case keeps its brand colours (case-brand.css). */
.hx.hx--intro {
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  height: 100svh; min-height: 680px; box-sizing: border-box; text-align: center; overflow: visible;
  padding: clamp(96px, 13vh, 132px) max(clamp(20px, 4.5vw, 64px), calc((100% - 1320px) / 2)) clamp(24px, 4vh, 44px);
}
.hx--intro .hx-top { display: flex; flex-direction: column; align-items: center; max-width: 980px; margin: 0 auto; padding: 0; }
.hx--intro .hx-brandline { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 clamp(20px, 3.4vh, 34px); }
.hx--intro .hx-brandline img { height: clamp(30px, 4.4vh, 42px); width: auto; }
.hx--intro .hx-brandline img.hx-dfcm { height: clamp(42px, 6vh, 58px); }
.hx--intro .hx-brandline span { font-size: 14px; padding-left: 16px; }
.hx--intro .hx-sector { margin: 0; }
.hx--intro .hx-h1 { font-size: min(5.6vw, 9vh, 88px); line-height: 1; margin: clamp(16px, 2.6vh, 26px) auto clamp(14px, 2.4vh, 22px); max-width: 16ch; text-wrap: balance; }
.hx--intro .hx-sub { margin: 0 auto clamp(22px, 3.6vh, 36px); max-width: 640px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; text-wrap: pretty; }
.hx--intro .hx-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.hx--intro .hx-cta .tb-awards { margin: 0; justify-content: center; }
.hx--intro .hx-facts { width: 100%; align-self: end; }
.hx--intro .cs-meta { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); width: 100%; text-align: left; }
.hx--intro .cs-meta > div, .hx--intro .cs-meta > div:first-child { padding: clamp(16px, 2.4vh, 24px) 24px; }
.hx--intro .cs-meta > div:first-child { padding-left: 0; }
.hx--intro .cs-meta dd { font-size: 14.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .hx.hx--intro { height: auto; min-height: 100svh; padding-top: 112px; gap: 40px; }
  .hx--intro .hx-h1 { font-size: clamp(38px, 10vw, 56px); max-width: none; }
  .hx--intro .cs-meta { grid-template-columns: 1fr 1fr; }
  .hx--intro .cs-meta > div, .hx--intro .cs-meta > div:first-child { padding: 16px 14px; }
  .hx--intro .cs-meta > div:nth-child(odd) { padding-left: 0; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .hx--intro .cs-meta dd { font-size: 13.5px; }
}

/* ------------------------------------------------------------------ home: the four experiences show the real Leo
   (owner, 18 Oct 2026). These are variations of one experience, so the agent box is the real dock: a dark
   panel, his picture with the name top-left, the two round buttons top-right and the glass voice call, the
   conversation bar, the thread (your bubble on the right, Leo in plain text), the composer and the light at
   the foot. Side by side puts Leo on the right like the dock, and he points with his cursor, no ring. */
.xp-agent { background: #090a13; }
.xp-vid { background: #090a13 url('assets/agent/poster.webp') 50% 0 / cover no-repeat; }
.xp .xp-pill {
  gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)) 0 calc(9 * var(--u));
  border: 0; border-radius: 999px; font-size: clamp(10px, calc(12 * var(--u)), 13px); font-weight: 600; letter-spacing: 0;
  background: rgba(14, 15, 24, 0.36); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
}
.xp .xp-pill i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.xp-ico { position: absolute; z-index: 2; top: calc(14 * var(--u)); right: calc(14 * var(--u)); display: flex; gap: calc(7 * var(--u)); }
.xp-ico svg {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: calc(8 * var(--u)); box-sizing: border-box; border-radius: 50%;
  color: #fff; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(14, 15, 24, 0.36); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
.xp-call {
  position: absolute; z-index: 2; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(12 * var(--u));
  height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  border-radius: 999px; color: #fff; font-size: clamp(10px, calc(13 * var(--u)), 14px); font-weight: 600;
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06); backdrop-filter: blur(26px) saturate(180%) brightness(1.06);
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.75);
}
.xp-call svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
/* face to face, the conversation is the captions: the call is already running */
.xp[data-mode="full"] .xp-call { display: none; }
/* docked layouts: the picture dissolves into the panel, as in the dock */
.xp[data-mode="split"] .xp-vid::after, .xp[data-mode="widget"] .xp-vid::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 10, 19, 0), #090a13);
}
.xp-side { display: flex; flex-direction: column; background: #090a13; }
.xp-side::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 32, 96, 0) 0%, rgba(28, 32, 96, 0.34) 58%, rgba(30, 36, 112, 0.62) 100%);
}
.xp-side > * { position: relative; z-index: 1; }
.xp-sess { flex: none; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)); }
.xp-sess i { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #f4f5fa;
  background: rgba(244,245,250,0.1); box-shadow: inset 0 0 0 1px rgba(244,245,250,0.11); }
.xp-sess svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xp-sess i svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.xp-sess span { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u));
  border-radius: 999px; color: rgba(244,245,250,0.5); background: rgba(244,245,250,0.065); box-shadow: inset 0 0 0 1px rgba(244,245,250,0.07); }
.xp-sess .ld-clock { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; }
.xp-sess b { flex: 1; min-width: 0; font-size: clamp(10px, calc(13.5 * var(--u)), 14px); font-weight: 500; color: #f4f5fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-sess em { flex: none; min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); display: inline-grid; place-items: center; border-radius: 999px;
  font-style: normal; font-size: clamp(8px, calc(11 * var(--u)), 11px); font-weight: 500; color: rgba(244,245,250,0.76); background: rgba(244,245,250,0.065); }
.xp-sess .ld-chev { flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.xp-msgs { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.xp-compose {
  flex: none; margin: calc(8 * var(--u)) calc(14 * var(--u)) 0; height: calc(38 * var(--u)); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(5 * var(--u)) 0 calc(15 * var(--u));
  background: #10121b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #8a8c99; font-size: clamp(9px, calc(12.5 * var(--u)), 13px);
}
.xp-compose i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #1c1e2a; color: #9a9cab; }
.xp-compose i svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.xp-pow { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; padding: calc(7 * var(--u)) 0 calc(9 * var(--u)); color: #6f7180; font-size: clamp(8px, calc(10 * var(--u)), 11px); }
.xp-pow img { height: calc(9 * var(--u)); width: auto; opacity: 0.7; }
/* the thread, as in the dock */
.xp .sc-me { background: #262833; border-radius: 1.2em 1.2em 0.4em 1.2em; }
.xp .sc-ag { color: #e9e9f0; }
/* face to face captions: your words in a light glass bubble, Leo's on dark glass; no purple glow */
.xp-cap.me { background: rgba(255, 255, 255, 0.14); border: 0; }
.xp-cap.ag { background: rgba(9, 10, 19, 0.62); border: 0; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
/* chat: the closing question */
.xc-q { margin: calc(12 * var(--u)) 0 0; color: #e9e9f0; font-size: inherit; line-height: 1.5; }

/* Side by side: Leo on the right, the page on the left */
@media (min-width: 881px) {
  .xp[data-mode="split"] .xp-agent { left: 64%; right: 1.4%; }
  .xp-pg { left: 1.4%; right: 37.4%; }
  .xp[data-mode="split"] .xp-vid { flex-basis: 37%; }
  .xp[data-mode="split"] .xp-side { flex-basis: 63%; }
}
/* Leo's cursor: comes from his side and points at what he is explaining on the live page; --x1/--y1 and
   --x2/--y2 are measured from the page itself (site-extras.js), the values here are only the fallback */
.xp-cur { --x1: 46%; --y1: 40%; --x2: 22%; --y2: 34%; position: absolute; z-index: 6; left: 96%; top: 46%; display: flex; align-items: flex-start; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(10, 10, 40, 0.35)); }
.xp-cur svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: #6a6cff; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.xp-cur b { margin: calc(16 * var(--u)) 0 0 calc(-4 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: #6a6cff; color: #fff; font-size: clamp(8px, calc(10.5 * var(--u)), 11px); font-weight: 700; }
.xp-view.is-run .xp-cur { animation: xpCur 11s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes xpCur {
  0%, 19% { opacity: 0; left: 96%; top: 46%; }
  22% { opacity: 1; left: 96%; top: 46%; }
  31%, 50% { opacity: 1; left: var(--x1); top: var(--y1); }
  66%, 92% { opacity: 1; left: var(--x2); top: var(--y2); }
  100% { opacity: 0; left: var(--x2); top: var(--y2); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-view.is-run .xp-cur { animation: none; opacity: 1; left: var(--x1); top: var(--y1); }
}

/* Phones (owner, 18 Oct 2026): the four scripted layouts are a desktop demo, so on a phone they are not shown;
   the heading and "Try it live", which opens Leo himself, stay. Nothing inside (videos, the Retail frame) loads. */
@media (max-width: 767px) {
  .lxp .xp { display: none; }
  .lxp .leo-head { margin-bottom: 0; }
}

/* Phones (owner, 18 Oct 2026): the page keeps its main messages; interface demos that a phone cannot show
   well, and sections that repeat another page, are left out. */
@media (max-width: 767px) {
  body:not(.cs-page) #values, body:not(.cs-page) #showcase { display: none; }
  .cs-page #more-case-studies, .cs-page #exact-answers-consented-leads { display: none; }
}

/* ------------------------------------------------------------------ the Leo dock, drawn (common.leo_dock)
   The real dock's look wherever a Company page shows Leo talking: dark panel, his picture with the name chip and
   the two round buttons, the glass voice call, the conversation bar, the thread, the composer, the light at the
   foot. Sized from its own width (cqw), so one panel fits a phone mockup and a desktop frame alike. */
.ld { position: relative; container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  border-radius: 22px; color: #fff; background: #090a13; font-size: clamp(11px, 3.4cqw, 14.5px); line-height: 1.45; text-align: left;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 80px -48px rgba(0,0,0,0.75); }
.ld::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,32,96,0), rgba(28,32,96,0.28) 60%, rgba(30,36,112,0.5)); }
.ld > * { position: relative; z-index: 1; }
.ld svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ld-pic { flex: none; aspect-ratio: 16 / 10.6; overflow: hidden; background: #090a13; }
.ld-pic > img, .ld-pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.ld-pic::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,10,19,0) 58%, #090a13); pointer-events: none; }
.ld-who { position: absolute; z-index: 2; left: 3.6cqw; top: 3.6cqw; display: inline-flex; align-items: center; gap: 0.45em; height: 2.2em; padding: 0 0.9em 0 0.75em;
  border-radius: 999px; font-size: 0.9em; font-weight: 600; background: rgba(14,15,24,0.38); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.ld-who i { width: 0.45em; height: 0.45em; border-radius: 50%; background: #22c55e; }
.ld-ico { position: absolute; z-index: 2; right: 3.6cqw; top: 3.6cqw; display: flex; gap: 0.5em; }
.ld-ico svg { width: 2.35em; height: 2.35em; padding: 0.62em; box-sizing: border-box; border-radius: 50%; color: #fff; stroke-width: 1.6;
  background: rgba(14,15,24,0.38); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.ld-call { position: absolute; z-index: 2; left: 3.2cqw; right: 3.2cqw; bottom: 3.2cqw; height: 3.1em; display: flex; align-items: center; justify-content: center; gap: 0.5em;
  border-radius: 999px; font-weight: 600; background: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.06); backdrop-filter: blur(26px) saturate(180%) brightness(1.06); }
.ld-call svg { width: 1.05em; height: 1.05em; }
.ld-call.is-live { justify-content: flex-start; padding: 0 0.35em 0 1.1em; gap: 0.7em; }
.ld-call.is-live b { font-weight: 600; }
.ld-call.is-live em { margin-left: auto; font-style: normal; font-size: 0.88em; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }
.ld-end { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.16); }
.ld-end svg { width: 1.15em; height: 1.15em; }
.ld-meter { display: inline-flex; align-items: center; gap: 0.18em; height: 1em; }
.ld-meter i { width: 0.18em; height: 100%; border-radius: 1em; background: #fff; transform-origin: center; animation: ldMeter 1s ease-in-out infinite; }
.ld-meter i:nth-child(2) { animation-delay: -0.2s; } .ld-meter i:nth-child(3) { animation-delay: -0.4s; } .ld-meter i:nth-child(4) { animation-delay: -0.6s; } .ld-meter i:nth-child(5) { animation-delay: -0.8s; }
@keyframes ldMeter { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
/* the conversation bar, measured from the dock (.sess): a 38 px "+" and a 38 px pill with the clock, the title, the count and the chevron */
.ld-sess { flex: none; display: flex; align-items: center; gap: 0.55em; padding: 0.83em 0.97em 0.28em; }
.ld-sess i { flex: none; width: 2.62em; height: 2.62em; border-radius: 50%; display: grid; place-items: center; color: #f4f5fa;
  background: rgba(244,245,250,0.1); box-shadow: inset 0 0 0 1px rgba(244,245,250,0.11); }
.ld-sess i svg { width: 1.17em; height: 1.17em; }
.ld-sess span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.69em; height: 2.62em; padding: 0 0.83em 0 0.97em; border-radius: 999px;
  color: rgba(244,245,250,0.5); background: rgba(244,245,250,0.065); box-shadow: inset 0 0 0 1px rgba(244,245,250,0.07); }
.ld-sess .ld-clock { flex: none; width: 1.1em; height: 1.1em; stroke-width: 1.6; }
.ld-sess b { flex: 1; min-width: 0; font-size: 0.93em; font-weight: 500; color: #f4f5fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-sess em { flex: none; min-width: 1.4em; height: 1.4em; padding: 0 0.42em; display: inline-grid; place-items: center; border-radius: 999px; font-style: normal;
  font-size: 0.76em; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(244,245,250,0.76); background: rgba(244,245,250,0.065); }
.ld-sess .ld-chev { flex: none; width: 0.83em; height: 0.83em; }
.ld-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.8em; padding: 0.7em 3.6cqw 0.9em; }
.ld-me { align-self: flex-end; max-width: 84%; padding: 0.6em 0.9em; border-radius: 1.2em 1.2em 0.35em 1.2em; background: #262833; }
.ld-ag { color: #e9e9f0; line-height: 1.55; }
.ld .tx-swap { display: grid; }
.ld .tx-swap > * { grid-area: 1 / 1; }
.ld-src { display: inline-flex; align-items: center; gap: 0.45em; align-self: flex-start; margin-top: -0.3em; font-size: 0.82em; color: #8d8fa6; }
.ld-src svg { width: 1.05em; height: 1.05em; }
.ld-compose { flex: none; display: flex; align-items: center; margin: 0 3.6cqw; height: 3.1em; padding: 0 0.4em 0 1.1em; border-radius: 999px;
  background: #151724; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); color: #8a8ca0; font-size: 0.95em; }
.ld-compose span { flex: 1; }
.ld-compose i { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; color: #cfd0dc; background: rgba(255,255,255,0.08); }
.ld-compose i svg { width: 45%; height: 45%; }
.ld-pow { flex: none; text-align: center; padding: 0.55em 0 0.75em; font-size: 0.72em; color: #6f7186; }
.ld-pow img { display: inline-block; width: auto; height: 0.95em; vertical-align: -0.12em; margin-left: 0.2em; filter: brightness(0) invert(1); opacity: 0.6; }
/* in a call without a face (a phone line) */
.ld-voice { flex: none; aspect-ratio: 16 / 10.6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.95em; background: #0c0e1b; }
.ld-wave { display: flex; align-items: center; gap: 0.3em; height: 3.4em; }
.ld-wave i { width: 0.3em; height: calc(var(--h) * 1%); border-radius: 1em; background: #c7c9ff; transform-origin: center; animation: ldWave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.11s); }
@keyframes ldWave { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.ld-vstate { text-align: center; }
.ld-vstate b { display: block; font-weight: 600; }
.ld-vstate span { font-size: 0.85em; color: #8d8fa6; font-variant-numeric: tabular-nums; }
.ld-vbtns { display: flex; gap: 0.6em; }
.ld-vb { display: inline-flex; align-items: center; gap: 0.45em; height: 2.6em; padding: 0 1.1em; border-radius: 999px; font-size: 0.9em; font-weight: 600; background: rgba(255,255,255,0.1); }
.ld-vb svg { width: 1.05em; height: 1.05em; }
/* the chat alone */
.ld-bar { flex: none; display: flex; align-items: center; gap: 0.7em; padding: 3.6cqw 3.6cqw 0.2em; }
.ld-bar > img { width: 2.7em; height: 2.7em; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.ld-bar b { display: block; font-weight: 600; }
.ld-bar small { display: block; font-size: 0.82em; color: #8d8fa6; }
.ld--text .ld-ico { position: static; margin-left: auto; }
.ld--text .ld-ico svg { background: #151724; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* a page card in the thread, as the dock shows one */
.ld-card { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: stretch; border-radius: 0.9em; overflow: hidden; background: #121424; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); }
.ld-card > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; min-height: 5.6em; }
.ld-card > span { display: flex; flex-direction: column; justify-content: center; gap: 0.2em; padding: 0.7em 0.9em; min-width: 0; }
.ld-card small { font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #a9abff; }
.ld-card b { font-weight: 600; line-height: 1.3; }
.ld-card em { font-style: normal; font-size: 0.85em; color: #b9bbcc; display: inline-flex; align-items: center; gap: 0.35em; }
.ld-card em svg { width: 1em; height: 1em; }
@media (prefers-reduced-motion: reduce) { .ld-meter i, .ld-wave i { animation: none; } }
.ld-card.is-ic { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding-left: 0.8em; }
.ld-card.is-ic > i { width: 2.6em; height: 2.6em; border-radius: 0.8em; display: grid; place-items: center; color: #c9cbff; background: rgba(106,108,255,0.14); }
.ld-card.is-ic > i svg { width: 1.2em; height: 1.2em; }

/* ------------------------------------------------------------------ case intro with the figures up front
   (case_cards.case_intro_stats; owner, 18 Oct 2026, Talya first): the client's logo on top with the sector centred
   under it, the centre block, then one row between two hairlines: the agent in the first cell (round picture zoomed
   out so the face and hair are never cut, the name and role under it), then the numbers, every cell centred.
   One screen, no glow. */
.hx.hx--intro.hx--stats { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0; padding-bottom: clamp(24px, 4vh, 44px); }
.hx--stats .hx-top { padding-bottom: clamp(32px, 6vh, 64px); }
.hx-brand { display: flex; justify-content: center; margin-bottom: clamp(24px, 4vh, 38px); }
.hx-brand img { display: block; height: clamp(50px, 7vh, 68px); width: auto; }
.hx-brand img.hx-dfcm { height: clamp(96px, 13vh, 128px); }   /* the mall's mark carries its name in small script under it */
.bt-d .hx-brand img { filter: brightness(0) invert(1); opacity: 0.95; }
.bt-l .hx-brand img { filter: brightness(0); opacity: 0.88; }
.hx--stats .hx-h1 { margin-top: 0; }
.hx-stats { width: 100%; display: grid; grid-template-columns: var(--cols, repeat(5, minmax(0, 1fr))); align-items: stretch;
  border-top: 1px solid var(--bt-line, rgba(255,255,255,0.14)); border-bottom: 1px solid var(--bt-line, rgba(255,255,255,0.14)); }
.hx-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(18px, 3.2vh, 32px) 16px; text-align: center;
  border-left: 1px solid var(--bt-line, rgba(255,255,255,0.14)); }
.hx-stat:first-child { border-left: 0; }
.hx-stat--agent > img { display: block; width: clamp(60px, 8vh, 76px); height: clamp(60px, 8vh, 76px); border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 28px rgba(3,14,40,0.28); }
.bt-l .hx-stat--agent > img { box-shadow: 0 0 0 1px rgba(16,24,40,0.1), 0 10px 26px rgba(16,24,40,0.12); }
.hx-avs { display: flex; }
.hx-avs img { display: block; width: clamp(60px, 8vh, 76px); height: clamp(60px, 8vh, 76px); border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--bt-bg, #0c1424), 0 10px 28px rgba(3,14,40,0.28); }
.hx-avs img + img { margin-left: -14px; }
.hx-stat.hx-stat--agent > span { display: inline-flex; align-items: center; gap: 0.55em; margin-top: 14px; white-space: nowrap; }
.hx-stat--agent > span i { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.hx-stat.hx-stat--agent > span b { display: inline; margin-right: -0.3em; font: inherit; letter-spacing: inherit; color: var(--bt-ink, #fff); }
.hx-stat b { display: block; font-family: var(--font-display); font-size: clamp(40px, min(4.6vw, 8vh), 76px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--bt-ink, #fff); font-variant-numeric: tabular-nums; }
.hx-stat span { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bt-faint, rgba(255,255,255,0.6)); }
/* a figure with no number: a word, or the award with its laurel, in the same row and on the same line as the numbers */
.hx-stat b .hx-word { display: inline-flex; align-items: center; gap: 0.32em; font-style: normal; font-size: clamp(26px, min(2.7vw, 5vh), 42px); line-height: 1.1; vertical-align: middle; }
.hx-stat b .hx-award svg { flex: none; width: 1.05em; height: 1.05em; color: var(--bt-acc, currentColor); }
.hx-facts--below { margin: 0 0 clamp(40px, 6vw, 64px); }
@media (max-width: 760px) {
  .hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-brand img { height: 46px; }
  .hx-brand img.hx-dfcm { height: 88px; }
  .hx-stat--agent { grid-column: 1 / -1; flex-direction: row; gap: 14px; padding: 16px 0;
    border-bottom: 1px solid var(--bt-line, rgba(255,255,255,0.14)); }
  .hx-stat--agent > img { width: 56px; height: 56px; }
  .hx-avs img { width: 52px; height: 52px; }
  .hx-stat.hx-stat--agent > span { margin-top: 0; }
  .hx-stat { padding: 18px 8px; }
  .hx-stat:nth-child(2) { border-left: 0; }
  .hx-stat b { font-size: clamp(30px, 9vw, 44px); }
  .hx-stat span { font-size: 10.5px; letter-spacing: 0.1em; }
  .hx-stat b .hx-word { font-size: clamp(17px, 5vw, 22px); }
}

/* Web scene (owner, 19 Oct 2026): captions in pairs that give way to the next, a card that gives way to the process */
.xp-caps { justify-content: flex-end; min-height: 40%; }
.xp-capg { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.xp .xp-view[data-run].is-run [data-in][data-out] { animation: inUp 0.55s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both, xpOut 0.45s ease var(--o) forwards; }
.xp .xp-view[data-run].is-run .xp-capg[data-out] { animation: xpOut 0.45s ease var(--o) forwards; }
@keyframes xpOut { to { opacity: 0; transform: translateY(-10px); visibility: hidden; } }
.xp-cards { position: absolute; }
.xp-cards > .xp-card { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.xp-proc small { display: block; font-size: 0.74em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a9abff; margin-bottom: 0.35em; }
.xp-proc ol { list-style: none; margin: 0.2em 0 1em; padding: 0; display: flex; flex-direction: column; gap: 0.55em; position: relative; }
.xp-proc ol::before { content: ""; position: absolute; left: 0.85em; top: 0.9em; bottom: 0.9em; width: 1px; background: rgba(255,255,255,0.16); }
.xp-proc li { position: relative; display: flex; align-items: center; gap: 0.75em; }
.xp-proc li::before { content: none; }
.xp-proc li i { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.85em; font-weight: 700; background: #4c4fd7; color: #fff; }
.xp-proc li span { display: flex; flex-direction: column; color: #c9c9d1; font-size: 0.92em; line-height: 1.35; }
.xp-proc li span b { display: inline; margin: 0; font-size: 1em; color: #fff; }
.xp-proc .xp-book { background: rgba(76,79,215,0.35); border-color: rgba(169,171,255,0.6); }
@media (prefers-reduced-motion: reduce) { .xp-view [data-out] { animation: none !important; } .xp-capg:not(:last-child), .xp-cards > .xp-card:first-child { display: none; } }

/* ---- case films: poster, one play button, native controls once it plays ---- */
.cf-film { position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: #0b0d12; box-shadow: 0 34px 70px -34px rgba(8, 18, 36, 0.5); }
.cf-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0d12; }
.cf-play { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #0f1115; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.cf-play svg { width: 30px; height: 30px; margin-left: 4px; }
.cf-play:hover { transform: scale(1.07); }
.cf-play:active { transform: scale(0.95); }
.cf-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cf-film.is-on .cf-play { opacity: 0; pointer-events: none; }
.cx-head.cf-head { margin-bottom: 44px; }
@media (max-width: 700px) {
  .cf-film { border-radius: 16px; }
  .cf-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cf-play svg { width: 24px; height: 24px; margin-left: 3px; }
}
@media (prefers-reduced-motion: reduce) { .cf-play { transition: none; } }

/* Toya's behind-the-scenes wall: one large frame, two beside it, three below */
.tb-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; }
.tb-gal figure { margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #e9eef3; }
.tb-gal figure.is-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tb-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.tb-gal figure:hover img { transform: scale(1.035); }
.tb-gal-head { text-align: center; max-width: 620px; margin: 88px auto 32px; }
.tb-gal-head p { margin: 12px 0 0; color: var(--bt-text, #3A3F45); font-size: 17px; line-height: 1.6; }
@media (max-width: 700px) {
  .tb-gal { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tb-gal figure { border-radius: 12px; }
  .tb-gal figure.is-big, .tb-gal figure.is-wide-m { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .tb-gal-head { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .tb-gal img { transition: none; } }

/* awards: the real trophy (owner, 19 Oct 2026) in place of the drawn laurel */
.aw-ic:has(.aw-trophy) { width: auto; height: 46px; background: none; border-radius: 0; box-shadow: none; }
.aw-ic .aw-trophy { height: 46px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.hx-stat b .hx-award .aw-trophy { flex: none; height: 1.3em; width: auto; margin-right: 0.12em; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.22)); }

/* Caption points with their own icon (common._chip) on pages without a brand theme */
.sh-cap li:has(.sh-ci) { display: flex; align-items: center; gap: 12px; padding-left: 0; }
.sh-cap li:has(.sh-ci)::before { display: none; }
.sh-ci { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #a9abff; }
.sh-ci svg { width: 16px; height: 16px; }
.sh.is-light .sh-ci { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #4c4fd7; }