/* Hostem / Xem Branding Kit 2.1. Product expression stays light and pink.
   This layer follows motion.css; interaction behaviour and authored content stay intact. */
:root{
 --bg:#FFFFFF;--panel:#F0F2F5;--text:#0F172A;--muted:#4F5B69;--line:#C9D0D9;
 --accent:#FF3366;--pink:#C91548;--gutter:clamp(32px,4vw,128px);
 --radius-control:4px;--radius-dialog:12px;--radius-card:16px;--radius-large:24px;--radius-device:32px;
}
body{line-height:1.6}
h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1.14}
.hero-copy h1 em{color:var(--muted);font-weight:500}
.hero-bottom p{letter-spacing:0}
/* The promise precedes the illustrative flow on desktop as well as mobile. */
@media(min-width:951px){.hero-flow{margin-top:56px;margin-bottom:0}}
.shell{width:calc(100% - 2 * var(--gutter));max-width:none}
.shell.article{max-width:70ch}
.section-head h2{max-width:20ch}.section-head>p{max-width:34ch}
.hero-bottom p,.solution p{max-width:56ch}
.problem-copy,.mission-copy p,.contact-copy>p{max-width:58ch}
.button{border-radius:var(--radius-control);font-weight:600;color:var(--text)}
.menu-toggle,input,select,textarea,.demo-tabs button,.transfer-outcomes span,.demo-approval,.flow-task,.signal-icon,.rule-card{border-radius:var(--radius-control)}
.request-card .arrow-circle{border-radius:var(--radius-control);background:var(--pink);color:#FFFFFF}
.request-card,.property-card,.target,.operations-demo,.demo-reply,.signal,.mission-image,.mission-image img{border-radius:var(--radius-card)}
.solution,.pricing{border-radius:var(--radius-large)}
.coordination-hub{border-radius:var(--radius-card)}
.hub-ring{border-radius:calc(var(--radius-card) + 16px)}
.target,.operations-demo{padding:clamp(24px,2vw,32px)}
.brand img{width:168px;height:48px;object-fit:contain}
.demo-top{flex-wrap:wrap;row-gap:8px}
.demo-top img{width:161px;height:46px;object-fit:contain}
@media(min-width:1101px){.request-card,.property-card.transfer-confirmation{padding:24px}}
@media(min-width:1600px){html{font-size:clamp(16px,.9vw,22px)}}
@media(max-width:1024px){:root{--gutter:32px}}
@media(max-width:850px){.hub-ring{border-radius:calc(var(--radius-card) + 12px)}}
@media(max-width:700px){:root{--gutter:24px}}
@media(max-width:600px){
 .brand img{width:161px;height:46px}
 .solution,.pricing{border-radius:var(--radius-card)}
 .hero h1{line-height:1.14;letter-spacing:-.045em}
 .demo-top span{flex-basis:100%;max-width:none;text-align:left}
}
@media(max-width:360px){:root{--gutter:20px}.operations-demo{padding:20px}.brand img{width:161px;height:46px}}

/* Targeted feedback: homepage payoff and one hospitality photograph. */
.brand-block{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.header-payoff .brand-block{width:260px}
.brand-row{display:flex;align-items:center;gap:12px}
.brand-endorsement{display:inline-flex;align-items:center;min-height:44px;font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap}
.brand-endorsement:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.footer-xem{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.8rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.footer-xem:hover{color:var(--pink)}
.brand-payoff{font-size:12px;line-height:1.4;color:var(--muted);max-width:260px}
#funzionalita .section-head h2.eyebrow{font-size:.73rem;font-weight:500;letter-spacing:.08em;line-height:1.5;max-width:none}
.contact-photo{display:block;width:100%;aspect-ratio:2 / 1;height:auto;object-fit:cover;object-position:center 60%;border-radius:var(--radius-card);margin-top:28px}
@media(min-width:601px) and (max-width:850px){.header-payoff .nav{height:88px}.header-payoff .nav-links.open{top:88px}}
@media(max-width:600px){.brand-block,.header-payoff .brand-block{width:176px}.brand-row{gap:8px}.brand-row .brand img{width:126px;height:36px}.header-payoff .nav{height:112px}.header-payoff .nav-links.open{top:112px}.brand-payoff{max-width:176px}}

/* Contact stays the primary action; the commercial demo can be enabled later. */
.nav-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:21rem;flex:none}
.nav-mobile-actions{display:none}
.nav .nav-actions>.nav-cta,.nav .nav-mobile-actions>.nav-cta{display:inline-flex;width:100%;height:44px;min-height:44px;margin-left:0;padding:8px 12px;gap:12px;font-size:.8rem;font-weight:600;white-space:nowrap}
@media(min-width:851px) and (max-width:1200px){
 .nav-links{display:none}
 .nav-actions{margin-left:auto}
 .menu-toggle{display:block}
 .nav-links.open{display:flex;position:absolute;top:88px;left:0;right:0;background:#FFFFFF;padding:24px var(--gutter);flex-direction:column;align-items:stretch;gap:8px;border-bottom:1px solid var(--line)}
 .nav-links.open>a{font-size:1rem}
}
@media(max-width:850px){
 .nav-actions{display:none}
 .nav .language{margin-left:auto}
 .nav-mobile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:16px;margin-top:8px;border-top:1px solid var(--line)}
}
@media(max-width:600px){
 .nav-mobile-actions{grid-template-columns:1fr}
}
.conversion-actions,.hero-bottom .conversion-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:12px;width:30rem;max-width:100%}
.conversion-actions>.button{width:100%;min-height:52px;gap:16px;text-align:left;font-size:.9rem}
.hero-bottom{flex-wrap:wrap;row-gap:24px}
.hero-bottom>p{flex:1 1 28rem}
.hero-bottom .conversion-actions{flex:0 1 30rem;margin-top:0}
.button.demo-cta{background:transparent;border-color:var(--muted);color:var(--text)}
.button.demo-cta:hover{background:#FFF1F5;border-color:var(--pink)}
.button.demo-cta:disabled,.button.demo-cta:disabled:hover,.button.demo-cta:disabled:active{opacity:1;background:var(--panel);border-color:#929BA8;color:var(--muted);cursor:default;transform:none;box-shadow:none;transition:none}
.button.demo-cta:disabled span,.button.demo-cta:disabled:hover span{transform:none;transition:none}

.commercial-demo{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:end;margin-top:clamp(48px,5vw,80px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.commercial-demo-copy,.commercial-demo-details{min-width:0}
.commercial-demo .eyebrow{margin-bottom:20px}
.commercial-demo h2{max-width:20ch;font-size:clamp(1.8rem,1.4rem + 1vw,2.75rem);margin-bottom:20px}
.commercial-demo-copy>p{max-width:58ch}
.commercial-demo-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.commercial-demo-stages li{border-top:1px solid var(--line);padding-top:12px;font-size:.85rem;line-height:1.5;color:var(--text)}
.commercial-demo .conversion-actions{margin-top:28px}
.commercial-demo-note{font-size:.8rem;line-height:1.6;max-width:48ch;margin-top:16px}
@media(max-width:850px){
 .hero-bottom .conversion-actions{margin-top:26px}
 .commercial-demo{grid-template-columns:1fr;gap:28px}
 .commercial-demo-details{max-width:38rem}
}
@media(max-width:600px){
 .conversion-actions,.hero-bottom .conversion-actions{grid-template-columns:1fr;width:100%}
 .commercial-demo{margin-top:48px;padding-top:32px}
 .commercial-demo h2{max-width:20ch}
 .commercial-demo-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .commercial-demo-stages li{padding-block:12px;font-size:.875rem}
 .commercial-demo-stages li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
 .commercial-demo .conversion-actions{margin-top:24px}
}

/* Direct WhatsApp contact, shared by every page. */
.whatsapp-contact{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:90;display:grid;place-items:center;width:56px;height:56px;border:2px solid #fff;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 4px 18px #0f172a26;text-decoration:none}
.whatsapp-contact:hover{background:#128c4a;color:#fff}
.whatsapp-contact:focus-visible{outline:3px solid #0f172a;outline-offset:4px}
.whatsapp-contact svg{display:block;width:30px;height:30px}
.footer{padding-bottom:96px}
@media(max-width:600px){.whatsapp-contact{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}
/* Contact availability and privacy controls. */
#contact-form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:20px}
#contact-form fieldset:disabled{opacity:.65}
#contact-form .contact-trap,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#contact-availability{padding:16px;border:1px solid #c8cdd4;border-radius:4px;color:#263345;line-height:1.6}
#contact-form .form-status:focus{outline:2px solid #a81f43;outline-offset:6px}
.hero>.motion-toggle,.motion-toggle,.scene-note,.flow-note{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* First clients: original artwork, shown in one quiet ink on the light surface. */
.client-proof{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:24px;border-bottom:1px solid var(--line)}
.client-proof>p{margin:0;color:var(--muted);font-size:.8125rem;line-height:1.5}
.client-proof-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:48px;width:min(100%,32rem)}
.client-proof-logos>a{display:flex;align-items:center;justify-content:center;min-height:80px;padding:4px 12px;border-radius:var(--radius-control)}
.client-proof-logos img{display:block;max-width:100%;height:auto;object-fit:contain;filter:brightness(0);opacity:.72;transition:opacity .2s ease}
.client-logo-skylife{width:96px}
.client-logo-zen{width:144px}
.client-proof-logos>a:hover img,.client-proof-logos>a:focus-visible img{opacity:1}
.client-proof-logos>a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media(max-width:700px){
 .client-proof{flex-direction:column;align-items:flex-start;gap:16px}
 .client-proof-logos{width:100%;gap:24px}
 .client-proof-logos>a{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){.client-proof-logos img{transition:none}}