:root{--demo-accent:#ff3b4e;--demo-accent-dark:#d92a3c;--demo-success:#287a52;--demo-open:#ff4b3e;--demo-phone:#20232a}
.demo-page{min-height:100svh;background:var(--warm);overflow-x:hidden}.demo-header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--dark);color:#fff;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--brand-pink),var(--brand-coral),var(--brand-orange)) 1}.demo-header-actions{display:flex;align-items:center;gap:1rem}.demo-label{font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:#bfc1b9;border:1px solid rgba(255,255,255,.2);padding:.45rem .7rem}.demo-reset{border:0;background:transparent;color:#d8d9d2;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;cursor:pointer}.demo-close{display:grid;place-items:center;width:42px;height:42px;text-decoration:none;font-size:1.8rem;font-weight:200;border:1px solid rgba(255,255,255,.2)}
.demo-shell{min-height:calc(100svh - 84px);position:relative;isolation:isolate}.demo-shell:before{content:"";position:absolute;inset:0 52% 0 0;background:var(--paper);z-index:-1}.demo-story{width:min(1320px,100%);min-height:calc(100svh - 84px);margin:auto;padding:clamp(2rem,5vh,4.5rem) var(--pad);display:grid;grid-template-columns:minmax(320px,.82fr) minmax(460px,1.18fr);gap:clamp(3rem,8vw,9rem);align-items:center}.story-stage{max-width:530px}.story-stage h1{font-family:var(--display);font-size:clamp(2.7rem,4.6vw,5.4rem);font-weight:500;letter-spacing:-.052em;line-height:1.01;margin:0}.story-lead{font-size:clamp(1rem,1.25vw,1.2rem);color:var(--soft-ink);margin:2rem 0 2.5rem;max-width:510px}.story-benefits{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.story-benefits li{display:flex;align-items:center;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.story-benefits span{color:var(--sage);font-size:.67rem}.phone-column{display:flex;flex-direction:column;align-items:center;min-width:0}.demo-progress{width:min(520px,100%);margin-bottom:1.2rem}.demo-progress ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}.demo-progress li{position:relative;text-align:center;color:#7b7d75}.demo-progress li:before{content:"";position:absolute;left:-50%;right:50%;top:6px;height:1px;background:rgba(27,28,24,.22)}.demo-progress li:first-child:before{display:none}.demo-progress li span{position:relative;z-index:1;display:block;width:13px;height:13px;margin:auto;border-radius:50%;background:#c6c1b7;border:3px solid var(--warm)}.demo-progress li small{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.demo-progress li.active span,.demo-progress li.complete span{background:var(--dark)}.demo-progress li.complete:before,.demo-progress li.active:before{background:var(--dark)}.demo-progress li.active small{color:var(--ink);font-weight:700}
.phone-frame{width:min(430px,100%);height:min(720px,calc(100svh - 180px));min-height:620px;padding:10px;background:var(--demo-phone);border-radius:42px;box-shadow:0 35px 80px rgba(32,35,42,.3),0 2px 0 rgba(255,255,255,.15) inset;position:relative}.phone-top{position:absolute;z-index:8;top:14px;left:50%;transform:translateX(-50%);width:94px;height:23px;border-radius:20px;background:#0a0b09;display:grid;place-items:center}.phone-top span{width:30px;height:3px;background:#252720;border-radius:4px}.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper);border-radius:33px;color:var(--ink)}.screen{position:absolute;inset:0;display:none;overflow-y:auto;overscroll-behavior:contain}.screen.active{display:block;animation:screen-in .32s ease-out}.welcome-image{height:44%;min-height:250px;background:linear-gradient(0deg,rgba(17,18,15,.35),transparent),url('/images/landing/guest-arrival.png') center 38%/cover}.screen-body{padding:1.7rem}.welcome-body{position:relative;margin-top:-2rem;border-radius:28px 28px 0 0;background:var(--paper)}.phone-kicker{font-size:.61rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--sage);margin:0 0 .5rem}.screen h2{font-family:var(--display);font-size:2rem;line-height:1.08;letter-spacing:-.04em;font-weight:500;margin:0}.welcome-body>p:not(.phone-kicker){font-size:.87rem;color:var(--soft-ink);margin:1rem 0 1.3rem}.simulation-note{display:block;text-align:center;color:#777970;font-size:.66rem;margin-top:.8rem}.demo-button{display:flex;width:100%;min-height:50px;align-items:center;justify-content:center;gap:.6rem;border:0;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.68rem;cursor:pointer}.demo-button.primary{background:var(--brand-gradient);color:#fff}.demo-button span{font-size:1rem}.screen-header{display:flex;align-items:center;gap:1rem;padding:3.2rem 1.5rem 1.1rem;background:var(--warm);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4}.screen-header h2{font-size:1.65rem}.back-button{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer}.screen-content{padding:1.3rem 1.5rem 2rem}.screen-intro{font-size:.83rem;color:var(--soft-ink);margin:0 0 1.1rem}
.property-list{padding:1rem 1.2rem 2rem;display:grid;gap:.85rem}.property-card{position:relative;min-height:148px;border:0;border-radius:18px;overflow:hidden;padding:0;text-align:left;color:#fff;cursor:pointer;background:#444}.property-card-image,.property-card-shade{position:absolute;inset:0}.property-card-image{background-position:center;background-size:cover;transition:transform .45s}.property-card-shade{background:linear-gradient(0deg,rgba(14,15,12,.8),rgba(14,15,12,.05) 70%)}.property-card:hover .property-card-image{transform:scale(1.025)}.property-card-content{position:absolute;inset:auto 1rem .9rem;display:flex;align-items:end;justify-content:space-between;gap:.7rem}.property-card strong{display:block;font-family:var(--display);font-size:1.18rem}.property-card small{display:block;font-size:.65rem;color:#e0e1dc}.property-price{text-align:right;white-space:nowrap}.property-price span{font-weight:700}.smart-badge{position:absolute;top:.75rem;left:.75rem;background:#e5ebdd;color:#384032;border-radius:20px;padding:.32rem .65rem;font-size:.57rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.unavailable-badge{position:absolute;top:.75rem;left:.75rem;background:rgba(18,19,16,.7);backdrop-filter:blur(5px);padding:.3rem .6rem;font-size:.55rem;text-transform:uppercase;letter-spacing:.07em}.property-hint{position:absolute;inset:auto .8rem .7rem;background:#fff;color:var(--ink);padding:.7rem;border-radius:10px;font-size:.68rem;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.booking-property{display:flex;align-items:center;gap:.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}.booking-thumb{width:72px;height:64px;flex:0 0 auto;border-radius:12px;background-size:cover;background-position:center}.booking-property strong,.booking-property span{display:block}.booking-property span{font-size:.72rem;color:var(--soft-ink)}.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0}.booking-grid button{background:#eeece5;border:0;border-radius:12px;padding:.75rem;text-align:left}.booking-grid small,.booking-grid strong,.booking-grid span{display:block}.booking-grid small{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--soft-ink)}.booking-grid strong{font-size:1rem;margin:.18rem 0}.booking-grid span{font-size:.67rem;color:var(--soft-ink)}.guest-row,.price-row{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border:0;border-top:1px solid var(--line);background:transparent;font-size:.78rem}.price-row{margin-top:.2rem}.price-row strong{font-size:1.05rem}.booking-grid+.guest-row{cursor:pointer}.booking-property~.demo-button{margin-top:1rem}
.choice-card{width:100%;display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:.7rem;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:.9rem;margin:.75rem 0;cursor:pointer}.choice-card.selected{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage)}.choice-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#eeece5;font-size:1.25rem}.choice-card strong,.choice-card small{display:block}.choice-card strong{font-size:.79rem}.choice-card small{font-size:.64rem;color:var(--soft-ink)}.choice-check{opacity:0;color:var(--demo-success);font-weight:700}.choice-card.selected .choice-check{opacity:1}.privacy-card{display:flex;gap:.8rem;background:#eeece5;border-radius:12px;padding:.8rem;margin:1rem 0 1.2rem}.privacy-card>span{font-size:1.3rem}.privacy-card p{font-size:.65rem;margin:0;color:var(--soft-ink)}.centered-screen{padding:4rem 2rem 2rem;align-items:center;justify-content:center;text-align:center;flex-direction:column}.centered-screen.active{display:flex}.centered-screen h2{font-size:1.85rem}.centered-screen>p:last-child{font-size:.75rem;color:var(--soft-ink)}.status-animation{position:relative;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:var(--warm);color:var(--brand-coral);font-size:2.2rem;margin-bottom:1.5rem;overflow:hidden}.scan-line{position:absolute;left:12px;right:12px;height:2px;background:var(--sage);box-shadow:0 0 9px var(--sage);animation:scan 1.3s ease-in-out infinite}
.verified-banner{display:flex;align-items:center;gap:.7rem;background:#e6ebdf;padding:.75rem;border-radius:12px}.verified-banner>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--demo-success);color:#fff}.verified-banner strong,.verified-banner small{display:block}.verified-banner strong{font-size:.72rem}.verified-banner small{font-size:.6rem;color:var(--soft-ink)}.payment-card{margin:1rem 0;background:linear-gradient(135deg,#1d211a,#444b3c);color:#fff;border-radius:17px;padding:1.2rem;min-height:150px;box-shadow:0 14px 30px rgba(25,27,22,.22)}.payment-card p{font-size:.55rem;letter-spacing:.13em;margin:0 0 2.2rem;color:#cdd2c8}.payment-card>strong{font-size:1.05rem;letter-spacing:.08em}.payment-card>div{display:flex;justify-content:space-between;margin-top:1.5rem;font-size:.55rem;letter-spacing:.09em}.payment-total{border-bottom:1px solid var(--line);margin-bottom:.7rem}.payment-warning{text-align:center;color:#8c5f35;font-size:.64rem}.payment-loader{width:95px;height:95px;border:2px solid #d5d4ce;border-top-color:var(--sage);border-radius:50%;display:grid;place-items:center;margin-bottom:1.5rem;animation:spin 1s linear infinite}.payment-loader span{width:54px;height:34px;border-radius:6px;background:var(--dark)}
.key-screen{padding:4rem 1.5rem 2rem;text-align:center}.key-screen h2{font-size:2.1rem}.key-celebration{width:46px;height:46px;display:grid;place-items:center;margin:0 auto 1rem;border-radius:50%;background:var(--demo-success);color:#fff;font-size:1.25rem;animation:pop .45s ease-out}.smart-key-preview{text-align:left;min-height:245px;margin:1.6rem 0;padding:1.4rem;border-radius:24px;background:var(--brand-gradient);color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 40px rgba(255,75,62,.24);animation:key-in .55s ease-out}.key-brand{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.14em}.key-brand span{font-size:1.2rem}.smart-key-preview small,.smart-key-preview strong{display:block}.smart-key-preview small{font-size:.7rem;color:#dfe2dc}.smart-key-preview strong{font-family:var(--display);font-size:2rem;font-weight:500}.smart-key-preview p{margin:.25rem 0;font-size:.65rem;color:#dfe2dc}.key-status{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}.key-status i,.active-key i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b8d496;margin-right:.3rem}
.frontoffice-screen{padding:3.3rem 1.25rem 2rem}.frontoffice-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.frontoffice-top h2{font-size:1.7rem}.guest-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--brand-gradient);color:#fff;font-size:.65rem}.stay-card{display:grid;grid-template-columns:66px 1fr;gap:.7rem;position:relative;background:#fff;border-radius:15px;padding:.65rem;box-shadow:0 8px 28px rgba(25,26,22,.08)}.stay-image{width:66px;height:64px;border-radius:10px;background-size:cover;background-position:center}.stay-card small,.stay-card strong,.stay-card span{display:block}.stay-card small{font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sage)}.stay-card strong{font-size:.75rem}.stay-card span{font-size:.61rem;color:var(--soft-ink)}.stay-card>i{position:absolute;right:.65rem;top:.55rem;font-style:normal;color:var(--demo-success);font-size:.52rem;text-transform:uppercase}.door-card{margin-top:.85rem;padding:1rem 1.1rem;background:var(--warm);border-radius:22px;text-align:center;transition:background .35s}.door-card.open{background:#ffe3df}.door-card-head{display:flex;justify-content:space-between;text-align:left}.door-card-head small,.door-card-head strong{display:block}.door-card-head small{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft-ink)}.door-card-head strong{font-size:.78rem}.active-key{font-size:.56rem;color:var(--demo-success)}.lock-visual{width:70px;height:76px;position:relative;margin:.8rem auto .4rem}.lock-shackle{position:absolute;width:42px;height:41px;border:7px solid var(--dark);border-bottom:0;border-radius:24px 24px 0 0;left:14px;top:0;transition:transform .35s}.lock-body{position:absolute;left:7px;bottom:0;width:56px;height:48px;border-radius:12px;background:var(--dark);display:grid;place-items:center}.lock-body i{width:7px;height:17px;background:#f1eee7;border-radius:6px}.door-card.open .lock-shackle{transform:translate(11px,-4px) rotate(18deg);transform-origin:right bottom}.door-card.open .lock-body{background:var(--demo-open)}.door-state strong,.door-state span{display:block}.door-state strong{font-family:var(--display);font-size:1.45rem}.door-state span{font-size:.61rem;color:var(--soft-ink)}.door-button{width:100%;min-height:46px;margin-top:.8rem;border:0;background:var(--dark);color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:700;cursor:pointer}.door-card.open .door-button{background:var(--brand-gradient)}.door-button:disabled{cursor:wait;opacity:.65}.door-live{height:.9rem;margin:.3rem 0 0;font-size:.58rem;color:var(--soft-ink)}.stay-services{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.8rem 0}.stay-services button{border:0;background:#fff;border-radius:12px;padding:.65rem .2rem}.stay-services span,.stay-services small{display:block}.stay-services span{font-size:1rem}.stay-services small{font-size:.58rem;color:var(--soft-ink)}.event-toggle{width:100%;display:flex;justify-content:space-between;border:0;border-top:1px solid var(--line);padding:.8rem 0;background:transparent;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.event-list{list-style:none;padding:0;margin:0 0 .7rem}.event-list li{display:flex;justify-content:space-between;padding:.55rem 0;border-top:1px solid var(--line);font-size:.62rem}.event-list span{color:var(--soft-ink)}.completion-actions{text-align:center;border-top:1px solid var(--line);padding-top:.8rem}.completion-actions p{font-size:.68rem}.completion-actions .demo-button{font-size:.6rem;min-height:44px}.text-action{border:0;background:none;text-decoration:underline;margin-top:.65rem;font-size:.62rem;cursor:pointer}
@keyframes screen-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@keyframes scan{0%,100%{transform:translateY(-32px)}50%{transform:translateY(32px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes key-in{from{transform:translateY(25px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
@media(max-width:960px){.demo-shell:before{inset:0;background:var(--paper)}.demo-story{grid-template-columns:1fr;padding-top:2rem}.story-stage{text-align:center;margin:auto}.story-benefits{display:none}.story-lead{margin-left:auto;margin-right:auto}.phone-column{margin-top:0}.phone-frame{height:700px}.demo-progress{margin-top:1rem}}
@media(max-width:560px){.demo-header{height:62px;padding:0 1rem}.demo-header .wordmark{font-size:.97rem}.demo-label{display:none}.demo-reset{display:none}.demo-close{width:36px;height:36px}.demo-shell{min-height:calc(100svh - 62px)}.demo-story{display:block;min-height:auto;padding:0}.story-stage,.demo-progress{display:none}.phone-frame{width:100%;height:calc(100svh - 62px);min-height:570px;padding:0;border-radius:0;box-shadow:none;background:var(--paper)}.phone-screen{border-radius:0}.phone-top{display:none}.screen-header{padding-top:1.25rem}.frontoffice-screen{padding-top:1.4rem}}
@media(max-width:360px){.screen-content{padding-left:1rem;padding-right:1rem}.phone-frame{min-height:550px}.smart-key-preview{min-height:220px}.door-card{padding:.8rem}.lock-visual{margin:.4rem auto}.stay-services{margin:.55rem 0}}
@media(prefers-reduced-motion:reduce){.screen.active,.property-card-image,.status-animation .scan-line,.payment-loader,.key-celebration,.smart-key-preview,.lock-shackle{animation:none;transition:none}}