/* =====================================================================
   Product screens, drawn in HTML on top of real captures.
   Every screen is measured in the units of the device it was designed for,
   so it scales with whatever frame it sits in:
     .sc-desk  1 unit = 1px of a 1440px-wide desktop
     .sc-ph    1 unit = 1px of a 390px-wide phone
     .sc-kio   1 unit = 1px of a 1080px-wide portrait kiosk
   (cqw resolves against the device frame, a size container.)
   ===================================================================== */
.sc { position: absolute; inset: 0; overflow: hidden; font-family: var(--font-main); color: #fff; text-align: left; line-height: 1.4; }
.sc-desk { --u: 0.06944cqw; }
.sc-ph { --u: 0.2395cqw; }
.sc-kio { --u: 0.08667cqw; }
.sc img { display: block; }
.sc .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sc svg { flex-shrink: 0; }

/* shared bits */
.sc-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.sc-chips span { font-size: calc(13 * var(--u)); font-weight: 500; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 100px; background: rgba(255,255,255,0.12); color: #fff; white-space: nowrap; }
.sc-pow { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); color: #8d8d96; padding: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.sc-pow img { height: calc(10 * var(--u)); width: auto; opacity: 0.75; }
.sc-in { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(18 * var(--u)); border-radius: 100px; background: #26262c; font-size: calc(13.5 * var(--u)); color: #8f8f98; }
.sc-in span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-in i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #cfcfd6; }
.sc-in i svg { width: 55%; height: 55%; }
.sc-me { align-self: flex-end; max-width: 82%; font-size: calc(14 * var(--u)); line-height: 1.45; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(5 * var(--u)) calc(18 * var(--u)); background: #34343d; color: #fff; }
.sc-ag { align-self: flex-start; max-width: 94%; font-size: calc(14 * var(--u)); line-height: 1.5; color: #f1f1f4; }
.sc-tag { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #b5b6ff; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 100px; background: rgba(106,108,255,0.16); }
.sc-tag svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.sc .tx-typing { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); gap: calc(4 * var(--u)); background: rgba(255,255,255,0.08); }
.sc .tx-typing i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.sc .tx-swap { display: grid; justify-items: start; }
.sc .tx-swap > * { grid-area: 1 / 1; }
.sc .mini-fl.is-wide { font-size: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); }

/* the scene choreography also runs inside heroes and showcases */
[data-run] [data-in] { opacity: 0; }
[data-run].is-run [data-in] { animation: inUp 0.55s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both; }
[data-run].is-run [data-in="fade"] { animation-name: inFade; }
[data-run].is-run [data-in="typing"] { animation: typingLife var(--t, 1.1s) ease var(--d, 0s) both; }
[data-run].is-run .lx-val, .is-run .sc .lx-val { animation: lxType var(--t, 0.9s) steps(var(--n, 16)) var(--d, 0s) both; }
[data-run].is-run .lx-box { animation: lxCheck 0.3s ease var(--d, 0s) forwards; }
[data-run].is-run .lx-send { animation: lxPress 0.5s ease var(--d, 0s) both; }

/* ---------------------------------------------------------------------
   Talya · kiosk (real kiosk capture + a live flight panel)
   --------------------------------------------------------------------- */
.sk-speak { position: absolute; left: 25.6%; top: 53.9%; width: 39.6%; height: 4.2%; border-radius: 100px; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; color: #fff; background: linear-gradient(90deg, rgba(46,170,98,0.95), rgba(70,200,120,0.95)); box-shadow: 0 0 calc(40 * var(--u)) rgba(61,220,132,0.45); }
.sk-speak .eq { height: calc(26 * var(--u)); gap: calc(4 * var(--u)); }
.sk-speak .eq i { width: calc(5 * var(--u)); }
.sk-said { position: absolute; left: 8%; right: 8%; top: 59.6%; text-align: center; font-size: calc(26 * var(--u)); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.sk-panel { position: absolute; left: 6.5%; right: 6.5%; top: 64.6%; bottom: 5.4%; display: flex; flex-direction: column; gap: calc(22 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)); border-radius: calc(30 * var(--u)); background: rgba(34,36,44,0.88); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sk-top { display: flex; justify-content: space-between; align-items: center; font-size: calc(26 * var(--u)); font-weight: 600; }
.sk-x { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.12); font-size: calc(26 * var(--u)); color: #ddd; }
.sk-panel .mini-fl { font-size: calc(26 * var(--u)); border-radius: calc(24 * var(--u)); border: 1px solid rgba(90,150,255,0.35); }
.sk-qr { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(26 * var(--u)); align-items: center; padding: calc(16 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(255,255,255,0.06); }
.sk-qr img { width: 100%; border-radius: calc(12 * var(--u)); background: #fff; padding: calc(8 * var(--u)); box-sizing: border-box; }
.sk-qr b { display: block; font-size: calc(25 * var(--u)); }
.sk-qr span { font-size: calc(21 * var(--u)); color: #b9b9c2; }

/* ---------------------------------------------------------------------
   Talya · web, full screen (chat panel + the airport website)
   --------------------------------------------------------------------- */
.sw { background: radial-gradient(ellipse at 0% 30%, rgba(122,60,220,0.35), transparent 45%), #050508; }
.sw-chat { position: absolute; left: 1.4%; top: 2.2%; bottom: 2.4%; width: 31.7%; display: flex; flex-direction: column; border-radius: calc(22 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #0d0d12, #060609); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.sw-head { position: relative; flex-shrink: 0; aspect-ratio: 457 / 220; }
.sw-head img { width: 100%; height: 100%; object-fit: cover; }
.sw-head::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, #0d0d12); }
.sw-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)); }
.sw-foot { padding: 0 calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.sw-site { position: absolute; left: 34.6%; top: 2.2%; right: 1.4%; bottom: 2.4%; border-radius: calc(14 * var(--u)); overflow: hidden; background: #1550b8; }
.sw-site img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sw-ring { position: absolute; border: calc(3 * var(--u)) solid #8f91ff; border-radius: calc(12 * var(--u)); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(106,108,255,0.25), 0 0 calc(30 * var(--u)) rgba(106,108,255,0.6); }

/* ---------------------------------------------------------------------
   Talya · widget on the airport website
   --------------------------------------------------------------------- */
.sg-panel { position: absolute; right: 1.6%; bottom: 15.5%; width: 26.5%; height: 74%; display: flex; flex-direction: column; border-radius: calc(20 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #0d0d12, #060609); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08); }
.sg-panel .sw-head { aspect-ratio: 457 / 170; }
/* Talya (owner, 18 Oct 2026): the capture has no launcher, so the panel sits in the corner where it opens, no gap
   under it; the page Talya opens behind the conversation fades in over the homepage */
.sg-panel.is-corner { bottom: 2.6%; height: 72%; }
[data-run].is-run .sc .sg-page[data-in] { animation-name: sgPage; animation-duration: 0.8s; animation-timing-function: ease; }
@keyframes sgPage { from { opacity: 0; } to { opacity: 1; } }
.sg-cta { align-self: stretch; border-radius: calc(16 * var(--u)); overflow: hidden; background: #fff; color: #111; }
.sg-cta .ph { height: calc(86 * var(--u)); background: linear-gradient(135deg, #1550b8, #2d7be0); display: flex; align-items: flex-end; padding: calc(12 * var(--u)); }
.sg-cta .ph b { font-size: calc(17 * var(--u)); color: #fff; }
.sg-cta .tx { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); color: #4c4c55; }
.sg-cta .btn { margin-top: calc(10 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); border-radius: 100px; background: #1550b8; color: #fff; font-size: calc(13 * var(--u)); font-weight: 600; }
.sg-cta .btn svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.sg-panel .sw-head img { object-position: 50% 30%; }
.sg-x { position: absolute; z-index: 2; top: calc(12 * var(--u)); right: calc(12 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.45); color: #fff; font-size: calc(16 * var(--u)); }

/* ---------------------------------------------------------------------
   phone chrome: status bar
   --------------------------------------------------------------------- */
.ph-status { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; height: calc(50 * var(--u)); padding: calc(6 * var(--u)) calc(30 * var(--u)) 0 calc(34 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.ph-status .ic { display: flex; gap: calc(5 * var(--u)); align-items: center; }
.ph-status .ic i { display: block; height: calc(11 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; }
.ph-status .ic i:nth-child(1) { width: calc(17 * var(--u)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ph-status .ic i:nth-child(2) { width: calc(15 * var(--u)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ph-status .ic i:nth-child(3) { width: calc(24 * var(--u)); border-radius: calc(3 * var(--u)); opacity: 0.9; }

/* ---------------------------------------------------------------------
   Talya · mobile app with a lead form
   --------------------------------------------------------------------- */
.sm { display: flex; flex-direction: column; background: linear-gradient(180deg, #0b0b10, #050508); }
.sm-head { position: relative; margin: 0 calc(12 * var(--u)); border-radius: calc(22 * var(--u)); overflow: hidden; aspect-ratio: 457 / 190; flex-shrink: 0; }
.sm-head img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sm-head::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(5,5,8,0.9)); }
.sm-head b { position: absolute; z-index: 2; left: calc(14 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
.sm-head b small { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 500; color: #b8b8c0; }
.sm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); }
.sm-foot { padding: 0 calc(14 * var(--u)) calc(4 * var(--u)); }
.sm-form { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #15151c; border: 1px solid rgba(255,255,255,0.1); }
.sm-form h5 { margin: 0 0 calc(2 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.sm-form .lx-field { padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)); border-radius: calc(11 * var(--u)); }
.sm-form .lx-field small { font-size: calc(9 * var(--u)); }
.sm-form .lx-val { font-size: calc(13 * var(--u)); margin-top: calc(1 * var(--u)); }
.sm-form .lx-by { font-size: calc(9.5 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); right: calc(8 * var(--u)); }
.sm-form .lx-consent { font-size: calc(11 * var(--u)); gap: calc(8 * var(--u)); }
.sm-form .lx-box { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(5 * var(--u)); }
.sm-form .lx-send { height: calc(40 * var(--u)); font-size: calc(13.5 * var(--u)); }
.sm-done { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(61,220,132,0.12); border: 1px solid rgba(61,220,132,0.35); font-size: calc(12.5 * var(--u)); color: #c9f5dc; }
.sm-done i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #3ddc84; color: #06240f; flex-shrink: 0; }
.sm-done i svg { width: 60%; height: 60%; }

/* ---------------------------------------------------------------------
   WhatsApp (light), built from WhatsApp Business message types only
   --------------------------------------------------------------------- */
.wa { display: flex; flex-direction: column; background: #efeae2; color: #111b21; }
.wa .ph-status { background: #fff; color: #111; }
.wa-top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); background: #fff; border-bottom: 1px solid #e3e3e3; }
.wa-top .back { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #111; }
.wa-top img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; object-fit: cover; }
.wa-top b { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(15.5 * var(--u)); font-weight: 600; }
.wa-top b i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; }
.wa-top b i svg { width: 70%; height: 70%; }
.wa-top small { display: block; font-size: calc(12 * var(--u)); color: #667781; }
.wa-top .act { margin-left: auto; display: flex; gap: calc(18 * var(--u)); color: #111; }
.wa-top .act svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.wa-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(5 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background-color: #efeae2; background-image: radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1.2px); background-size: calc(22 * var(--u)) calc(22 * var(--u)); background-position: 0 0, calc(11 * var(--u)) calc(11 * var(--u)); }
.wa-day { align-self: center; font-size: calc(11.5 * var(--u)); color: #54656f; background: #fff; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u)); margin-bottom: calc(4 * var(--u)); box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.wa-b { position: relative; max-width: 84%; font-size: calc(13.6 * var(--u)); line-height: 1.38; padding: calc(6 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u)); border-radius: calc(8 * var(--u)); box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.wa-b.in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa-b.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; }
.wa-b em { font-style: normal; float: right; margin: calc(6 * var(--u)) 0 0 calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); color: #667781; display: inline-flex; gap: calc(3 * var(--u)); align-items: center; }
.wa-b em svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #53bdeb; }
.wa-b strong { display: block; font-weight: 600; margin-bottom: calc(2 * var(--u)); }
.wa-grp { align-self: flex-start; max-width: 84%; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.wa-grp .wa-b { max-width: none; }
.wa-btn { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; color: #00a884; font-size: calc(13.5 * var(--u)); font-weight: 500; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.wa-btn svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.wa-btn.list { border-top: 1px solid #e9edef; border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); margin-top: calc(-3 * var(--u)); }
.wa-loc { width: 100%; height: calc(96 * var(--u)); border-radius: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); background: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) 0 0 / calc(22 * var(--u)) calc(22 * var(--u)), linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px) 0 0 / calc(22 * var(--u)) calc(22 * var(--u)), linear-gradient(160deg, #e8f0e3 0 40%, #cfe3f2 40% 46%, #e9eef0 46%); position: relative; }
.wa-loc::after { content: ''; position: absolute; left: 50%; top: 42%; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50% 50% 50% 0; background: #e5342b; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.wa-bar { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); background: #f0f2f5; }
.wa-bar span { flex: 1; height: calc(40 * var(--u)); border-radius: 100px; background: #fff; display: flex; align-items: center; padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: #8696a0; }
.wa-bar i { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #00a884; color: #fff; }
.wa-bar i svg { width: 48%; height: 48%; }

/* ---------------------------------------------------------------------
   Instagram direct messages (light)
   --------------------------------------------------------------------- */
.ig { display: flex; flex-direction: column; background: #fff; color: #000; }
.ig .ph-status { color: #000; }
.ig-top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid #efefef; }
.ig-top .back { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ig-ava { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; padding: calc(2 * var(--u)); background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.ig-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: calc(2 * var(--u)) solid #fff; box-sizing: border-box; }
.ig-top b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; }
.ig-top small { display: block; font-size: calc(12 * var(--u)); color: #737373; }
.ig-top .act { margin-left: auto; display: flex; gap: calc(18 * var(--u)); }
.ig-top .act svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ig-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.ig-b { max-width: 76%; font-size: calc(14 * var(--u)); line-height: 1.38; padding: calc(9 * var(--u)) calc(13 * var(--u)); border-radius: calc(20 * var(--u)); }
.ig-b.out { align-self: flex-end; color: #fff; background: linear-gradient(160deg, #7638fa, #3797f0); }
.ig-b.in { align-self: flex-start; background: #efefef; }
.ig-card { align-self: flex-start; width: 74%; border-radius: calc(18 * var(--u)); overflow: hidden; border: 1px solid #dbdbdb; background: #fff; }
.ig-card .im { height: calc(96 * var(--u)); background-size: cover; background-position: center 35%; }
.ig-card .tx { padding: calc(9 * var(--u)) calc(12 * var(--u)); }
.ig-card .tx b { display: block; font-size: calc(14 * var(--u)); }
.ig-card .tx span { font-size: calc(12.5 * var(--u)); color: #737373; }
.ig-card .bt { border-top: 1px solid #efefef; text-align: center; padding: calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: #0095f6; }
.ig-quick { display: flex; gap: calc(6 * var(--u)); justify-content: flex-end; flex-wrap: wrap; padding: calc(4 * var(--u)) 0; }
.ig-quick span { font-size: calc(13 * var(--u)); font-weight: 600; padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: 100px; border: 1px solid #dbdbdb; color: #000; }
.ig-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(6 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)); border-radius: 100px; background: #efefef; font-size: calc(14 * var(--u)); color: #737373; }
.ig-bar i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #3797f0; color: #fff; }
.ig-bar i svg { width: 52%; height: 52%; }
.ig-bar span { flex: 1; }

/* ---------------------------------------------------------------------
   Toya · fullscreen with a live conversation and the test drive form
   --------------------------------------------------------------------- */
.st-chat { position: absolute; left: 1.7%; top: 2.6%; bottom: 2.7%; width: 34.8%; display: flex; flex-direction: column; border-radius: calc(22 * var(--u)); overflow: hidden; background: linear-gradient(180deg, rgba(14,14,18,0.96), rgba(6,6,9,0.98)); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.st-head { position: relative; flex-shrink: 0; aspect-ratio: 501 / 206; }
.st-head img { width: 100%; height: 100%; object-fit: cover; }
.st-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); }
.st-form { display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; color: #111; }
.st-form h5 { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: calc(14.5 * var(--u)); font-weight: 600; }
.st-steps { display: flex; gap: calc(4 * var(--u)); }
.st-steps i { flex: 1; height: calc(3 * var(--u)); border-radius: 3px; background: #ececf0; position: relative; overflow: hidden; }
.st-steps i::after { content: ''; position: absolute; inset: 0; background: #eb0a1e; transform: scaleX(0); transform-origin: left; }
[data-run].is-run .st-steps i::after, .is-run .st-steps i::after { animation: lxStep 0.5s ease var(--d, 0s) forwards; }
.st-form .lx-field { padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); border-radius: calc(10 * var(--u)); background: #f6f6f8; border: 1px solid #ececf0; }
.st-form .lx-field small { font-size: calc(9 * var(--u)); color: #8a8a93; }
.st-form .lx-val { font-size: calc(13 * var(--u)); color: #111; margin-top: 0; }
.st-form .lx-by { font-size: calc(9.5 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); right: calc(8 * var(--u)); color: #c0101f; background: rgba(235,10,30,0.08); }
.st-form .lx-row { gap: calc(7 * var(--u)); }
.st-form .lx-consent { font-size: calc(10.5 * var(--u)); color: #5f5f67; gap: calc(7 * var(--u)); }
.st-form .lx-box { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(4 * var(--u)); border-color: rgba(0,0,0,0.25); }
[data-run].is-run .st-form .lx-box, .is-run .st-form .lx-box { animation-name: stCheck; }
@keyframes stCheck { to { background: #eb0a1e; border-color: #eb0a1e; color: #fff; } }
.st-form .lx-send { height: calc(38 * var(--u)); font-size: calc(13 * var(--u)); background: #eb0a1e; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(235,10,30,0.3); }
.st-done { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(61,220,132,0.12); border: 1px solid rgba(61,220,132,0.35); font-size: calc(12.5 * var(--u)); color: #c9f5dc; }
.st-done i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #3ddc84; color: #06240f; flex-shrink: 0; }
.st-done i svg { width: 60%; height: 60%; }
.st-foot { padding: 0 calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.st-foot .sc-chips span { background: transparent; border: 1px solid rgba(255,255,255,0.35); }
.st-legal { display: flex; justify-content: space-between; font-size: calc(10.5 * var(--u)); color: #8d8d96; padding: 0 0 calc(10 * var(--u)); }
.st-legal span { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.st-legal img { height: calc(10 * var(--u)); opacity: 0.75; }

/* Toya · mobile: a bottom sheet over the live view */
.stm-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(9 * var(--u)); padding: calc(18 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0; background: linear-gradient(180deg, rgba(10,10,14,0.55), rgba(8,8,12,0.96) 22%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.stm-car { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); }
.stm-car img { width: 100%; height: auto; }
.stm-car small { display: block; font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8a95; }
.stm-car b { display: block; font-size: calc(14 * var(--u)); margin: calc(2 * var(--u)) 0 calc(8 * var(--u)); }
.stm-car em { font-style: normal; display: inline-flex; font-size: calc(11.5 * var(--u)); font-weight: 600; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 100px; background: #eb0a1e; color: #fff; }

/* ---------------------------------------------------------------------
   Toya · owner's manual (desktop)
   --------------------------------------------------------------------- */
.so { background: #2a2b30; }
.so .st-chat { width: 30%; }
.so-view { position: absolute; left: 33.4%; top: 2.6%; right: 1.7%; bottom: 2.7%; display: flex; flex-direction: column; border-radius: calc(16 * var(--u)); overflow: hidden; background: #3b3d42; }
.so-bar { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); background: #2c2e33; font-size: calc(13 * var(--u)); color: #d0d0d6; }
.so-bar span { padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,0.08); }
.so-bar b { margin-left: auto; font-weight: 500; }
.so-pages { position: relative; flex: 1; display: grid; place-items: center; }
.so-pages > * { grid-area: 1 / 1; height: 88%; aspect-ratio: 0.72; border-radius: calc(4 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.45); }
.so-pages > img { object-fit: cover; }
.so-page { z-index: 2; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(34 * var(--u)) calc(30 * var(--u)); background: #fbfbf9; color: #111; overflow: hidden; }
.so-page small { font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c4122f; }
.so-page b { font-size: calc(20 * var(--u)); line-height: 1.2; margin-bottom: calc(6 * var(--u)); }
.so-page > i, .so-hl > i { display: block; width: 100%; height: calc(8 * var(--u)); border-radius: 4px; background: #e2e2e6; }
.so-hl { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) calc(-10 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(235,10,30,0.08); box-shadow: inset calc(4 * var(--u)) 0 0 #eb0a1e; }
.so-hl > i { background: #f2b3b9; }
.so-num { position: absolute; z-index: 3; right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: #d0d0d6; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 100px; background: rgba(0,0,0,0.35); }

/* ---------------------------------------------------------------------
   Defne · desktop panel on the Rafine website, and the phone sheet
   --------------------------------------------------------------------- */
.sd-panel { position: absolute; top: 2.6%; right: 1.6%; bottom: 2.6%; width: 30.5%; display: flex; flex-direction: column; border-radius: calc(20 * var(--u)); overflow: hidden; background: #fff; color: #111; box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,0.3); }
.sd-head { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid rgba(0,0,0,0.06); }
.sd-head img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; object-fit: cover; }
.sd-head b { display: block; font-size: calc(15 * var(--u)); }
.sd-head small { font-size: calc(11.5 * var(--u)); color: #7c7c83; }
.sd-head .tc-wave { margin-left: auto; height: calc(16 * var(--u)); }
.sd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(9 * var(--u)); padding: calc(14 * var(--u)); }
.sd-b { max-width: 88%; font-size: calc(13.5 * var(--u)); line-height: 1.45; padding: calc(9 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); }
.sd-b.u { align-self: flex-end; background: #15151b; color: #fff; border-bottom-right-radius: calc(4 * var(--u)); }
.sd-b.d { align-self: flex-start; background: #f0f0f4; color: #222; border-bottom-left-radius: calc(4 * var(--u)); }
.sd-form { display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); border: 1px solid rgba(0,0,0,0.08); background: #fbfaf7; }
.sd-form h5 { margin: 0 0 calc(2 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.sd-form h5 em { color: #8a8a90; font-weight: 400; }
.sd-form .lx-field { padding: calc(5 * var(--u)) 0 calc(6 * var(--u)); border: 0; border-bottom: 1px solid rgba(0,0,0,0.12); border-radius: 0; background: transparent; }
.sd-form .lx-field small { font-size: calc(8.5 * var(--u)); }
.sd-form .lx-val { font-size: calc(12.5 * var(--u)); color: #111; margin-top: 0; }
.sd-form .lx-by { font-size: calc(9 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); right: 0; color: #4c4fd7; background: rgba(76,79,215,0.08); }
.sd-form .lx-consent { font-size: calc(10 * var(--u)); color: #66666e; gap: calc(7 * var(--u)); }
.sd-form .lx-box { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(4 * var(--u)); border-color: rgba(0,0,0,0.3); }
.sd-form .lx-send { height: calc(34 * var(--u)); font-size: calc(12 * var(--u)); background: #15151b; box-shadow: none; align-self: flex-start; padding: 0 calc(16 * var(--u)); }
.sd-foot { display: flex; gap: calc(8 * var(--u)); align-items: center; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-top: 1px solid rgba(0,0,0,0.06); }
.sd-foot span { flex: 1; height: calc(32 * var(--u)); border-radius: 100px; background: #f2f2f5; font-size: calc(12 * var(--u)); color: #9a9aa2; display: flex; align-items: center; padding: 0 calc(12 * var(--u)); }
.sd-foot i { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #15151b; }
.sd-ring { position: absolute; border: calc(3 * var(--u)) solid #5a5df0; border-radius: calc(14 * var(--u)); box-shadow: 0 0 0 calc(7 * var(--u)) rgba(90,93,240,0.18), 0 0 calc(34 * var(--u)) rgba(90,93,240,0.45); }
.sd-toast { position: absolute; top: calc(18 * var(--u)); left: calc(18 * var(--u)); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: 100px; background: rgba(14,14,20,0.86); color: #fff; font-size: calc(12.5 * var(--u)); font-weight: 500; }
.sd-toast::before { content: ''; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #6a6cff; box-shadow: 0 0 8px #6a6cff; }
.sdm-sheet { position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255,255,255,0.97); color: #111; box-shadow: 0 calc(-8 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,0.25); }
.sdm-sheet .sd-head { padding: 0 0 calc(8 * var(--u)); }

/* staged motion inside screens */
@media (prefers-reduced-motion: reduce) {
  [data-run] [data-in] { opacity: 1 !important; animation: none !important; }
  [data-run] [data-in="typing"] { display: none; }
  [data-run] .lx-val { animation: none !important; clip-path: none !important; }
}

/* =====================================================================
   Voice, inside the product: the kiosk in a live conversation, Toya's
   web in a voice call, Defne's panel speaking. Words light up as spoken.
   ===================================================================== */
.kw { color: rgba(255,255,255,0.42); transition: color 0.2s ease; }
.is-run .kw { animation: kwOn 0.25s ease var(--k, 0s) forwards; }
@keyframes kwOn { to { color: #fff; } }
.tv-ag.light .kw { color: rgba(17,17,17,0.35); }
.is-run .tv-ag.light .kw { animation-name: kwOnL; }
@keyframes kwOnL { to { color: #111; } }
@media (prefers-reduced-motion: reduce) { .kw, .tv-ag.light .kw { color: inherit; animation: none !important; } }

/* --- Talya kiosk, talking (1080 x 1920 units) --- */
.skv { background: #1b1b20; }
.skv-poster, .skv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 50% 6%; }
.skv-vid { z-index: 1; }
.skv::after { content: ''; position: absolute; inset: 46% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(8,10,16,0.55) 30%, rgba(8,10,16,0.82)); }
.skv > *:not(video):not(img) { z-index: 2; }
.skv-flags { position: absolute; left: 0; top: 27%; display: flex; flex-direction: column; gap: calc(52 * var(--u)); }
.kf { display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(84 * var(--u)); margin-left: calc(-14 * var(--u)); border-radius: 0 100px 100px 0; background: rgba(40,42,50,0.35); border: 1px solid rgba(255,255,255,0.14); border-left: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kf svg { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255,255,255,0.75); }
.kf.on { width: calc(132 * var(--u)); background: rgba(255,255,255,0.22); }
.skv-vol { position: absolute; right: calc(24 * var(--u)); top: 26%; height: 23%; width: calc(90 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); padding: calc(26 * var(--u)) 0; border-radius: 100px; background: rgba(40,42,50,0.35); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.skv-vol i { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.skv-vol .tr { flex: 1; width: calc(8 * var(--u)); border-radius: 10px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.skv-vol .tr b { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #4a8df6; }
.skv-vol small { font-size: calc(22 * var(--u)); }
.skv-ctrl { position: absolute; left: 25.5%; right: 25%; top: 53.6%; display: flex; align-items: center; gap: calc(22 * var(--u)); }
.skv-start { flex: 1; position: relative; display: grid; height: calc(84 * var(--u)); }
.skv-start > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); border-radius: 100px; font-size: calc(30 * var(--u)); font-weight: 600; color: #fff; }
.st-listen { background: linear-gradient(90deg, rgba(44,160,92,0.92), rgba(68,196,118,0.92)); box-shadow: 0 0 calc(40 * var(--u)) rgba(61,220,132,0.45); }
.st-listen svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.st-listen .pulse { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #fff; animation: skvPulse 1.2s ease-in-out infinite; }
@keyframes skvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 50% { box-shadow: 0 0 0 calc(12 * var(--u)) rgba(255,255,255,0); } }
.st-speak { background: rgba(28,30,38,0.72); border: 1px solid rgba(61,220,132,0.6); box-shadow: inset 0 0 calc(30 * var(--u)) rgba(61,220,132,0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.st-speak .eq { color: #3ddc84; height: calc(34 * var(--u)); gap: calc(5 * var(--u)); }
.st-speak .eq i { width: calc(6 * var(--u)); }
.skv-rf { width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(40,42,50,0.5); border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.skv-rf svg { width: 50%; height: 50%; }
.skv-in { position: absolute; left: 13%; right: 13%; top: 59.6%; height: calc(84 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10 * var(--u)) 0 calc(32 * var(--u)); border-radius: 100px; background: rgba(40,42,50,0.55); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: calc(24 * var(--u)); color: rgba(255,255,255,0.8); }
.skv-in b { height: calc(64 * var(--u)); padding: 0 calc(38 * var(--u)); display: grid; place-items: center; border-radius: 100px; background: #2f6fd8; color: #fff; font-weight: 600; }
.skv-quick { position: absolute; left: 13%; right: 13%; top: 65.8%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)) calc(20 * var(--u)); }
.skv-quick span { height: calc(92 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); border-radius: 100px; font-size: calc(24 * var(--u)); color: #fff; background: rgba(47,111,216,0.55); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.skv-quick svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.skv-talk { position: absolute; left: 8%; right: 8%; top: 35.5%; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.skv-me { align-self: flex-end; margin: 0; max-width: 78%; font-size: calc(30 * var(--u)); line-height: 1.35; padding: calc(16 * var(--u)) calc(24 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) calc(8 * var(--u)) calc(30 * var(--u)); color: #fff; background: rgba(20,22,30,0.6); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.skv-ag { align-self: flex-start; margin: 0; max-width: 86%; font-size: calc(34 * var(--u)); line-height: 1.38; font-weight: 500; padding: calc(18 * var(--u)) calc(26 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(8 * var(--u)); background: rgba(14,16,24,0.62); border: 1px solid rgba(61,220,132,0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.skv-panel { z-index: 3 !important; }
.skv-pow { position: absolute; left: 0; right: 0; bottom: 1.6%; display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); font-size: calc(20 * var(--u)); color: rgba(255,255,255,0.75); }
.skv-pow img { height: calc(20 * var(--u)); }

/* --- Toya, web, in a voice call (1440 units) --- */
.tv-stage { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.tv-stage img, .tv-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.tv-stage video { z-index: 1; }
.tv-chat { z-index: 3; }
.tv-call { position: absolute; left: 4%; right: 4%; bottom: 6%; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u)); border-radius: 100px; background: rgba(12,12,16,0.78); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: calc(13 * var(--u)); color: #fff; }
.tv-call b { font-weight: 600; }
.tv-call .eq { color: #ff4d5e; height: calc(16 * var(--u)); }
.tv-call em { margin-left: auto; font-style: normal; color: #b8b8c0; font-variant-numeric: tabular-nums; }
.tv-dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 calc(10 * var(--u)) #ff4d5e; animation: csPulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.tv-end { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #e5342b; color: #fff; flex-shrink: 0; }
.tv-end svg { width: 60%; height: 60%; }
.tv-me { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.45; color: #e9e9ee; text-align: right; }
.tv-me .sc-tag { color: #c9c9d2; background: rgba(255,255,255,0.08); }
.tv-ag { align-self: flex-start; max-width: 96%; font-size: calc(16 * var(--u)); line-height: 1.5; font-weight: 500; }
.tv-who { display: block; font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff8a95; margin-bottom: calc(4 * var(--u)); }
.tv-car { margin-top: calc(2 * var(--u)); }
.tv-car small { color: #9a9aa3 !important; letter-spacing: 0.06em !important; }
.tv-me.light { color: #333; }
.tv-me.light .sc-tag { color: #4c4fd7; background: rgba(76,79,215,0.08); }
.tv-ag.light { color: #111; }
.tv-ag.light .tv-who { color: #4c4fd7; }

/* --- Defne, speaking (panel on the Rafine site) --- */
.dv-voice .dvv-face { position: relative; aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.dv-voice .dvv-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; animation: dvvBreath 7s ease-in-out infinite; }
@keyframes dvvBreath { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.06); } }
.dvv-bar { position: absolute; left: 4%; right: 4%; bottom: 6%; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(14 * var(--u)); border-radius: 100px; background: rgba(255,255,255,0.86); color: #111; font-size: calc(12.5 * var(--u)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dvv-bar .tv-dot { background: #4c4fd7; box-shadow: 0 0 calc(10 * var(--u)) #4c4fd7; }
.dvv-bar .eq { color: #4c4fd7; height: calc(14 * var(--u)); margin-left: auto; }
.dvv-bar .tv-end { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
@media (prefers-reduced-motion: reduce) { .dv-voice .dvv-face img { animation: none; } }
.cx-pane > .dv { width: 100%; }
.skv-ag { font-size: calc(31 * var(--u)); }

/* kiosk in conversation: like the real kiosk, the quick buttons step aside and
   the transcript runs under the input, newest first; the face stays clear */
.skv-talk { top: 65.6%; left: 9%; right: 9%; }
.skv-quick { animation: none; }
.is-run .skv-quick { animation: skvAway 0.4s ease var(--qa, 0.3s) forwards; }
@keyframes skvAway { to { opacity: 0; transform: translateY(10px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .skv-quick { display: none; } }
.dv-voice .dvv-face { aspect-ratio: 4 / 3.4; }
.dvv-plan { display: grid; grid-template-columns: calc(46 * var(--u)) 1fr auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); border: 1px solid rgba(0,0,0,0.08); background: #faf8f4; }
.dvv-plan .pl { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: calc(14 * var(--u)); background: #efe7da; color: #3a3128; }
.dvv-plan b { display: block; font-size: calc(13 * var(--u)); }
.dvv-plan small { font-size: calc(11 * var(--u)); color: #77777e; }
.dvv-plan em { font-style: normal; font-size: calc(11 * var(--u)); font-weight: 600; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 100px; background: #15151b; color: #fff; }
/* the live Talya avatar's own talking clip is framed like the kiosk: no extra zoom */
.skv-poster, .skv-vid { transform: none; object-position: 50% 0; }

/* =====================================================================
   Talya kiosk v2: zoomed out, a two-turn conversation that keeps moving
   ===================================================================== */
.sc [data-life] { opacity: 0; }
.is-run .sc [data-life], .is-run[data-run] .sc [data-life] { animation: inUp 0.45s cubic-bezier(0.16,1,0.3,1) var(--d, 0s) both, outFade 0.4s ease var(--e, 99s) forwards; }
.skv2 .skv-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); filter: saturate(1.1) brightness(0.8); }
.skv2::after { inset: 34% 0 0; background: linear-gradient(180deg, transparent, rgba(8,10,16,0.5) 28%, rgba(8,10,16,0.8)); }
.skv2 .skv-cam { position: absolute; z-index: 1; left: 0; right: 0; top: 2.5%; aspect-ratio: 3 / 2; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 72%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.skv2 .skv-cam > img, .skv2 .skv-cam > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skv2 .skv-cam video.skv-tv, .skv2 .skv-cam video.skv-tv.is-playing { opacity: 0; }
.is-run .skv2 .skv-cam video.skv-tv.is-playing, .is-run.skv2 .skv-cam video.skv-tv.is-playing { animation: skvTalk 14s linear var(--t0, 0s) both; }
@keyframes skvTalk { 0%, 11% { opacity: 0; } 13%, 48% { opacity: 1; } 50%, 57% { opacity: 0; } 59%, 100% { opacity: 1; } }
.skv2 .skv-flags { top: 9%; }
.skv2 .skv-vol { top: 8%; height: 20%; }
.skv2 .skv-talk { top: 41.5%; gap: calc(12 * var(--u)); }
.skv2 .skv-me { font-size: calc(26 * var(--u)); }
.skv2 .skv-ag { font-size: calc(28 * var(--u)); }
.skv2 .skv-ctrl { top: 57%; }
.skv2 .skv-in { top: 62.6%; }
.skv2 .skv-quick { top: 68.6%; }
.skv2 .sk-panel { top: 67.4%; bottom: 5.2%; gap: calc(18 * var(--u)); padding: calc(24 * var(--u)) calc(26 * var(--u)); }
.skv2 .skv-start > span { grid-area: 1 / 1; }
.skv-map { width: 100%; height: auto; display: block; border-radius: calc(20 * var(--u)); background: #f4f2ee; }
.skv-map .m-floor { fill: #f4f2ee; stroke: #d9d3c8; stroke-width: 2; }
.skv-map .m-hall { fill: none; stroke: #ddd6ca; stroke-width: 14; stroke-linecap: round; }
.skv-map .m-gates rect { fill: #e7e1d6; }
.skv-map .m-t { font: 600 9px var(--font-main); fill: #6d655a; text-anchor: middle; }
.skv-map .m-tl { text-anchor: middle; }
.skv-map .m-route { fill: none; stroke: #2f6fd8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 7; stroke-dashoffset: 0; }
.is-run .skv-map .m-route { animation: skvRoute 1.6s linear infinite; }
@keyframes skvRoute { to { stroke-dashoffset: -30; } }
.skv-map .m-you { fill: #2f6fd8; stroke: #fff; stroke-width: 3; }
.skv-map .m-pin { fill: #e5342b; stroke: #fff; stroke-width: 3; }
.skv-plan .sk-qr { padding: calc(12 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
  .sc [data-life="early"] { display: none; }
  .sc [data-life="late"] { opacity: 1; animation: none !important; }
  .skv2 .skv-cam video.skv-tv { display: none; }
}

/* the kiosk reads as a standing totem: screen, lower body with a light strip, plinth, floor shadow */
.dv-kiosk .dv-in { padding: 4.2cqw 4.2cqw 30cqw; border-radius: 6cqw 6cqw 3cqw 3cqw; background: linear-gradient(175deg, #34343e 0%, #15151b 34%, #0b0b0f 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1.2cqw 2cqw rgba(255,255,255,0.05), 0 6cqw 14cqw rgba(0,0,0,0.55); }
.dv-kiosk .dv-in::before { content: ''; position: absolute; top: 1.6cqw; left: 50%; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 40% 35%, #4a4f63, #0c0c10 70%); box-shadow: 0 0 0 0.6cqw rgba(255,255,255,0.05); }
.dv-kiosk .dv-in::after { bottom: 12cqw; width: 30cqw; height: 1.4cqw; }
.dv-kiosk .dv-screen { box-shadow: 0 0 0 0.6cqw #050507; }
.dv-kiosk .dv-grille { position: absolute; left: 50%; bottom: 19cqw; width: 44cqw; height: 5cqw; transform: translateX(-50%); border-radius: 3cqw; background-image: radial-gradient(rgba(255,255,255,0.13) 0.55cqw, transparent 0.65cqw); background-size: 2.2cqw 2.2cqw; opacity: 0.8; }
.dv-kiosk .dv-foot { width: 78%; height: 6cqw; margin: -0.5cqw auto 0; border-radius: 0 0 1.4cqw 1.4cqw; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #1d1d24, #09090c); box-shadow: none; }
.dv-kiosk .dv-foot::after { width: 150%; height: 10cqw; margin: 1cqw 0 0 -25%; background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent); }
/* floor-plan step: map and QR side by side so nothing spills */
.skv2 .skv-plan { display: grid; grid-template-columns: 1.75fr 1fr; grid-template-rows: auto 1fr; align-items: start; }
.skv2 .skv-plan .sk-top { grid-column: 1 / -1; }
.skv2 .skv-plan .skv-map { grid-column: 1; }
.skv2 .skv-plan .sk-qr { grid-column: 2; grid-template-columns: 1fr; gap: calc(12 * var(--u)); text-align: center; align-self: stretch; align-content: center; }
.skv2 .skv-plan .sk-qr img { width: 72%; margin: 0 auto; }
.skv2 .skv-plan .sk-qr b { font-size: calc(22 * var(--u)); }
.skv2 .skv-plan .sk-qr span span { font-size: calc(18 * var(--u)); }

/* Messenger (light), shared by Channels and the Toya case (moved from page-channels.css, 18 Oct 2026) */
.pg-channels-msg { display: flex; flex-direction: column; background: #fff; color: #050505; }
.pcm-top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid #ececec; }
.pcm-top .back { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #0a7cff; }
.pcm-ava { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; object-fit: cover; }
.pcm-top b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; }
.pcm-top small { display: block; font-size: calc(12 * var(--u)); color: #65676b; }
.pcm-top .act { margin-left: auto; display: flex; gap: calc(18 * var(--u)); color: #0a7cff; }
.pcm-top .act svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.pcm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.pcm-b { max-width: 78%; font-size: calc(14 * var(--u)); line-height: 1.38; padding: calc(9 * var(--u)) calc(13 * var(--u)); border-radius: calc(19 * var(--u)); }
.pcm-b.out { align-self: flex-end; color: #fff; background: linear-gradient(170deg, #a033ff, #0a7cff); }
.pcm-b.in { align-self: flex-start; background: #f0f0f0; }
.pg-channels-msg .tx-typing { background: #f0f0f0; }
.pg-channels-msg .tx-typing i { background: #8a8d91; }
.pcm-card { align-self: flex-start; width: 76%; border-radius: calc(18 * var(--u)); overflow: hidden; background: #f0f0f0; }
.pcm-card .im { height: calc(104 * var(--u)); background-size: cover; background-position: center 60%; }
.pcm-card .tx { padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
.pcm-card .tx b { display: block; font-size: calc(14 * var(--u)); }
.pcm-card .tx span { font-size: calc(12.5 * var(--u)); color: #65676b; }
.pcm-card .bt { border-top: 1px solid #e2e2e2; text-align: center; padding: calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: #0a7cff; background: #fff; }
.pcm-quick { display: flex; gap: calc(6 * var(--u)); justify-content: flex-end; flex-wrap: wrap; padding: calc(4 * var(--u)) 0; }
.pcm-quick span { font-size: calc(13 * var(--u)); font-weight: 600; padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: 100px; border: 1px solid #0a7cff; color: #0a7cff; }
.pcm-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u)); }
.pcm-bar i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; color: #0a7cff; font-style: normal; }
.pcm-bar i.pl { border-radius: 50%; background: #0a7cff; color: #fff; font-size: calc(20 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.pcm-bar i svg { width: 80%; height: 80%; }
.pcm-bar span { flex: 1; height: calc(36 * var(--u)); border-radius: 100px; background: #f0f0f0; display: flex; align-items: center; padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: #65676b; }