/* Product demonstrations — localized examples, isolated from hero and live demo. */
#situations .scene-example[data-scene-layout=devices]{grid-template-columns:1fr;gap:34px}
#situations [data-scene-layout=devices] .scene-story{max-width:780px}
#situations [data-scene-layout=devices] .scene-story h3{font-size:clamp(26px,3.1vw,42px);letter-spacing:.035em;max-width:28ch}
#situations [data-scene-layout=devices] .product-demo{scroll-margin-top:18px}
#situations .product-route{display:flex;align-items:center;gap:22px;margin-top:20px;padding:0 3px;color:#e4eeeb}
#situations .product-route>span:not(.route-arrow){display:flex;flex-direction:column;gap:5px;min-width:0}
#situations .product-route small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8fa6a5}
#situations .product-route bdi{font-size:15px;font-weight:600;overflow-wrap:anywhere}
#situations .route-arrow{font-size:25px;color:#5bcda8}
#situations .product-call-name{position:absolute;top:47.5%;left:3.5%;right:3.5%;height:3%;background:#090d0f;color:#e9f0f2;padding-inline:4px;font-size:10px;line-height:1.5}
#situations [data-scene-layout=devices] .product-phone-agent .product-app-capture::before{content:none}
#situations .product-message p[lang]{overflow-wrap:anywhere}
#situations .product-kind-recruitment .product-phone-buyer .product-app-capture::after{content:"";position:absolute;inset:12.7% 3% 52.5%;background:url('/meeting/people/claire-tall-600.webp') center 32%/cover no-repeat;border-radius:6px 6px 0 0}
#situations .product-kind-recruitment{background:radial-gradient(ellipse at 30% 45%,#284d5d66,transparent 65%),linear-gradient(135deg,#1c272c,#0b1013 80%)}
#situations .device-logo{width:23px;height:23px;flex:none;display:inline-block;background:url('/img/tradulive-brand.webp') center/contain no-repeat}
#situations .device-chrome{height:31px;display:flex;align-items:center;gap:14px;padding:0 15px;background:#1b2228;border-bottom:1px solid #ffffff20;color:#b5c0c4;font-size:10px;line-height:1.4}
#situations .device-chrome>span{font-size:8px;letter-spacing:3px;color:#78868c}
#situations .device-chrome b{font-weight:500;letter-spacing:.04em}
/* Tourism: a holiday property page with the branded conversation widget. */
#situations .product-tourism{display:block;padding:0 8px}
#situations .product-browser{position:relative;width:100%;min-height:565px;background:#e9eae4;border:1px solid #617079;border-radius:15px;overflow:hidden;box-shadow:0 25px 45px #0006;color:#1d3339}
#situations .stay-cover{position:relative;height:265px;overflow:hidden;background:linear-gradient(#91c6ce,#d9e9dd 70%,#e2ccb1 70%)}
#situations .stay-sea{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(170deg,#508eaa,#aac9ca)}
#situations .stay-sun{position:absolute;right:15%;top:28px;width:55px;height:55px;border-radius:50%;background:#ffe8b0;box-shadow:0 0 65px #fff1c9}
#situations .stay-house{position:absolute;width:190px;height:140px;left:9%;bottom:29px;border-radius:35px 8px 0 0;background:#f6f3e9;box-shadow:inset -19px -5px 0 #d8d5cd,13px 16px 22px #22465445}
#situations .stay-house::before{content:"";position:absolute;left:-22px;bottom:0;width:78px;height:75px;background:#fbfaf4;border-radius:18px 18px 0 0;box-shadow:inset -8px 0 #e0dbd2}
#situations .stay-house::after{content:"";position:absolute;right:23px;bottom:0;width:40px;height:73px;border-radius:22px 22px 0 0;background:#39748a;border:5px solid #e6e1d7}
#situations .stay-house i{position:absolute;top:27px;left:23px;width:23px;height:32px;border-radius:12px 12px 0 0;background:#2f6679}
#situations .stay-house i:nth-child(2){left:65px}
#situations .stay-house i:nth-child(3){left:108px}
#situations .stay-name{position:absolute;left:22px;top:20px;display:flex;flex-direction:column;gap:6px;color:#24434a;text-shadow:0 1px 0 #ffffff44}
#situations .stay-name>b{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#situations .stay-name>span{font-size:28px;line-height:1.2;font-weight:600}
#situations .stay-info{display:flex;justify-content:space-between;gap:20px;max-width:45%;padding:21px;font-size:12px}
#situations .stay-info>span{white-space:nowrap;color:#5c7774;font-size:19px}
#situations .stay-widget{position:absolute;width:310px;right:18px;bottom:18px;border-radius:15px;background:#11191f;box-shadow:0 15px 42px #0005;color:#eef4f4;border:1px solid #ffffff2b;overflow:hidden}
#situations .widget-head{display:flex;align-items:center;gap:8px;padding:15px 14px;border-bottom:1px solid #ffffff20;font-size:13px}
#situations .widget-head>span:last-child{margin-left:auto;font-size:11px;color:#5cdaad}
#situations .widget-message-list{padding:17px 15px;min-height:226px;display:flex;flex-direction:column;gap:12px}
#situations .widget-message-list .product-message{font-size:13px;line-height:1.45;padding:0;border:none}
#situations .widget-message-list .product-message[data-product-phase="1"]{padding:12px;border-radius:9px;background:#284f424d;border:1px solid #57b18a40}
#situations .widget-compose{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid #ffffff20;background:#19262b;font-size:11px;line-height:1.4;color:#b3c6c8}
#situations .widget-compose>span:last-child{margin-left:auto;font-size:21px;color:#5eddb4}
#situations .product-tourism>.product-bridge{left:24%;top:74%}
/* Face-to-face: the listening screen, one shared phone and two speakers. */
#situations .product-inperson{min-height:635px;padding-bottom:25px}
#situations .listening-phone{width:53%;max-width:280px;transform:rotate(-1deg);z-index:1}
#situations .listen-top{display:flex;justify-content:space-between;padding:16px 19px 18px;font-size:11px;color:#dde7e9}
#situations .listen-brand{display:flex;align-items:center;gap:7px;padding:0 13px 16px;font-size:15px}
#situations .listen-languages{display:flex;align-items:center;gap:12px;border-block:1px solid #ffffff18;padding:10px 12px;font-size:11px}
#situations .listen-live{font-size:9px;color:#59c9a6;background:#28443d;border-radius:20px;padding:5px 7px}
#situations .listen-messages{padding:18px 13px;display:flex;flex-direction:column;gap:14px}
#situations .listen-messages .product-message{font-size:15px;line-height:1.45;padding:0;border:none}
#situations .listen-messages .listening-original{font-size:11px;color:#a6b7bb}
#situations .listen-bottom{position:absolute;bottom:18px;left:12px;right:12px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:28px;background:#58caa3;color:#06271a;padding:14px 8px;font-size:14px}
#situations .listen-wave{font-size:12px;letter-spacing:-2px}
#situations .inperson-person{position:absolute;max-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;top:25%;font-size:12px;line-height:1.5;color:#b7c9c8}
#situations .host-person{left:0}
#situations .visitor-person{right:0;top:51%}
#situations .person-avatar{width:68px;height:68px;border-radius:50%;background:url('/meeting/people/nikos-192.webp') center/cover;border:2px solid #5bdbaf80;box-shadow:0 8px 25px #0004}
#situations .visitor-person .person-avatar{background-image:url('/meeting/people/claire-tall-360.webp')}
#situations .product-inperson>.product-bridge{left:76%;top:22%;width:69px;height:75px}
/* Meeting: branded browser inside a laptop, with participant video and transcript. */
#situations .product-meeting{display:block;position:relative;padding-block:15px 25px}
#situations .product-laptop{margin:0;width:100%;position:relative}
#situations .laptop-screen{border:6px solid #3b464e;border-radius:18px 18px 7px 7px;overflow:hidden;background:#0d1217;box-shadow:0 25px 50px #0006}
#situations .laptop-base{height:14px;margin:0 -9px;border-radius:0 0 18px 18px;background:linear-gradient(#7c858b,#41494e);position:relative}
#situations .laptop-base::before{content:"";display:block;margin:auto;width:22%;height:5px;background:#323d45;border-radius:0 0 8px 8px}
#situations .meeting-demo-head{display:flex;align-items:center;gap:7px;padding:12px;border-bottom:1px solid #ffffff17;font-size:12px}
#situations .meeting-demo-head>span:not(.device-logo){font-size:10px;color:#a9b9bd}
#situations .meeting-demo-head .meeting-status{margin-left:auto;color:#66dbb1!important}
#situations .meeting-demo-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}
#situations .meeting-person{position:relative;aspect-ratio:1.18;overflow:hidden;border-radius:7px;border:1px solid #6ccaa26b}
#situations .meeting-person-photo{display:block;width:100%;height:100%;background:center 30%/cover}
#situations .photo-nikos{background-image:url('/meeting/people/nikos-tall-360.webp')}
#situations .photo-emma{background-image:url('/meeting/people/emma-tall-360.webp')}
#situations .photo-claire{background-image:url('/meeting/people/claire-tall-360.webp')}
#situations .meeting-person-label{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:5px;padding:7px;background:#101619c9;font-size:9px}
#situations .meeting-person-label>bdi:last-child{color:#5ed7ad}
#situations .meeting-demo-transcript{margin:0 10px;padding:13px;background:#182027;border:1px solid #ffffff18;border-radius:7px;display:flex;flex-direction:column;gap:10px;min-height:230px}
#situations .meeting-demo-transcript .product-message{font-size:14px;line-height:1.5;border:none;padding:0}
#situations .meeting-demo-transcript .meeting-original{font-size:11px;color:#9bafb7}
#situations .meeting-demo-controls{display:flex;justify-content:center;gap:17px;padding:12px;color:#c6d1d4}
#situations .meeting-demo-controls>span{width:30px;height:30px;display:grid;place-items:center;background:#263139;border-radius:50%;font-size:17px}
#situations .meeting-demo-controls .meeting-hangup{background:#ee443b;color:#fff}
#situations .product-meeting>.product-bridge{left:89%;top:auto;bottom:-1px;width:66px;height:66px}
@media(max-width:1023px){
 #situations .product-tourism,#situations .product-meeting{max-width:670px}
 #situations .product-inperson{max-width:640px}
 #situations .product-browser{min-height:540px}
}
@media(max-width:600px){
 #situations .product-route{gap:15px;margin-top:17px}
 #situations .product-route bdi{font-size:13px}
 #situations .product-route small{font-size:9px}
 #situations .product-kind-tourism .product-devices,#situations .product-kind-meeting .product-devices{padding:0;margin-top:0}
 #situations .product-browser{min-height:0;border-radius:10px;background:#d7e2df}
 #situations .device-chrome{height:29px;padding-inline:10px;font-size:9px}
 #situations .stay-cover{height:183px}
 #situations .stay-name{left:14px;top:13px}
 #situations .stay-name>span{font-size:24px}
 #situations .stay-house{transform:scale(.72);transform-origin:bottom left;bottom:13px}
 #situations .stay-info{display:none}
 #situations .stay-widget{position:relative;right:auto;bottom:auto;width:calc(100% - 20px);margin:-20px 10px 12px;border-radius:12px}
 #situations .widget-message-list{min-height:260px;padding:15px 12px}
 #situations .widget-message-list .product-message{font-size:13px}
 #situations .widget-compose{font-size:10px}
 #situations .product-tourism>.product-bridge{left:80%;top:159px;width:54px;height:61px}
 #situations .product-inperson{min-height:0;padding:0 0 20px}
 #situations .listening-phone{width:88%;max-width:295px;transform:none}
 #situations .listen-messages{padding:16px 12px;gap:12px}
 #situations .listen-messages .product-message{font-size:14px}
 #situations .listen-messages .listening-original{font-size:10px}
 #situations .inperson-person{max-width:70px;z-index:2;font-size:9px;top:21%;left:-6px}
 #situations .inperson-person b{background:#11231ef0;padding:5px;border-radius:7px}
 #situations .inperson-person .person-avatar{width:42px;height:42px}
 #situations .visitor-person{right:-7px;left:auto;top:67%}
 #situations .product-inperson>.product-bridge{left:88%;top:14%;width:53px;height:62px}
 #situations .laptop-screen{border-width:4px;border-radius:12px 12px 4px 4px}
 #situations .laptop-base{margin:0 -3px;height:10px}
 #situations .meeting-demo-head{font-size:11px;padding:10px 8px;gap:5px}
 #situations .meeting-demo-head .device-logo{width:19px;height:19px}
 #situations .meeting-demo-head>span:not(.device-logo){font-size:8px}
 #situations .meeting-demo-tiles{gap:4px;padding:7px}
 #situations .meeting-person{aspect-ratio:.8}
 #situations .meeting-person-label{font-size:8px;padding:5px 3px;flex-wrap:wrap}
 #situations .meeting-demo-transcript{margin:0 7px;padding:11px 9px;min-height:258px}
 #situations .meeting-demo-transcript .product-message{font-size:13px}
 #situations .meeting-demo-transcript .meeting-original{font-size:10px}
 #situations .product-meeting>.product-bridge{left:89%;bottom:-9px;width:52px;height:57px;font-size:9px}
}
@media(max-width:360px){
 #situations .listening-phone{width:95%}
 #situations .listen-messages .product-message{font-size:12px}
 #situations .listen-messages .listening-original{font-size:9px}
 #situations .inperson-person{display:none}
 #situations .product-route{gap:12px}
 #situations .product-guide .product-step-short{font-size:10px}
}
#situations .product-phone-compose{position:absolute;left:6%;right:20%;top:81.9%;font-size:9px;line-height:1.5;background:#0d1217;color:#77858a;padding-block:2px}
@media(max-width:600px){#situations .product-phone-compose{display:none}}
#situations .listen-bottom svg{width:21px;height:21px}
#situations .meeting-demo-controls svg{width:17px;height:17px}
#situations .widget-message-list .widget-return{font-size:11px;color:#a8babb}
@media(max-width:600px){
 #situations .inperson-person b{display:none}
 #situations .host-person{left:-14px}
 #situations .visitor-person{right:-12px}
}

/* Device geometry stays stable; each translated passage uses its own writing direction. */
#situations .product-devices{direction:ltr}
#situations[dir=rtl] .product-devices [data-scene-key]:not([data-scene-lang]){direction:rtl}
#situations[dir=rtl] .product-route .route-arrow{transform:rotate(180deg)}
#situations[dir=rtl] .product-guide,#situations[dir=rtl] .scene-story{text-align:start}
#situations .product-step b{overflow-wrap:anywhere}
#situations .product-phone-language,#situations .product-bridge b,#situations .meeting-person-label bdi{unicode-bidi:isolate}
@media(max-width:600px){
 /* Keep short translated step labels on one line inside the three mobile tabs. */
 #situations .product-step .product-step-short{font-size:clamp(10px,3vw,12px);overflow-wrap:normal;word-break:normal;white-space:nowrap}
}