.screenshot-feature{align-items:center}
.screenshot-intro{min-width:0}
.screenshot-intro h2{max-width:590px;margin-bottom:26px}
.screenshot-intro .section-copy p{max-width:530px}
.product-screenshot{min-width:0}
.screenshot-open{display:block;position:relative;aspect-ratio:1.6;background:#fff;border:1px solid #e5deeb;border-radius:6px;overflow:hidden;box-shadow:0 12px 38px rgba(32,26,41,.045)}
.screenshot-open img{display:block;position:absolute;top:0;left:0;max-width:none;height:auto;transform-origin:top left}
/* Frame the relevant interface rather than shrinking the entire browser screenshot.
   The supplied PNGs remain untouched; each crop scales with its placeholder. */
.shot-booking-engine img{width:137.5%;transform:translate(-27.2727%,-7.9794%)}
.shot-future-available-dates img{width:233.724%;transform:translate(-28.7465%,-33.3704%)}
.shot-website-ai-chat img{width:187.9348%;transform:translate(-46.789%,-27.2827%)}
.screenshot-caption{display:block;padding-top:14px;font-size:11px;line-height:1.7}
.screenshot-caption p{margin:0}.screenshot-caption a{color:var(--violet);white-space:nowrap}
.availability-feature{background:var(--soft)}
#website-chat>.product-screenshot{order:-1}
.screenshot-caption a{display:inline-block;margin-top:6px}
@media(max-width:900px){.screenshot-caption{font-size:10px}}
@media(max-width:600px){.screenshot-intro h2{font-size:36px}.screenshot-open{border-radius:6px}}

.shot-reservation-calendar img{width:140%;transform:translate(-14.3%,-4.442%)}
.shot-guest-profile{margin-top:28px}
.shot-guest-profile .screenshot-open{aspect-ratio:512/640;max-width:420px;background:#fff}
.shot-guest-profile img{width:384.375%;height:auto;left:0;transform:translateX(-72.9675%)}
.shot-guest-invoice .screenshot-open{aspect-ratio:542/538;max-width:500px;background:#fff}
.shot-guest-invoice img{height:100%;width:100%;object-fit:contain;position:static}


/* Responsive native UI illustrations; content determines height, never a scaled bitmap. */
.product-visual{width:100%;container-type:inline-size}.pv-frame{padding:26px;background:#fff;border:1px solid #e5deeb;border-radius:14px;box-shadow:0 16px 44px rgba(32,26,41,.055);font:13px/1.5 var(--sans);color:var(--ink)}.pv-frame *{box-sizing:border-box}.pv-frame strong{font-weight:600}.pv-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.pv-heading strong{font-size:20px;letter-spacing:-.025em;display:block}.pv-heading span:not(.pv-mark){display:block;font-size:12px;color:var(--muted);margin-top:3px}.pv-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;background:#f1e8fd;border-radius:10px;color:var(--violet);font-size:24px;font-weight:700}.pv-toolbar,.pv-bottom,.pv-prompts{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.pv-tag{display:inline-block;padding:5px 9px;background:#f2ecfa;color:#6633a0;border-radius:6px;font-size:10px;font-weight:500;white-space:nowrap}.pv-tag.blue,.pv-reservation.blue{background:#edf3fd;color:#285a9d}.pv-tag.rose,.pv-reservation.rose{background:#fcecf1;color:#a13e60}.pv-tag.green,.pv-reservation.green{background:#eaf6ef;color:#276646}.pv-calendar{margin:20px 0 0}.pv-cal-head{display:grid;grid-template-columns:100px repeat(5,1fr);gap:0;padding:10px 0;color:var(--muted);font-size:11px;border-block:1px solid #eee8f3}.pv-cal-head span:not(:first-child){text-align:center}.pv-cal-row{display:grid;grid-template-columns:100px 1fr;align-items:center;border-bottom:1px solid #eee8f3;min-height:52px}.pv-cal-row>span{font-size:11px}.pv-track{display:grid;grid-template-columns:repeat(5,1fr);padding-block:8px;min-width:0}.pv-reservation{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:8px;border-radius:5px;grid-column:1/span 3}.pv-start-2{grid-column:2/span 3}.pv-start-3{grid-column:3/span 3}.pv-bottom{justify-content:space-between;margin-top:20px;font-size:11px;color:var(--muted)}.pv-identity{display:flex;align-items:center;gap:12px;margin-bottom:22px}.pv-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#f1e8fd;color:var(--violet);font-weight:600}.pv-identity>div{flex:1}.pv-identity strong,.pv-identity>div>span{display:block}.pv-identity strong{font-size:17px}.pv-identity>div>span{font-size:11px;color:var(--muted)}.pv-tabs{display:flex;gap:24px;border-bottom:1px solid #e8e1ef;font-size:12px;color:var(--muted);margin-bottom:20px}.pv-tabs>span{padding-bottom:10px}.pv-tabs .selected{color:var(--violet);border-bottom:2px solid var(--violet)}.pv-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}.pv-detail-grid span,.pv-detail-grid strong{display:block}.pv-detail-grid span{font-size:11px;color:var(--muted);margin-bottom:4px}.pv-summary{padding:14px 16px;background:#faf8fc;border-radius:8px}.pv-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:12px}.pv-line>strong{text-align:right}.pv-total{border-top:1px solid #e3dbea;margin-top:5px;padding-top:12px;color:var(--ink);font-weight:600}.pv-total strong{color:#276646}.pv-invoice-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}.pv-invoice-meta span,.pv-invoice-meta strong{display:block}.pv-invoice-meta span{font-size:9px;letter-spacing:.07em;color:var(--muted);margin-bottom:5px}.pv-invoice-table{margin-bottom:22px}.pv-invoice-table .pv-line{border-bottom:1px solid #eee8f3;padding-block:13px}.pv-invoice-table .pv-line:first-child{color:var(--muted);font-size:10px}.pv-search{display:flex;justify-content:space-between;gap:10px;background:#faf8fc;border-radius:7px;padding:13px;margin-bottom:18px;font-size:11px}.pv-room{display:flex;align-items:center;gap:12px;border:1px solid #e8e1ef;border-radius:9px;padding:20px 14px;margin-top:12px}.pv-room-icon{display:grid;place-items:center;width:40px;height:48px;border-radius:7px;background:#f3eef8;flex:none;color:var(--violet)}.pv-room-icon svg{width:24px;height:24px}.pv-room>div>strong,.pv-room>div>span{display:block}.pv-room>div>span{font-size:10px;color:var(--muted);margin-top:4px}.pv-rate{margin-left:auto;text-align:right;flex:none}.pv-notice{display:flex;gap:12px;background:#f8f5ee;border:1px solid #ece4d4;padding:16px;border-radius:8px;margin-bottom:22px;color:#685735}.pv-notice strong,.pv-notice div>span{display:block}.pv-notice div>span{font-size:11px;margin-top:4px}.pv-dates{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.pv-date{display:flex;flex-direction:column;align-items:center;padding:14px 4px;border:1px solid #e4d9f0;border-radius:8px;font-size:10px}.pv-date strong{font-size:26px;line-height:1.5}.pv-date small{font-size:9px;margin-top:10px}.pv-date.available{background:#f5effc;color:#6633a0}.pv-date.unavailable{background:#fafafa;color:#777}.pv-conversation{display:flex;flex-direction:column;gap:16px;margin-bottom:22px}.pv-bubble{padding:14px 16px;border:1px solid #e9e2ef;border-radius:12px 12px 12px 3px;max-width:86%;font-size:13px;align-self:flex-start}.pv-bubble.guest{align-self:flex-end;background:#f1e8fd;border-color:#f1e8fd;border-radius:12px 12px 3px 12px}.pv-input{display:flex;justify-content:space-between;border:1px solid #e9e2ef;border-radius:8px;margin-top:14px;padding:13px;color:var(--muted);font-size:11px}.pv-example{display:block;font-size:8px;letter-spacing:.12em;color:var(--muted);margin-top:5px}.pv-enter .pv-frame{animation:pv-arrive .8s cubic-bezier(.22,1,.36,1) both}.pv-enter .pv-step{animation:pv-arrive .85s cubic-bezier(.22,1,.36,1) both;animation-delay:.12s}.pv-enter .pv-step:nth-child(2){animation-delay:.24s}.pv-enter .pv-step:nth-child(3){animation-delay:.36s}.pv-enter .pv-step:nth-child(4){animation-delay:.48s}@keyframes pv-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@container(max-width:420px){.pv-frame{padding:18px}.pv-heading strong{font-size:18px}.pv-cal-head{grid-template-columns:76px repeat(5,1fr)}.pv-cal-row{grid-template-columns:76px 1fr}.pv-cal-row>span{font-size:10px}.pv-identity{flex-wrap:wrap}.pv-identity>.pv-tag{margin-left:56px}.pv-room{flex-wrap:wrap;padding:14px}.pv-room-icon{display:none}.pv-room>div>strong{font-size:12px}.pv-tabs{gap:18px;font-size:11px}.pv-dates{gap:6px}.pv-date small{font-size:8px}.pv-invoice-meta{flex-direction:column;gap:14px}.pv-line{font-size:11px}.pv-reservation{padding:7px 4px;font-size:9px}.pv-bubble{font-size:12px}}
@media(prefers-reduced-motion:reduce){.pv-enter .pv-frame,.pv-enter .pv-step{animation:none}}
.welcome-demo{min-width:0;background:#fff;border:1px solid #e5deeb;border-radius:16px;box-shadow:0 16px 44px rgba(32,26,41,.05);overflow:hidden;font:13px/1.5 var(--sans);color:var(--ink)}.welcome-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #eee8f3}.welcome-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#f1e8fd;color:var(--violet);flex:none}.welcome-icon svg{width:22px;height:22px}.welcome-head strong,.welcome-head div>span{display:block}.welcome-head strong{font-size:15px;font-weight:600}.welcome-head div>span{font-size:11px;color:var(--muted);margin-top:2px}.welcome-status{margin-left:auto;font-size:10px;color:var(--violet)}.welcome-thread{display:flex;flex-direction:column;gap:12px;padding:22px 24px;min-height:355px}.welcome-message{max-width:87%;padding:11px 14px;background:#f7f5fa;border:1px solid #eee8f3;border-radius:11px 11px 11px 3px;align-self:flex-start}.welcome-message small,.welcome-result small{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}.welcome-message p{margin:0;font-size:12px;line-height:1.55;color:var(--ink)}.welcome-guest{align-self:flex-end;background:#f1e8fd;border-color:#eadff9;border-radius:11px 11px 3px 11px}.welcome-result{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #dbe8df;border-radius:9px;background:#f5faf6}.welcome-check{display:grid;place-items:center;background:#e0eee4;color:#28633d;width:28px;height:28px;border-radius:50%;flex:none}.welcome-result strong,.welcome-result div>span{display:block}.welcome-result strong{font-size:14px;font-weight:600}.welcome-result div>span{font-size:11px;margin-top:3px;color:#376147}.welcome-composer{position:relative;margin:0 24px 14px;border:1px solid #e5deeb;border-radius:8px;padding:12px 14px;color:var(--muted);font-size:11px;min-height:42px}.welcome-send{float:right;color:var(--violet)}.welcome-writing{display:none}.welcome-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 24px 18px;font-size:9px;color:var(--muted)}.welcome-controls{display:flex;gap:12px}.welcome-controls button{background:transparent;color:var(--violet);padding:6px 2px;min-height:32px;font:inherit;font-size:11px;border:0;cursor:pointer}.welcome-controls button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}.welcome-playing .welcome-message,.welcome-playing .welcome-result{animation:welcome-arrive .6s cubic-bezier(.22,1,.36,1) both}.welcome-playing .welcome-one{animation-delay:1.4s}.welcome-playing .welcome-two{animation-delay:2.6s}.welcome-playing .welcome-three{animation-delay:4.2s}.welcome-playing .welcome-four{animation-delay:5.5s}.welcome-playing .welcome-five{animation-delay:7s}.welcome-playing .welcome-writing{display:inline-block;position:absolute;left:14px;animation:welcome-type 1.4s steps(3,end) both;overflow:hidden;white-space:nowrap;color:var(--ink)}.welcome-playing .welcome-placeholder{animation:welcome-placeholder 1.4s step-end both}.welcome-paused *{animation-play-state:paused!important}@keyframes welcome-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes welcome-type{0%{width:0;opacity:1}70%,99%{width:24px;opacity:1}100%{width:24px;opacity:0}}@keyframes welcome-placeholder{0%{opacity:0}100%{opacity:1}}
@media(max-width:600px){.welcome-head{padding:16px}.welcome-thread{padding:18px 16px;gap:10px}.welcome-composer{margin-inline:16px}.welcome-footer{padding-inline:16px}.welcome-message{max-width:94%}.welcome-status{font-size:9px}.welcome-head strong{font-size:13px}.welcome-result div>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.welcome-playing .welcome-message,.welcome-playing .welcome-result,.welcome-playing .welcome-placeholder{animation:none}.welcome-playing .welcome-writing,.welcome-controls{display:none}}
/* Hotel website context with a compact floating concierge. */
.hotel-demo{position:relative;isolation:isolate;min-width:0;padding:112px 18px 36px;background:#fcfbf8;border:1px solid #e4dfd6;border-radius:12px;overflow:hidden;container-type:inline-size}.hotel-demo-site{position:absolute;inset:0;color:#423e35;font:10px/1.5 var(--sans);pointer-events:none}.hotel-demo-nav{height:47px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff}.hotel-demo-nav strong{letter-spacing:.16em;font-size:10px}.hotel-demo-nav>span{font-size:8px;color:#7a756c}.hotel-demo-nav>b{font-size:7px;letter-spacing:.06em;border:1px solid #d9d2c4;padding:5px 8px}.hotel-demo-hero{height:236px;position:relative;overflow:hidden;background:#e4d8c5}.hotel-demo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:.48}.hotel-demo-hero>div{position:relative;padding:35px 24px}.hotel-demo-hero small{font-size:7px;letter-spacing:.1em;color:#3d382f}.hotel-demo-hero h3{font:normal 31px/1.1 var(--serif);margin:12px 0 20px;color:#28251f}.hotel-demo-hero div>span{font-size:8px;border-bottom:1px solid #8d806b;padding-bottom:4px}.hotel-demo-booking{position:relative;display:flex;gap:20px;width:72%;margin:-16px 0 0 20px;padding:14px;background:white;border:1px solid #e7e2d9;border-radius:4px;box-shadow:0 4px 16px #3027190a;font-size:6px;letter-spacing:.07em}.hotel-demo-booking b{font-size:9px;font-weight:500;letter-spacing:0;line-height:2}.hotel-demo-story{padding:30px 24px}.hotel-demo-story small{font-size:7px;letter-spacing:.12em;color:#83745c}.hotel-demo-story h4{font:normal 25px/1.2 var(--serif);margin:12px 0;color:#423e35}.hotel-demo-story p{font-size:10px;line-height:1.8;color:#7a756c}.hotel-demo-story>span{font-size:8px;border-bottom:1px solid #ded6c8;padding-bottom:5px}.hotel-demo>.welcome-demo{position:relative;margin-left:auto;width:min(296px,100%);border-radius:12px;box-shadow:0 18px 50px #22183020;z-index:1}.hotel-demo .welcome-head{padding:12px;gap:8px}.hotel-demo .welcome-icon{width:29px;height:29px;border-radius:8px}.hotel-demo .welcome-icon svg{width:18px;height:18px}.hotel-demo .welcome-head strong{font-size:11px}.hotel-demo .welcome-head div>span{font-size:9px}.hotel-demo .welcome-status{font-size:8px}.hotel-demo .welcome-thread{padding:12px;gap:9px;min-height:0}.hotel-demo .welcome-message{padding:8px 10px;max-width:94%}.hotel-demo .welcome-message p{font-size:11px;line-height:1.5}.hotel-demo .welcome-message small,.hotel-demo .welcome-result small{font-size:7px;margin-bottom:3px}.hotel-demo .welcome-result{padding:10px;gap:8px}.hotel-demo .welcome-check{width:23px;height:23px}.hotel-demo .welcome-result strong{font-size:11px}.hotel-demo .welcome-result div>span{font-size:9px}.hotel-demo .welcome-composer{margin:0 12px 9px;padding:9px 10px;min-height:34px;font-size:10px}.hotel-demo .welcome-writing{left:10px}.hotel-demo .welcome-footer{padding:0 12px 10px;font-size:8px;gap:4px}.hotel-demo .welcome-controls{margin-left:auto}.hotel-demo .welcome-controls button{font-size:10px;min-height:26px}.hotel-demo-label{position:absolute;bottom:12px;left:18px;font:7px var(--sans);letter-spacing:.1em;color:#817a6e}
@container(max-width:390px){.hotel-demo-nav>span{display:none}.hotel-demo-hero>div{padding:23px 16px}.hotel-demo-hero h3{font-size:27px}.hotel-demo-story{padding-left:16px}.hotel-demo>.welcome-demo{margin-top:48px;width:100%}.hotel-demo-booking{margin-left:12px;gap:10px}.hotel-demo-story h4{font-size:22px}}
/* Show the complete supplied booking screenshots, preserving their natural proportions. */
.supplied-screenshot.shot-booking-engine .screenshot-open,.supplied-screenshot.shot-future-available-dates .screenshot-open{aspect-ratio:auto}
.supplied-screenshot.shot-booking-engine .screenshot-open img,.supplied-screenshot.shot-future-available-dates .screenshot-open img{position:static;width:100%;max-width:100%;height:auto;transform:none}
/* Available dates: trim only the side backdrop; retain the screenshot's full height. */
.supplied-screenshot.shot-future-available-dates .screenshot-open{aspect-ratio:768/899}
.supplied-screenshot.shot-future-available-dates .screenshot-open img{position:absolute;top:0;left:0;width:233.724%;max-width:none;height:auto;transform:translateX(-28.7465%)}
