/* The guide illustrations are drawn in CSS so they stay sharp on every screen. */
.checkin-illustration{height:365px;background:radial-gradient(ellipse at 70% 40%,#506049,#283326 70%)}
.checkin-forest{background:repeating-linear-gradient(91deg,transparent 0 23px,#bac8a70a 25px 28px,transparent 31px 59px),radial-gradient(ellipse at 50% 100%,#a5ad6f4d,transparent 70%)}
.checkin-logo{z-index:3;width:68px;opacity:.65;top:16px;left:16px}
.ci-phone{--phone-width:170px;position:relative;flex-shrink:0;width:var(--phone-width);height:324px;padding:5px;border:2px solid #8f9390;border-radius:29px;background:linear-gradient(105deg,#646963,#0b100c 24%,#343a34 85%,#a0a59e);box-shadow:1px 0 0 1px #141a15,12px 17px 22px #0d150f66,inset 1px 0 1px #d6dad1;color:#29352c;transform:rotate(-3deg)}
.ci-phone:before{content:"";position:absolute;left:-4px;top:68px;height:40px;width:2px;border-radius:2px;background:#747a71;box-shadow:0 44px #747a71}
.ci-phone:after{content:"";position:absolute;right:-4px;top:99px;height:46px;width:2px;border-radius:2px;background:#8e948b}
.ci-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:23px;background:#f1f0ea}
.ci-phone-camera{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:52px;height:14px;border-radius:20px;background:#0e130f;z-index:2}
.ci-phone-camera:after{content:"";position:absolute;right:8px;top:4px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 30% 35%,#4b6464,#182625 60%);box-shadow:0 0 1px #56757c}
.ll-checkin .ci-phone-status{height:33px;display:flex;align-items:flex-start;justify-content:space-between;padding:10px 11px 0;font:600 8px/1 var(--sans);letter-spacing:0}
.ci-phone-status-icons{display:flex;align-items:center;gap:4px;font-size:7px}
.ci-phone-status-icons i{width:12px;height:6px;border:1px solid currentColor;border-radius:2px;background:linear-gradient(to right,currentColor 75%,transparent 75%)}
.ci-phone-home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:54px;height:3px;background:#27352b;border-radius:5px;opacity:.8}
.ci-phone-message{position:absolute;left:50%;top:22px;transform:translateX(-50%) rotate(-3deg)}
.ll-checkin .ci-message-header{height:65px;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:1px solid #dbded7;background:#e4e8df99}
.ll-checkin .ci-message-header>span{position:absolute;left:11px;top:6px;font:25px Georgia;color:#637c5e}
.ll-checkin .ci-message-header>b{display:grid;place-items:center;border-radius:50%;width:30px;height:30px;background:#637858;color:#fffdf4;font:400 13px var(--serif)}
.ll-checkin .ci-message-header>strong{font:600 9px var(--sans)}
.ll-checkin .ci-message-date{font:8px var(--sans);color:#798276;text-align:center;padding-top:11px}
.ll-checkin .ci-sms-bubble{position:relative;width:calc(100% - 26px);margin:9px 13px 0;padding:12px 10px;border-radius:13px 13px 13px 3px;background:#dce2d4;font:9px/1.5 var(--sans);animation:ci-message-arrival 8s ease infinite}
.ll-checkin .ci-sms-bubble>strong{display:block;font-weight:600;margin-bottom:7px;font-size:10px;line-height:1.3}
.ll-checkin .ci-sms-bubble>span{display:block;font-size:9px}
.ll-checkin .ci-masked-code{display:block;font-size:20px;line-height:1.4;letter-spacing:2px;color:#415139}
.ll-checkin .ci-sms-bubble>small{font-size:8px;color:#727b68}
.ci-email-toast{position:absolute;left:7px;right:7px;bottom:44px;display:flex;align-items:center;gap:7px;border:1px solid #bcc4b170;border-radius:12px;background:#fafbf7e8;box-shadow:0 8px 17px #26321d26;padding:10px 8px;animation:ci-email-arrival 8s ease infinite;backdrop-filter:blur(6px)}
.ci-email-toast .ci-mail-icon{display:grid;place-items:center;flex-shrink:0;width:23px;height:23px;border-radius:7px;background:#58715e;color:#fafff5;font-size:18px}
.ll-checkin .ci-email-toast>div{display:flex;flex-direction:column;gap:3px;font:8px var(--sans)}
.ll-checkin .ci-email-toast b{font-size:9px;font-weight:600}.ll-checkin .ci-email-toast i{align-self:flex-start;margin-left:auto;font:6px var(--sans);color:#74806b}
.ci-message-input{position:absolute;bottom:19px;left:9px;right:9px;display:flex;align-items:center;gap:8px;font-size:18px;color:#86917e}.ll-checkin .ci-message-input i{flex:1;border:1px solid #d0d7c9;border-radius:12px;font:8px var(--sans);padding:6px 8px}
.ci-keypad{width:96px;height:201px;position:relative;flex-shrink:0;padding:4px 4px 34px;border-radius:3px;background:linear-gradient(100deg,#808886,#4b5351 50%,#656f6b);box-shadow:5px 1px #373f3d,7px 2px 1px #929893,16px 15px 19px #0d150f73;border:1px solid #a0a6a0;transform:perspective(500px) rotateY(-8deg);transition:filter .3s,transform .3s}
.ci-keypad-glass{position:relative;height:100%;padding:31px 13px 15px;border:1px solid #a9b0a54d;border-radius:2px;background:linear-gradient(113deg,#353c3a,#232826 40%,#111813 40.5%,#151d18 80%,#202925)}
.ci-keypad-digits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 12px;text-align:center;font:300 13px/1 var(--sans);color:#f4f8ed;text-shadow:0 0 4px #d1f0c129}
.ci-keypad-digits>span{position:relative}.ci-keypad-digits>span:nth-child(2):before{content:"";position:absolute;inset:-5px;border-radius:50%;background:#dcebc636;opacity:0;animation:ci-key-touch 7s infinite}
.ci-keypad-digits svg{width:12px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2}
.ci-keypad-card{position:absolute;left:42%;top:70px;width:12px;height:8px;fill:none;stroke:#b9c5b4;stroke-width:1.2}
.ci-keypad-led{position:absolute;bottom:11px;left:31%;width:38%;height:3px;border-radius:2px;background:#99d86c;box-shadow:0 0 8px #9ee67666;animation:ci-access-light 7s infinite}
.ci-entry-devices{position:absolute;inset:37px 18px 19px;display:flex;align-items:center;justify-content:center;gap:31px}
.ci-entry-devices .ci-phone{--phone-width:145px;height:281px;transform:rotate(3deg)}
.ci-guest-screen{height:calc(100% - 33px);background:linear-gradient(155deg,#384932,#1f2c21);color:#eff0e4;text-align:center;padding:5px 13px 15px}
.ci-guest-screen>img{display:block;width:68px;height:auto;margin:2px auto 16px;opacity:.85}.ll-checkin .ci-guest-title{display:block;font:8px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#c6cfbc;margin-bottom:6px}
.ll-checkin .ci-guest-screen>strong{display:block;font:400 17px/1.1 var(--serif);color:#eff0e4}.ci-guest-lock svg{width:27px;height:30px;fill:none;stroke:#c2cdae;stroke-width:1.4;margin-block:17px 12px}
.ll-checkin .ci-unlock-button{display:block;padding:10px 2px;border-radius:25px;color:#34412f;background:#e6eadc;font:500 10px var(--sans);box-shadow:0 0 0 0 #dfeec000;animation:ci-unlock-tap 7s infinite}
.ll-checkin .ci-guest-screen>small{display:block;margin-top:11px;color:#acb99f;font:8px var(--sans)}
.ci-phone-guest .ci-phone-home{background:#dae2d0}
.ll-checkin[data-entry-method=code] .ci-phone-guest{filter:brightness(.65)}
.ll-checkin[data-entry-method=guest] .ci-entry-devices>.ci-keypad{filter:brightness(.65)}
.ll-checkin[data-entry-method=code] .ci-unlock-button,.ll-checkin[data-entry-method=guest] .ci-keypad-digits>span:before{animation:none}
.ci-door-wall{position:absolute;inset:48px 24px 49px;max-width:300px;margin:auto;background:repeating-linear-gradient(90deg,#694934 0,#ad825b 2px,#9b704c 18px,#775138 20px,#3a2b2150 21px);box-shadow:inset 6px 0 23px #11190d6b;border-top:5px solid #332b21}
.ci-door-opening{position:absolute;left:15%;top:15px;bottom:0;width:56%;background:#100f09;border:8px solid #232a25;box-shadow:0 0 0 2px #696b5350,2px 2px 8px #191a1599;perspective:550px}
.ci-room-light{position:absolute;inset:0;background:linear-gradient(145deg,#ede0ad,#b58b58 60%,#392e1e);opacity:.8}.ci-room-light:after{content:"";position:absolute;left:15%;right:0;bottom:20px;height:48px;background:linear-gradient(#b5ab87,#77725a);border-radius:8px 0 0;box-shadow:0 9px #60513e}
.ci-door-leaf{position:absolute;inset:-1px;border:5px solid #2a3430;background:#34443a;transform-origin:100% 50%;transform-style:preserve-3d;animation:ci-door-open 7s ease-in-out infinite;box-shadow:-2px 0 1px #b3b9a15e}
.ci-glass-reflections{position:absolute;inset:0;background:linear-gradient(115deg,#edf5c725 0%,transparent 35%,#d6e6c52c 36%,transparent 68%),repeating-linear-gradient(91deg,#222d1ad9 0px,#58614188 7px,#2e3d2d 10px,#222c2266 25px,#8990695e 29px,#1c291d77 32px,#5a65512b 51px),linear-gradient(#77856d,#8a8b62 55%,#45482d);box-shadow:inset 2px 0 8px #101a0a4d}
.ci-door-bar{position:absolute;left:8px;top:39%;width:5px;height:38%;border-radius:4px;background:linear-gradient(90deg,#666d67,#e6e8d6 42%,#a4aea1 65%,#4b544e);box-shadow:2px 2px 4px #122011aa}
.ci-door-bar:before,.ci-door-bar:after{content:"";position:absolute;left:3px;width:6px;height:3px;background:#c2c9b9}.ci-door-bar:before{top:9px}.ci-door-bar:after{bottom:9px}
.ci-hinge{position:absolute;right:-8px;width:5px;height:18px;border-radius:2px;background:linear-gradient(90deg,#303a33,#8c998a,#243326)}.ci-hinge-top{top:22px}.ci-hinge-bottom{bottom:22px}
.ci-door-keypad{position:absolute;left:78%;top:44%;transform:scale(.3);transform-origin:0 0}.ci-door-keypad .ci-keypad-digits>span:before{animation:none}
.ci-deck{position:absolute;bottom:-19px;left:-11px;right:-11px;height:20px;background:repeating-linear-gradient(0deg,#ae865f,#9c724e 5px,#6e533c 6px);transform:perspective(150px) rotateX(25deg);box-shadow:0 6px 7px #18201388}
.checkin-green-caption{position:absolute;right:16px;top:21px;color:#d0eab8;font:8px var(--sans);letter-spacing:.06em}.checkin-green-caption:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#b4e580;box-shadow:0 0 6px #95dc6a;margin-right:5px;animation:ci-access-light 7s infinite}
.checkin-door-moves{position:absolute;left:10px;right:10px;bottom:15px;display:flex;justify-content:center;gap:15px;color:#f0f2e7;font:10px var(--sans)}.checkin-door-moves>span{animation:ci-push-label 7s infinite}.checkin-door-moves>span+span{animation-name:ci-pull-label}
.ci-gates-ground{position:absolute;bottom:0;left:-10%;right:-10%;height:120px;background:linear-gradient(#af9c7c,#756f50);transform:perspective(200px) rotateX(18deg);box-shadow:0 -4px 25px #b8b39720}
.ci-gates{position:absolute;left:5%;right:5%;top:39%;height:100px;display:flex;align-items:center;justify-content:center;gap:0}
.ci-gate{width:41%;height:94px;position:relative;perspective:450px}.ci-gate-post{position:absolute;left:0;top:-8px;width:6px;height:114px;background:linear-gradient(90deg,#242b25,#5f6051 50%,#2c332b);box-shadow:3px 4px 4px #13201480;border-radius:2px}.ci-gate-post:nth-of-type(2){left:auto;right:0}
.ci-gate-leaf{position:absolute;inset:0 6px 0 5px;border:3px solid #3a3d2f;transform-origin:0 50%;transform-style:preserve-3d;animation:ci-gate-open 9s ease-in-out infinite;background:#141d1210;box-shadow:5px 8px 10px #1524124a;display:flex;flex-direction:column;justify-content:space-around;padding-block:2px}
.ci-gate:last-child .ci-gate-leaf{transform-origin:100% 50%;animation-name:ci-gate-open-right;animation-delay:4.5s}
.ci-gate-leaf:after{content:"";position:absolute;right:3px;top:34%;width:4px;height:16px;background:#979078;border-radius:1px}
.ci-gate-leaf i,.ci-fence-middle i{display:block;height:14px;width:100%;background:repeating-linear-gradient(0deg,#986743 0,#94623e 2px,#ad8157 3px,#9b6e47 4px);box-shadow:0 1px 1px #2b2c1799;border:1px solid #b9976b55}
.ci-fence-middle{display:flex;flex-direction:column;justify-content:space-around;width:15%;height:70px}
.ll-checkin .ci-gate>b{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);font:600 11px var(--sans);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eee8d6;color:#4b543d}
.ci-approaches{position:absolute;bottom:46px;left:5%;right:5%;display:flex;justify-content:space-between;gap:17px;color:#fbf8e9}.ci-approaches>span{display:flex;align-items:center;gap:5px;font:8px/1.5 var(--sans);max-width:45%}.ci-approaches i{font:24px var(--sans);font-style:normal}.ll-checkin .checkin-visual-label{bottom:18px;color:#fbf8ed;font-size:8px}
@keyframes ci-message-arrival{0%,7%{opacity:0;transform:translateY(8px)}16%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes ci-email-arrival{0%,27%{opacity:0;transform:translateY(13px)}38%,91%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes ci-key-touch{0%,8%,22%,100%{opacity:0}13%,18%{opacity:1}}
@keyframes ci-access-light{0%,20%,96%,100%{opacity:.14}29%,87%{opacity:1}}
@keyframes ci-unlock-tap{0%,12%,30%,100%{box-shadow:0 0 0 0 #dfeec000}19%{box-shadow:0 0 0 6px #dfeec035}}
@keyframes ci-door-open{0%,32%,96%,100%{transform:rotateY(0)}44%{transform:rotateY(-6deg)}66%,84%{transform:rotateY(31deg)}}
@keyframes ci-push-label{0%,30%,55%,100%{opacity:.4}36%,47%{opacity:1}}
@keyframes ci-pull-label{0%,53%,94%,100%{opacity:.4}60%,83%{opacity:1}}
@keyframes ci-gate-open{0%,14%,95%,100%{transform:translateX(0)}36%,70%{transform:translateX(-90%)}}
@keyframes ci-gate-open-right{0%,14%,95%,100%{transform:translateX(0)}36%,70%{transform:translateX(90%)}}
@media(max-width:1100px){.checkin-illustration{height:365px}.ci-door-wall{max-width:300px;width:80%}.ci-gates{max-width:440px;margin-inline:auto}.ci-approaches{max-width:440px;margin-inline:auto}}
@media(max-width:600px){.checkin-illustration{height:345px}.ci-phone-message{top:12px}.ci-entry-devices{gap:26px;inset-inline:14px}.ci-entry-devices .ci-phone{--phone-width:135px;height:272px}.ci-entry-devices>.ci-keypad{width:82px;height:183px;padding-bottom:28px}.ci-entry-devices>.ci-keypad .ci-keypad-glass{padding-inline:10px;padding-top:25px}.ci-entry-devices>.ci-keypad .ci-keypad-digits{gap:12px 10px;font-size:12px}.ci-entry-devices>.ci-keypad .ci-keypad-card{top:63px;left:41%;width:11px;height:7px}.ci-door-wall{inset-inline:20px}.checkin-green-caption{font-size:7px}.ci-approaches{gap:8px}.ci-approaches>span{font-size:8px}.checkin-door-moves{font-size:9px}}
@media(max-width:360px){.ci-entry-devices{gap:21px}.ci-entry-devices .ci-phone{--phone-width:120px;height:260px}.ci-guest-screen{padding-inline:9px}.ll-checkin .ci-guest-screen>strong{font-size:16px}.ci-guest-screen>img{margin-bottom:11px}}
@media(prefers-reduced-motion:reduce){.ll-checkin *{animation:none!important;transition:none!important}}