/* Hello Hosty site animations. Shared base: fonts, tokens, stage scaler, laptop, cursor, UI bits. */

:root{
  --coral:#F44A5C;--teal:#28B59D;--ink:#1A1A1A;--soft:#4A4A4A;--muted:#8A8A8A;
  --coral-soft:#FBE4E7;--teal-soft:#D8F0EB;--mint:#EAF8F4;--line:#E6E8EC;--grey:#F3F4F6;
  --abb:#FF385C;--bdc:#003580;--abb-soft:#FFE3E8;--bdc-soft:#E3EAF5;--vrbo:#5B6B82;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent}
body{font-family:var(--font);font-weight:400;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,h4,p{margin:0;font-weight:400}

/* Wrapper keeps the iframe's aspect; the stage is a fixed pixel canvas scaled to fit. */
.wrap{position:relative;width:100%;overflow:hidden}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}

/* Laptop drawn in CSS so the screen is a live DOM. Geometry set per page with CSS variables. */
.laptop{position:absolute;left:var(--lx);top:var(--ly);width:var(--lw)}
.laptop .lid{position:relative;width:100%;height:var(--lh);background:#1c1c1e;border-radius:22px 22px 10px 10px;padding:14px 14px 18px;box-shadow:0 30px 60px -30px rgba(26,26,26,.35)}
.laptop .lid::before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a3a3c}
.laptop .screen{position:relative;width:100%;height:100%;background:#fff;border-radius:8px;overflow:hidden}
.laptop .base{position:relative;margin:0 -4% 0;height:20px;background:linear-gradient(#e9eaee,#cfd2d8);border-radius:0 0 14px 14px}
.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:14%;height:7px;margin-left:-7%;background:#b9bcc4;border-radius:0 0 8px 8px}
.laptop .shadow{position:absolute;left:-6%;right:-6%;top:100%;height:40px;background:radial-gradient(ellipse at center,rgba(26,26,26,.22),rgba(26,26,26,0) 70%)}

/* Product chrome (Hello Hosty app look, big so it reads when the iframe is small). */
.app{position:absolute;inset:0;display:flex;flex-direction:column;font-size:17px;color:var(--ink);background:#fff}
.app .top{display:flex;align-items:center;height:62px;padding:0 28px;border-bottom:1px solid var(--line);flex-shrink:0}
.app .wm{font-weight:500;font-size:22px;letter-spacing:-.01em}
.app .wm span{color:var(--coral)}
.app .nav{display:flex;gap:30px;margin-left:auto;font-size:16px;color:var(--soft)}
.app .nav .on{color:var(--coral);font-weight:500}
.app .body{position:relative;flex:1;min-height:0}
.pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:999px;background:var(--teal);color:#fff;font-weight:500;font-size:16px;white-space:nowrap}
.pill.ghost{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}
.badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.badge.teal{background:var(--teal-soft);color:#157E6C}
.badge.coral{background:var(--coral-soft);color:#C83545}
.badge.grey{background:var(--grey);color:var(--soft)}
.badge.solid{background:var(--teal);color:#fff}
.chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:#fff;font-weight:500;font-size:14px;flex-shrink:0}
/* Channel chips are the platforms' own marks (site/img/brands), never letters. The letter stays for screen readers. */
.chip.abb,.chip.bdc,.chip.exp,.chip.vrbo,.chip.agd,.chip.trp,.chip.ggl{background-position:center;background-size:cover;background-repeat:no-repeat;color:transparent;font-size:0;border-radius:0}
.chip.abb{background-image:url(img/brands/airbnb.svg)}.chip.bdc{background-image:url(img/brands/booking.svg)}.chip.exp{background-image:url(img/brands/expedia.svg)}.chip.vrbo{background-image:url(img/brands/vrbo.png)}.chip.agd{background-image:url(img/brands/agoda.png)}.chip.trp{background-image:url(img/brands/tripcom.png)}.chip.ggl{background-image:url(img/brands/google.png)}
/* The Hello Hosty channel chip is the real icon; the letter inside is kept for screen readers only. */
.chip.hh{background:url(img/hh-icon.png) center/contain no-repeat;color:transparent;font-size:0;border-radius:0}
.ph{display:inline-block;width:44px;height:44px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#dfe7ef,#b9c6d6)}
.ph.b{background:linear-gradient(135deg,#efe3d6,#d8bfa6)}.ph.c{background:linear-gradient(135deg,#dbeee8,#a9d6c8)}.ph.d{background:linear-gradient(135deg,#ece4f3,#c8b7dc)}.ph.e{background:linear-gradient(135deg,#f2e6dd,#e0c3b3)}

/* Cursor */
.cursor{position:absolute;left:0;top:0;width:30px;height:34px;pointer-events:none;z-index:50;opacity:0;transform:translate(-4px,-3px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cursor.hand{transform:translate(-9px,-4px)}
.ripple{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none;z-index:49}

/* Toast / floating cards */
.toast{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:14px;box-shadow:0 18px 40px -16px rgba(26,26,26,.35),0 0 0 1px rgba(26,26,26,.05);font-size:16px;opacity:0;transform:translateY(12px);z-index:40;white-space:nowrap}
.toast .t{font-weight:500}
.toast .s{color:var(--soft);font-size:14px}
.tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;flex-shrink:0}
.tick svg{width:14px;height:14px}
.tick svg path{stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
.tick.go svg path{animation:draw .45s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.glow{animation:glow 1.1s ease-out 1}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(40,181,157,.55)}100%{box-shadow:0 0 0 16px rgba(40,181,157,0)}}
.flash{animation:flash .9s ease-out 1}
@keyframes flash{0%{background:var(--teal-soft)}100%{background:transparent}}
.zap{position:absolute;pointer-events:none;overflow:hidden;border-radius:inherit}
.zap::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:50%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:sweep .9s ease-out 1}
@keyframes sweep{to{left:120%}}
.typing{display:inline-flex;gap:5px;align-items:center;height:16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:.35;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.caret::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}}

/* The visitor's own cursor over the graphic: ripples, and the pause pill. */
.rip{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none;z-index:80;animation:hhRip .85s cubic-bezier(.22,1,.36,1) forwards}
.rip.big{width:70px;height:70px;margin:-35px 0 0 -35px;border-width:3px;animation-duration:1.05s}
.rip.big+.rip.big{animation-delay:.12s}
@keyframes hhRip{0%{opacity:.6;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}
/* A small, quiet state mark in the bottom right corner: pause while paused, play for a moment on resume. */
.pmark{position:absolute;right:20px;bottom:20px;width:34px;height:34px;border-radius:50%;background:rgba(26,26,26,.42);display:flex;align-items:center;justify-content:center;z-index:81;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.pmark.on{opacity:1;transform:scale(1)}
.pmark svg{width:12px;height:12px;fill:#fff}
.wrap{cursor:pointer}
/* The real Hello Hosty icon, never a drawn stand in. */
.hhi{display:inline-block;width:30px;height:30px;flex-shrink:0;vertical-align:middle}
.av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--soft);font-weight:500;font-size:14px;flex-shrink:0}