/* A tablet to choose, a MacBook to discuss, a phone to stay in touch. */
html body.cinema #come-organizziamo[data-service-devices]{--service-acid:#d3ef41;--service-coral:#ec6644;--service-ink:#202020;color:var(--service-ink)}
html body.cinema #come-organizziamo[data-service-devices] .service-steps-heading{max-width:1000px;margin-bottom:38px}
html body.cinema #come-organizziamo[data-service-devices] .service-steps-intro{color:#666;max-width:none}
html body.cinema #come-organizziamo[data-service-devices] .service-steps-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible}
html body.cinema #come-organizziamo[data-service-devices] .service-step-card{display:flex;flex-direction:column;position:relative;isolation:isolate;padding:0;overflow:hidden;border:1px solid #ffffffd9;border-radius:24px;background:rgba(255,255,255,.68);box-shadow:0 8px 28px #1517160c,inset 0 1px 0 #fff;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);min-width:0}
html body.cinema #come-organizziamo[data-service-devices] .service-step-card::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(120deg,#ffffff50,transparent 32%,transparent 66%,#ffffff25);border-top:1px solid #ffffff70;pointer-events:none}
html body.cinema #come-organizziamo[data-service-devices] .service-device-scene{height:330px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;pointer-events:none;flex-shrink:0;user-select:none}
html body.cinema #come-organizziamo[data-service-devices] .service-device-scene::before{content:'';position:absolute;width:135%;height:140%;left:-30%;top:-8%;background:radial-gradient(ellipse,rgba(211,239,65,.38),rgba(211,239,65,.12) 36%,transparent 69%);pointer-events:none;z-index:-1}
html body.cinema #come-organizziamo[data-service-devices] .scene-2::before{left:10%;top:-24%;background:radial-gradient(ellipse,rgba(236,102,68,.25),rgba(236,102,68,.07) 38%,transparent 70%)}
html body.cinema #come-organizziamo[data-service-devices] .scene-3::before{left:5%;top:4%;background:radial-gradient(ellipse,rgba(211,239,65,.3),rgba(211,239,65,.08) 40%,transparent 70%)}
html body.cinema #come-organizziamo[data-service-devices] .service-step-details{padding:28px 26px 30px;flex:1;background:rgba(255,255,255,.12);position:relative}
html body.cinema #come-organizziamo[data-service-devices] .service-card-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
html body.cinema #come-organizziamo[data-service-devices] .service-step-number{flex:0 0 26px;display:grid;place-items:center;height:26px;border-radius:50%;border:1px solid #dedede;background:#fff;font:400 13px/1 Atlas,Arial,sans-serif;color:#666;margin-top:2px}
html body.cinema #come-organizziamo[data-service-devices] h3{font:400 clamp(24px,2.1vw,32px)/1.12 Atlas,Arial,sans-serif;letter-spacing:-.035em;margin:0;min-height:0;color:var(--service-ink);text-wrap:balance;overflow-wrap:anywhere}
html body.cinema #come-organizziamo[data-service-devices] .service-card-description{font:400 16px/1.55 Atlas,Arial,sans-serif;letter-spacing:-.01em;color:#626262;margin:0;max-width:38ch}
html body.cinema #come-organizziamo[data-service-devices] .service-steps-action{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px}
html body.cinema #come-organizziamo[data-service-devices] .service-configure-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:17px 24px;border-radius:30px;background:var(--service-coral);color:#fff;text-decoration:none;font:400 17px/1.25 Atlas,Arial,sans-serif;min-height:56px;transition:box-shadow .2s,transform .2s}
html body.cinema #come-organizziamo[data-service-devices] .service-configure-cta:hover{box-shadow:0 6px 18px #ec66442b;transform:translateY(-2px)}
html body.cinema #come-organizziamo[data-service-devices] .service-contact-cta{display:inline-flex;align-items:center;gap:15px;color:#303030;font:400 16px/1.4 Atlas,Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;padding:12px 0}
html body.cinema #come-organizziamo[data-service-devices] .service-steps-action svg{width:22px;height:22px;flex-shrink:0}
html body.cinema #come-organizziamo[data-service-devices] a:focus-visible,html body.cinema #come-organizziamo[data-service-devices] button:focus-visible{outline:2px solid #202020;outline-offset:4px}
/* Device drawings are real HTML, so no baked-in language or raster UI. */
html body.cinema #come-organizziamo[data-service-devices] .device-screen{background:#fff;color:#242424;overflow:hidden;position:relative;font-family:Atlas,Arial,sans-serif}
html body.cinema #come-organizziamo[data-service-devices] .device-screen svg{width:20px;height:20px;flex-shrink:0}
html body.cinema #come-organizziamo[data-service-devices] .service-tablet{width:260px;max-width:81%;padding:9px;border:1px solid #777;border-radius:21px;background:#242424;box-shadow:0 17px 19px -12px #0005,0 0 0 2px #cecece;transform:scale(.9) rotate(-5deg);position:relative}
html body.cinema #come-organizziamo[data-service-devices] .tablet-screen{padding:16px 17px 14px;border-radius:12px}
html body.cinema #come-organizziamo[data-service-devices] .device-brand{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.01em;line-height:1.2;color:#727272;margin-bottom:12px}
html body.cinema #come-organizziamo[data-service-devices] .device-brand b{font-size:12px;font-weight:700;letter-spacing:-.04em;color:#222}
html body.cinema #come-organizziamo[data-service-devices] .device-heading{font-size:23px;line-height:1.1;letter-spacing:-.035em;margin-bottom:12px;color:#222}
html body.cinema #come-organizziamo[data-service-devices] .device-setting{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #eee;min-width:0}
html body.cinema #come-organizziamo[data-service-devices] .device-setting>div:not(.device-counter){flex:1;min-width:0}
html body.cinema #come-organizziamo[data-service-devices] .device-setting span{display:block;font-size:8px;line-height:1.25;color:#777}
html body.cinema #come-organizziamo[data-service-devices] .device-setting strong{display:block;font-size:12px;line-height:1.3;font-weight:400;margin-top:3px}
html body.cinema #come-organizziamo[data-service-devices] .device-counter{display:flex;gap:5px}
html body.cinema #come-organizziamo[data-service-devices] .device-counter i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f1f1f1;font:400 14px/1 Atlas,Arial,sans-serif}
html body.cinema #come-organizziamo[data-service-devices] .device-counter i:last-child{background:var(--service-acid)}
html body.cinema #come-organizziamo[data-service-devices] .device-setting .device-chevron{font-size:18px;color:#333}
html body.cinema #come-organizziamo[data-service-devices] .device-budget{border-top:1px solid #eee;padding-top:8px;margin:0 0 12px;font-size:8px;color:#777}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar{display:flex;gap:2px;height:6px;margin-top:6px;border-radius:4px;overflow:hidden}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar i{width:57%;background:var(--service-coral)}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar i:nth-child(2){width:30%;background:var(--service-acid)}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar i:nth-child(3){width:13%;background:#8c8c8c}
html body.cinema #come-organizziamo[data-service-devices] .device-request{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px;border-radius:7px;background:var(--service-coral);color:#fff;font-size:10px;line-height:1.2}
html body.cinema #come-organizziamo[data-service-devices] .device-request svg{width:15px;height:15px}
/* MacBook screen: only the privacy-safe, already approved footage is used. */
html body.cinema #come-organizziamo[data-service-devices] .service-macbook{width:92%;max-width:370px;position:relative;z-index:1;margin-top:-4px}
html body.cinema #come-organizziamo[data-service-devices] .macbook-lid{width:89%;margin:auto;padding:8px 8px 17px;border-radius:13px 13px 2px 2px;background:#202020;border:1px solid #868686;box-shadow:0 0 0 1px #d0d0d0;position:relative}
html body.cinema #come-organizziamo[data-service-devices] .macbook-lid::before{content:'';position:absolute;width:3px;height:3px;top:2px;left:50%;border-radius:50%;background:#53625c}
html body.cinema #come-organizziamo[data-service-devices] .macbook-screen{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#171717;border-radius:3px}
html body.cinema #come-organizziamo[data-service-devices] .service-call-video{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 47%;pointer-events:none}
html body.cinema #come-organizziamo[data-service-devices] .device-call-caption{position:absolute;left:8px;bottom:8px;padding:5px 7px;display:flex;gap:5px;align-items:baseline;border-radius:4px;background:#151515bb;color:#fff;font-size:8px;line-height:1.2}
html body.cinema #come-organizziamo[data-service-devices] .device-call-caption b{font-weight:400;font-size:10px}
html body.cinema #come-organizziamo[data-service-devices] .macbook-name{position:absolute;bottom:4px;left:0;width:100%;text-align:center;color:#b8b8b8;font:400 6px/1 Arial,sans-serif;letter-spacing:.03em}
html body.cinema #come-organizziamo[data-service-devices] .macbook-base{height:12px;border-radius:1px 1px 38% 38%/1px 1px 100% 100%;background:linear-gradient(#e4e4e4 0,#bcbcbc 32%,#858585 90%);box-shadow:0 1px 1px #0003;position:relative}
html body.cinema #come-organizziamo[data-service-devices] .macbook-base::before{content:'';display:block;position:absolute;top:0;left:40%;width:20%;height:4px;border-radius:0 0 6px 6px;background:#9a9a9a;box-shadow:inset 0 1px 2px #0003}
html body.cinema #come-organizziamo[data-service-devices] .device-shadow{position:absolute;bottom:-14px;left:4%;right:4%;height:12px;background:#0002;filter:blur(7px);border-radius:50%;z-index:-1}
html body.cinema #come-organizziamo[data-service-devices] .service-scene-caption{position:absolute;bottom:28px;left:16px;right:16px;text-align:center;font:400 13px/1.2 Atlas,Arial,sans-serif;color:#666}
/* Contacts, not a promise of an already-released mobile app. */
html body.cinema #come-organizziamo[data-service-devices] .service-phone{position:relative;width:182px;padding:6px;border:1px solid #9d9d9d;border-radius:28px;background:#202020;box-shadow:0 0 0 2px #d3d3d3,10px 14px 20px -10px #0004;transform:rotate(6deg);flex:none}
html body.cinema #come-organizziamo[data-service-devices] .phone-screen{border-radius:22px;padding:30px 13px 20px;min-height:290px}
html body.cinema #come-organizziamo[data-service-devices] .phone-camera{position:absolute;top:7px;left:calc(50% - 20px);width:40px;height:10px;background:#202020;border-radius:8px}
html body.cinema #come-organizziamo[data-service-devices] .phone-screen .device-brand{font-size:8px;margin-bottom:9px;letter-spacing:0}
html body.cinema #come-organizziamo[data-service-devices] .phone-screen .device-heading{font-size:19px;line-height:1.1;max-width:12ch;margin-bottom:15px}
html body.cinema #come-organizziamo[data-service-devices] .device-person{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #eee}
html body.cinema #come-organizziamo[data-service-devices] .device-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eee;flex-shrink:0;position:relative;overflow:hidden}
html body.cinema #come-organizziamo[data-service-devices] .device-avatar img{position:absolute;display:block;max-width:none;width:300%;height:auto;left:-110%;top:-92%}
html body.cinema #come-organizziamo[data-service-devices] .avatar-e img{width:280%;left:-124%;top:-186%}
html body.cinema #come-organizziamo[data-service-devices] .device-person b{display:block;font-size:12px;font-weight:400;line-height:1.2}
html body.cinema #come-organizziamo[data-service-devices] .device-person div>span{display:block;font-size:8px;line-height:1.3;margin-top:4px;color:#777}
html body.cinema #come-organizziamo[data-service-devices] .device-contact-actions{display:flex;gap:8px;margin:5px 0 13px}
html body.cinema #come-organizziamo[data-service-devices] .device-contact-actions>span{display:grid;place-items:center;background:var(--service-acid);border-radius:9px;flex:1;height:32px}
html body.cinema #come-organizziamo[data-service-devices] .device-contact-actions>span:last-child{background:#f0f0f0}
html body.cinema #come-organizziamo[data-service-devices] .device-contact-actions svg{width:16px;height:16px}
html body.cinema #come-organizziamo[data-service-devices] .device-location{display:flex;align-items:center;gap:3px;font-size:8px;line-height:1.2;color:#777}
html body.cinema #come-organizziamo[data-service-devices] .device-location svg{width:12px;height:12px}
html body.cinema #come-organizziamo[data-service-devices] .phone-home{position:absolute;bottom:7px;left:calc(50% - 25px);width:50px;height:3px;background:#333;border-radius:5px}
@media(min-width:801px) and (max-width:1100px){
 html body.cinema #come-organizziamo[data-service-devices] .service-steps-list{gap:14px}
 html body.cinema #come-organizziamo[data-service-devices] .service-step-details{padding:22px 18px 26px}
 html body.cinema #come-organizziamo[data-service-devices] .service-device-scene{height:290px}
 html body.cinema #come-organizziamo[data-service-devices] .service-tablet{max-width:none;width:252px;transform:scale(.8) rotate(-5deg);flex:none}
 html body.cinema #come-organizziamo[data-service-devices] .service-phone{transform:scale(.86) rotate(6deg)}
 html body.cinema #come-organizziamo[data-service-devices] h3{font-size:24px}
 html body.cinema #come-organizziamo[data-service-devices] .service-card-heading{gap:8px}
}
/* The first mobile view always reveals the following card; no auto-advance. */
html body.cinema #come-organizziamo[data-service-devices] .service-steps-list:focus-visible{outline:2px solid var(--service-coral);outline-offset:5px}
@media(max-width:800px){
 html body.cinema #come-organizziamo[data-service-devices]{--service-gutter:max(20px,5vw)}
 html body.cinema #come-organizziamo[data-service-devices] .service-steps-list{display:flex;gap:16px;width:calc(100% + 2 * var(--service-gutter));margin-inline:calc(-1 * var(--service-gutter));padding:14px var(--service-gutter) 28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--service-gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 html body.cinema #come-organizziamo[data-service-devices] .service-steps-list::-webkit-scrollbar{display:none}
 html body.cinema #come-organizziamo[data-service-devices] .service-step-card{display:flex;flex:0 0 min(420px,calc(100% - 42px));scroll-snap-align:start;scroll-snap-stop:always;padding:0}
 html body.cinema #come-organizziamo[data-service-devices] .service-device-scene{height:300px}
 html body.cinema #come-organizziamo[data-service-devices] .service-step-details{padding:24px;align-self:stretch}
 html body.cinema #come-organizziamo[data-service-devices] h3{font-size:27px}
 html body.cinema #come-organizziamo[data-service-devices] .service-card-heading{margin-bottom:13px}
 html body.cinema #come-organizziamo[data-service-devices] .service-card-description{font-size:16px}
 html body.cinema #come-organizziamo[data-service-devices] .service-phone{transform:scale(.88) rotate(6deg)}
 html body.cinema #come-organizziamo[data-service-devices] .service-tablet{max-width:none;width:250px;transform:scale(.83) rotate(-5deg);flex:none}
 html body.cinema #come-organizziamo[data-service-devices] .service-scene-caption{bottom:22px}
 html body.cinema #come-organizziamo[data-service-devices] .service-steps-action{gap:14px;margin-top:10px}
 html body.cinema #come-organizziamo[data-service-devices] .service-configure-cta{max-width:100%;font-size:16px;gap:15px}
}
@media(max-width:360px){html body.cinema #come-organizziamo[data-service-devices] .service-tablet{transform:scale(.78) rotate(-5deg)} html body.cinema #come-organizziamo[data-service-devices] .service-step-details{padding:22px 20px} html body.cinema #come-organizziamo[data-service-devices] h3{font-size:25px}}
/* A ten-second UI demonstration, drawn in HTML/CSS instead of a video file. */
html body.cinema #come-organizziamo[data-service-devices] .device-setting .device-nights{display:grid;white-space:nowrap;font-variant-numeric:tabular-nums}
html body.cinema #come-organizziamo[data-service-devices] .device-setting .device-nights span{grid-area:1/1;font:inherit;color:inherit}
html body.cinema #come-organizziamo[data-service-devices] .nights-updated{opacity:0}
html body.cinema #come-organizziamo[data-service-devices] .device-stay-slider{height:4px;width:100%;margin-top:7px;background:linear-gradient(90deg,var(--service-acid),var(--service-coral));border-radius:5px;position:relative}
html body.cinema #come-organizziamo[data-service-devices] .device-stay-slider i{position:absolute;left:30%;top:-3px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#242424;box-shadow:0 0 0 1px #aaa}
html body.cinema #come-organizziamo[data-service-devices] .device-cursor{position:absolute;left:0;top:0;width:22px;height:25px;z-index:4;opacity:0;filter:drop-shadow(0 2px 2px #0004);pointer-events:none}
html body.cinema #come-organizziamo[data-service-devices] .device-cursor svg{width:22px;height:25px;fill:#242424;stroke:#fff;stroke-width:1.5}
html body.cinema #come-organizziamo[data-service-devices] .device-tap{position:absolute;left:2px;top:0;width:18px;height:18px;border:2px solid var(--service-coral);border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
html body.cinema #come-organizziamo[data-service-devices] .device-counter i:last-child{animation:service-counter 10s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .nights-initial{animation:service-nights-old 10s steps(1) infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .nights-updated{animation:service-nights-new 10s steps(1) infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-stay-slider i{animation:service-stay 10s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar i:first-child{animation:service-budget 10s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-budget-bar i:nth-child(2){flex:1}
html body.cinema #come-organizziamo[data-service-devices] .device-request{animation:service-request 10s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-cursor{animation:service-cursor 10s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-tap{animation:service-tap 10s ease-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-ring{position:relative}
html body.cinema #come-organizziamo[data-service-devices] .device-ring svg{transform-origin:50% 50%;animation:service-ring 5s ease-in-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .device-ring::after{content:'';position:absolute;inset:1px;border:1px solid #90ad16;border-radius:inherit;opacity:0;animation:service-ring-wave 5s ease-out infinite paused}
html body.cinema #come-organizziamo[data-service-devices] .service-step-card.motion-playing :is(.device-counter i:last-child,.nights-initial,.nights-updated,.device-stay-slider i,.device-budget-bar i:first-child,.device-request,.device-cursor,.device-tap,.device-ring svg),html body.cinema #come-organizziamo[data-service-devices] .service-step-card.motion-playing .device-ring::after{animation-play-state:running}
@keyframes service-counter{0%,15%,22%,100%{transform:scale(1)}18%{transform:scale(.82)}}
@keyframes service-nights-old{0%,94%,100%{opacity:1}19%{opacity:0}}
@keyframes service-nights-new{0%,94%,100%{opacity:0}19%{opacity:1}}
@keyframes service-stay{0%,36%,94%,100%{left:30%}49%,85%{left:68%}}
@keyframes service-budget{0%,40%,94%,100%{width:57%}53%,85%{width:73%}}
@keyframes service-request{0%,65%,74%,100%{transform:scale(1);box-shadow:none}69%{transform:scale(.97);box-shadow:0 0 0 4px #ec664426}}
@keyframes service-cursor{0%{left:92%;top:92%;opacity:0}8%{opacity:1}16%,22%{left:var(--demo-counter-x,83%);top:var(--demo-counter-y,31%)}36%{left:var(--demo-stay-from-x,39%);top:var(--demo-stay-from-y,50%)}49%,55%{left:var(--demo-stay-to-x,66%);top:var(--demo-stay-to-y,50%)}66%,74%{left:var(--demo-request-x,68%);top:var(--demo-request-y,88%);opacity:1}82%,100%{left:89%;top:95%;opacity:0}}
@keyframes service-tap{0%,16%,36%,66%,100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}17%,37%,67%{opacity:.7;transform:translate(-50%,-50%) scale(.6)}23%,43%,73%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes service-ring{0%,12%,38%,100%{transform:rotate(0)}16%,24%,32%{transform:rotate(-17deg)}20%,28%,36%{transform:rotate(17deg)}}
@keyframes service-ring-wave{0%,12%,42%,100%{opacity:0;transform:scale(1)}16%{opacity:.45;transform:scale(1)}40%{opacity:0;transform:scale(1.32)}}
@media(prefers-reduced-motion:reduce){html body.cinema #come-organizziamo[data-service-devices] *,html body.cinema #come-organizziamo[data-service-devices] *::after{animation:none!important;transition:none!important} html body.cinema #come-organizziamo[data-service-devices] .device-cursor{display:none}}
html[data-atlas-motion=reduced] body.cinema #come-organizziamo[data-service-devices] *, html[data-atlas-motion=reduced] body.cinema #come-organizziamo[data-service-devices] *::after{animation:none!important;transition:none!important}
html[data-atlas-motion=reduced] body.cinema #come-organizziamo[data-service-devices] .device-cursor{display:none}
@media(prefers-reduced-transparency:reduce){html body.cinema #come-organizziamo[data-service-devices] .service-step-card{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none} html body.cinema #come-organizziamo[data-service-devices] .service-device-scene::before{content:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html body.cinema #come-organizziamo[data-service-devices] .service-step-card{background:#fafafa}}