/* Layout only. Every colour, font, radius, shadow and transition comes from v0.css (the live v0 page, unchanged). */
.navdd .nav-dd{font-size:14.5px;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:var(--r-sm);background:none}
.navdd .nav-dd:hover,.navdd .nav-dd[aria-expanded="true"]{background:rgba(18,21,33,.05);filter:none}
.navdd .vsw-menu{width:320px}
.nav-links{align-items:center}
.mobile-menu .vsw-h{padding:12px 14px 4px}
.stacks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.stacks .stack{position:static;display:grid;padding:clamp(16px,2.4vw,26px)}
.stack-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:4px 10px 12px}
.stack-h h3{font-size:clamp(2rem,3.4vw,2.8rem)}
.stack .rail-link{align-items:flex-start;padding:11px 10px}
.stack .rail-link .i{margin-top:3px;flex:none}
.stack .rail-link span{display:grid;gap:2px}
.stack .rail-link b{color:var(--ink);font-size:15.5px}
.stack .rail-link small{font-weight:500;font-size:13.5px}
.stack-cta{padding:12px 10px 4px}
.pg-hero .pg-photo{margin:0;padding:clamp(10px,1.4vw,14px);border-radius:var(--r-2xl)}
.pg-photo img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:68% center;border-radius:calc(var(--r-2xl) - 12px)}
.fp-kicker .pill{margin-left:6px}
.fpanel h3 .pill{vertical-align:middle;font-size:12px;margin-left:6px}
.more-sec{padding-block:0 clamp(24px,4vw,48px)}
.more-sec .start-foot{margin-top:0}
.more-sec .mods a{text-decoration:none;color:inherit}
@media (max-width:960px){.stacks{grid-template-columns:minmax(0,1fr)}.stacks .stack{display:grid}}
/* full-bleed home hero: the film fills the hero edge to edge, play button centred, copy below it */
.hero-stack{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(72px + clamp(28px,4vw,56px));padding-bottom:clamp(28px,4vw,56px)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--dev)}
.hero-bg .vstage{position:absolute;inset:0;aspect-ratio:auto;max-width:none;border-radius:0;box-shadow:none;container-type:size;pointer-events:none}
.hero-bg .vyt iframe{inset:auto;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%) scale(1.12)}
.hero-bg .film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;z-index:1}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(18,21,33,.22),rgba(18,21,33,0) 26%,rgba(245,247,251,0) 52%,rgba(245,247,251,.55) 74%,rgba(245,247,251,.9) 90%,var(--bg))}
.hero-bg .vposter{background:none}
.hero-bg .vposter .vmini,.hero-bg .vposter .vcap,.hero-bg .vbtn,.hero-bg .vmute,.hero-bg .vend,.hero-bg .verr{display:none!important}
.yt-blocked .hero-bg #sec-video{display:none}
.film-on .hero-bg .film-still{display:none}
.hero-center{position:relative;display:grid;justify-items:center;gap:clamp(20px,3vw,40px)}
.hero-stack .hero-film{position:relative;width:min(760px,100%);height:clamp(170px,22vw,280px);display:grid;place-items:center}
.hero-stack .hero-media{position:relative;z-index:6}
.hero-stack .hero-playbtn{position:relative;right:auto;top:auto;bottom:auto;transform:none}
.hero-stack .hero-playbtn:hover{transform:scale(1.04)}
.hero-stack:has(.hero-media.is-playing) .hero-film{position:static}
.hero-stack:has(.hero-media.is-playing) .kw{visibility:hidden}
.hero-stack:has(.hero-media.is-playing) .hero-player{position:fixed;inset:72px 0 0 0}
.hero-stack:has(.hero-media.is-playing) .hero-player .vframe{width:min(94cqw,calc(90cqh * 16 / 9))}
.hero-stack .hero-copy{position:relative;max-width:920px;margin:0 auto;padding:clamp(24px,3.4vw,44px) clamp(20px,4vw,56px);text-align:center}
.hero-stack .hero-copy .eyebrow{justify-content:center}
.hero-stack .hero-ctas,.hero-stack .hero-facts{justify-content:center}
.hero-stack h1{margin:16px 0 18px}
.hero-stack .lede{max-width:640px;margin-inline:auto}
.kw{position:absolute;inset:0;pointer-events:none}
.kw span{position:absolute;left:50%;top:50%;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);will-change:transform,opacity}
.kw span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
@media (max-width:960px){.hero-stack .hero-film{height:190px}.kw span{font-size:11px;padding:4px 9px;gap:5px}.kw span::before{width:5px;height:5px}
.hero-stack .hero-playbtn{font-size:14px;padding:6px 16px 6px 6px}.hero-stack .hero-playbtn b{width:44px;height:44px;flex:none}}
/* PNG module icons */
.pi{width:30px;height:30px;object-fit:contain;flex:none}
.stack .rail-link .pi{width:40px;height:40px;margin-top:-2px}
.navdd .vsw-menu a{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center}
.navdd .vsw-menu a .pi{grid-row:1/3;grid-column:1;width:36px;height:36px}
.navdd .vsw-menu a b,.navdd .vsw-menu a span{grid-column:2}
.pg-ic{display:block;width:clamp(64px,7vw,88px);height:auto;margin-bottom:6px}
.more-sec .mods a{display:inline-flex;align-items:center;gap:8px}
.more-sec .mods .pi{width:26px;height:26px}
.incl-card{max-width:none}
.incl .board td:not(:first-child),.incl .board th:not(:first-child){text-align:center;white-space:nowrap}
.incl .board td:first-child{white-space:normal}
.foot-root{display:inline-flex;align-items:center;gap:6px;font-weight:600;justify-self:start}
.foot-logo{display:inline-flex;align-items:center;gap:10px;justify-self:start}
.foot-logo:hover{text-decoration:none}
/* breadcrumb back to the hotels home */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;margin:0 0 16px;padding:0;font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--faint)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.crumb-bar{padding-top:clamp(20px,3vw,36px)}
.crumb-bar .crumbs ol{margin:0}
.crumb-bar + .sec{padding-top:clamp(20px,3vw,40px)}
/* fuller pages: card grids, two-up cards, grouped tables */
.sec-more{padding-block:clamp(48px,7vw,96px)}
.cat-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.two-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.cat{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.4vw,28px);border-radius:var(--r-xl)}
.cat h3{font-size:1.2rem;letter-spacing:-.01em}
.cat p{color:var(--muted);font-size:14.5px}
.cat .pi{width:48px;height:48px}
.cat .pill{justify-self:start}
.cat .ticks{margin:4px 0 0}
.cat-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;margin-top:4px}
.cat-more:hover{text-decoration:underline}
.chat-grid .cat{padding:clamp(12px,1.6vw,18px)}
.chat-grid .chat{margin:0}
.board tr.grp th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:18px}
.compare .board td:not(:first-child),.compare .board th:not(:first-child){text-align:center;white-space:nowrap}
@media (max-width:960px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.two-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.cat-grid{grid-template-columns:minmax(0,1fr)}}
.sec-more .board td{white-space:normal}
.sec-more .board td:first-child{min-width:150px}
/* Watch film: the copy card sinks and fades, then the film rises in a rounded frame inside the hero, already playing */
.hero-copy-wrap{width:100%;transition:opacity .5s var(--ease),translate .6s var(--ease),visibility 0s}
.hero-stack:has(.hero-media.is-playing) .hero-copy-wrap{opacity:0;translate:0 72px;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease),translate .6s var(--ease),visibility 0s .6s}
.hero-stack:has(.hero-media.is-playing) .hero-center,.hero-stack:has(.hero-media.is-playing) .hero-media{position:static}
.hero-stack:has(.hero-media.is-playing) .hero-player{position:absolute;inset:0 0 auto 0;height:100svh;padding-top:72px;background:rgba(245,247,251,.12);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);animation:filmDim .6s ease both}
.hero-stack:has(.hero-media.is-playing) .hero-player .vframe{width:min(92cqw,calc(86cqh * 16 / 9));animation:filmIn 1s var(--ease) .3s both}
.hero-stack:has(.hero-media.is-playing) .hero-player .vclose{top:86px;animation:filmDim .4s ease .9s both}
@keyframes filmIn{from{opacity:0;translate:0 48px;scale:.94}}
@keyframes filmDim{from{opacity:0}}
/* soft ripples inside the amber play circle */
.hero-stack .hero-playbtn b{position:relative;overflow:hidden;isolation:isolate}
.hero-stack .hero-playbtn b svg{position:relative;z-index:1}
.hero-stack .hero-playbtn b::before,.hero-stack .hero-playbtn b::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:ripple 2.4s ease-out infinite;pointer-events:none}
.hero-stack .hero-playbtn b::after{animation-delay:1.2s}
@keyframes ripple{from{scale:.3;opacity:.9}to{scale:1.05;opacity:0}}
/* hotel logos right under the hero; the numbers sit next to the final CTA */
.proof-logos{padding-block:clamp(4px,1.5vw,16px) 0}
.proof-logos .mq-label{margin-top:0;text-align:center}
.proof-logos .marquee{margin-top:12px;padding-block:10px}
.proof-logos .mq-track ul{gap:20px;padding-right:20px}
.proof-logos .mq-track li{opacity:1}
.logo-tile{display:grid;place-items:center;width:150px;height:72px;padding:12px 18px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-1)}
.logo-tile img{width:100%;height:100%;max-height:44px;object-fit:contain;filter:grayscale(1) contrast(1.2);opacity:.62;mix-blend-mode:multiply}
.proof-stats{padding-block:clamp(24px,4vw,48px) 0}
@media (prefers-reduced-motion:reduce){.hero-stack .hero-playbtn b::before,.hero-stack .hero-playbtn b::after{animation:none;opacity:0}.hero-copy-wrap{transition:none}}
@media (max-width:640px){.logo-tile{width:118px;height:58px;padding:10px 14px;border-radius:var(--r-md)}.logo-tile img{max-height:36px}.proof-logos .mq-track ul{gap:12px;padding-right:12px}}
/* nav bar: opaque white behind the logo, easing into the bar's own glass by the "360" */
.nav-bar{background:linear-gradient(90deg,#fff 0,#fff 56px,rgba(255,255,255,.62) 200px)}
/* hero loop: a 10-second hotel day fills the hero; the YouTube stage stays for the v0 script but is not shown */
.hero-bg .hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-bg:has(.hero-loop) .vstage{display:none}
/* film end card: one line, three buttons, a quiet replay */
.end-card{gap:12px}
.end-card p{margin-bottom:4px}
.end-again{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:6px 8px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--metal-2);cursor:pointer}
.end-again:hover{color:var(--white)}
.end-again .i{width:14px;height:14px}
@media (max-width:640px){.end-card{gap:8px;padding:12px}.end-card h3{font-size:1rem}.end-card p{font-size:12px;margin:0}.end-card .row{gap:6px}.end-card .row .btn{padding:7px 12px;font-size:12.5px;min-height:0}.end-again{display:none}}
.proof-stats .h2{text-align:center;margin:0 0 clamp(18px,2.6vw,28px)}
.proof-stats .proof-card{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
@media (max-width:960px){.proof-stats .proof-card{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.proof-stats .proof-card{grid-template-columns:minmax(0,1fr)}}
/* hero copy card: clearer at the top so more of the loop shows, firmer behind the buttons */
.hero-stack .hero-copy.glass-xl{background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.62) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-color:rgba(255,255,255,.55)}
.hero-stack .hero-copy .eyebrow{width:fit-content;margin-inline:auto;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.74);box-shadow:var(--shadow-1)}
@media (max-width:640px){.hero-stack .hero-copy .eyebrow{border-radius:var(--r-md);padding:6px 12px}}
/* Grow and Manage, stacked: each a row of clickable module cards */
.stacks{grid-template-columns:minmax(0,1fr)}
.stacks .stack{display:block;padding:clamp(18px,2.4vw,28px);border-radius:var(--r-xl)}
.stack-h{align-items:center;padding:0 4px clamp(14px,2vw,20px)}
.stack-h .stack-cta{padding:0;margin-left:auto}
.stack-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px}
.stack-card{position:relative;display:grid;justify-items:start;align-content:start;gap:14px;min-height:132px;padding:18px 14px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.stack-card .pi{width:48px;height:48px}
.stack-card b{font-size:15px;line-height:1.3}
.stack-card .sc-go{position:absolute;top:16px;right:14px;width:16px;height:16px;color:var(--faint);transition:transform .25s var(--ease),color .25s}
.stack-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(79,66,194,.28);text-decoration:none}
.stack-card:hover .sc-go{color:var(--ink);transform:translateX(3px)}
.stack-card:focus-visible{outline:2px solid #4F42C2;outline-offset:2px}
@media (max-width:640px){.stack-h .stack-cta{margin-left:0;width:100%}.stack-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stack-card{min-height:112px;padding:14px 10px 12px;gap:10px}.stack-card .pi{width:38px;height:38px}.stack-card b{font-size:13px}.stack-card .sc-go{display:none}}
@media (prefers-reduced-motion:reduce){.stack-card,.stack-card .sc-go{transition:none}.stack-card:hover{transform:none}}
/* Watch the demo (as on the master site, 2026-10-19): the demo form is the gate; a sent form opens the two demo videos in a popup */
.ff textarea{width:100%;min-height:84px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:16px;resize:vertical;transition:border-color .2s,box-shadow .2s}
.ff textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(79,66,194,.2)}
.wd{width:min(1040px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-xl);background:var(--dev);color:var(--white);box-shadow:var(--shadow-3);overflow:auto}
.wd::backdrop{background:rgba(18,21,33,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wd[open]{animation:fadeIn .3s ease both}
html.wd-lock{overflow:hidden}
.wd-x{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.wd-x .i{width:18px;height:18px}
.wd-play{display:grid;grid-template-columns:minmax(0,1fr) 280px}
.wd-stage{position:relative;aspect-ratio:16/9;background:#000;align-self:center}
.wd-stage video,.wd-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.wd-slate{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;text-align:center;color:var(--white)}
.wd-slate small{color:var(--metal-3);font-size:14px}
.wd-list{padding:64px 14px 18px;display:grid;gap:10px;align-content:start}
.wd-list h4{color:var(--white);font-size:15px;padding:0 4px}
.wd-items{display:grid;gap:10px}
.wd-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:12px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--white);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.wd-item:hover{background:rgba(255,255,255,.08)}
.wd-item[aria-current=true]{background:rgba(255,185,0,.14);border-color:var(--amber)}
.wd-item .n{width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;font-weight:800;font-size:13px}
.wd-item b{display:block;font-size:14.5px}
.wd-item small{display:block;color:var(--metal-3);font-size:12.5px}
.wd-note{font-size:13px;color:var(--metal-3);padding:4px;margin:0}
.wd-trial{display:grid;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.wd-trial p{margin:0;padding:0 4px;font-weight:600;font-size:14.5px}
.wd-trial .btn{width:100%}
@media (max-width:760px){.wd-play{grid-template-columns:minmax(0,1fr)}.wd-list{padding:14px}}
.wd-slate a{color:var(--amber);font-weight:700}
/* Grow and Manage: every module card the same size, icon and name centred, rows centred */
.stack-cards{--n:8;--g:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.stack-card{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));min-width:0;justify-items:center;text-align:center;padding-inline:12px}
.stack-card b{text-wrap:balance;min-height:2.6em}
.stack-cards .stack-card{padding-inline:8px}
@media (max-width:1199px){.stack-cards{--n:5}}
@media (max-width:760px){.stack-cards{--n:3}}
@media (max-width:640px){.stack-cards{--g:8px}.stack-cards .stack-card{padding-inline:6px}.stack-card b{min-height:3.9em}}
/* You're in good company: three equal, centred figures, the source under them */
.proof-stats .proof-card{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0}
.proof-stats .fig{align-items:center;text-align:center;padding-inline:12px}
.proof-stats .fig+.fig{border-left:1px solid var(--line)}
.proof-stats .proof-card .src{writing-mode:horizontal-tb;transform:none;grid-column:1/-1;justify-self:center;text-align:center}
@media (max-width:520px){.proof-stats .proof-card{grid-template-columns:minmax(0,1fr);gap:16px}.proof-stats .fig+.fig{border-left:0;border-top:1px solid var(--line);padding-top:16px}}
/* Hero card wide enough for "Grow and manage your hotel" on one line, "from one dashboard." on the next */
.hero-stack .hero-copy{max-width:1040px}
.hero-stack .lede{max-width:760px}
@media (min-width:761px){.hero-stack #hero-h>span:first-child{white-space:nowrap}}
@media (max-width:760px){.hero-stack #hero-h .h1-br{display:none}}

/* Hero card sits lower so more of the background video shows above it */
/* Space above the card grows with width but shrinks on short screens, so the headline and both buttons stay above the fold */
.hero-stack .hero-film{height:clamp(180px,min(29vw + 20px,100svh - 535px),400px)}
/* Phones and tablets keep the earlier drop: their card padding is already tight, so 20px more would push the buttons off screen */
@media (max-width:960px){.hero-stack .hero-film{height:230px}}
/* The extra 20px comes out of the card's top padding, so the card edge drops while the headline and buttons stay put */
@media (min-width:961px){.hero-stack .hero-copy{padding-top:clamp(16px,2vw,24px)}}

/* "Watch film" button: larger dark pill with an amber glow so it stands out over the video */
.hero-stack .hero-playbtn{gap:14px;padding:10px 26px 10px 10px;font-size:18px;letter-spacing:-.01em;color:#fff;background:rgba(18,21,33,.82);border:1px solid rgba(255,185,0,.55);box-shadow:0 0 0 6px rgba(255,185,0,.16),0 14px 40px rgba(255,185,0,.35),0 10px 30px rgba(9,12,24,.35);animation:playGlow 2.8s ease-in-out infinite}
.hero-stack .hero-playbtn b{width:66px;height:66px}
.hero-stack .hero-playbtn b svg{width:24px;height:24px}
.hero-stack .hero-playbtn:hover{background:rgba(18,21,33,.92);transform:scale(1.06)}
@keyframes playGlow{0%,100%{box-shadow:0 0 0 6px rgba(255,185,0,.16),0 14px 40px rgba(255,185,0,.3),0 10px 30px rgba(9,12,24,.35)}50%{box-shadow:0 0 0 10px rgba(255,185,0,.24),0 18px 56px rgba(255,185,0,.5),0 10px 30px rgba(9,12,24,.35)}}
@media (max-width:960px){.hero-stack .hero-playbtn{font-size:16px;padding:8px 20px 8px 8px}.hero-stack .hero-playbtn b{width:52px;height:52px}}
/* Phones: half the glow spread so it stays clear of the keyword labels */
@media (max-width:640px){.hero-stack .hero-playbtn{box-shadow:0 0 0 3px rgba(255,185,0,.16),0 7px 20px rgba(255,185,0,.35),0 5px 15px rgba(9,12,24,.35);animation-name:playGlowSm}}
@keyframes playGlowSm{0%,100%{box-shadow:0 0 0 3px rgba(255,185,0,.16),0 7px 20px rgba(255,185,0,.3),0 5px 15px rgba(9,12,24,.35)}50%{box-shadow:0 0 0 5px rgba(255,185,0,.24),0 9px 28px rgba(255,185,0,.5),0 5px 15px rgba(9,12,24,.35)}}
@media (prefers-reduced-motion:reduce){.hero-stack .hero-playbtn{animation:none}}

/* Hero card grows slightly and fades as the visitor scrolls down through the hero (nav.js sets --hs from 0 to 1) */
.hero-stack .hero-copy{scale:calc(1 + var(--hs,0) * .06);opacity:calc(1 - var(--hs,0));will-change:scale,opacity}
@media (prefers-reduced-motion:reduce){.hero-stack .hero-copy{scale:none;opacity:1}}

/* OTA commission calculator, opened from the first problem card */
.pfig.p1 .calc-open{align-self:flex-start;margin-top:auto}
.pfig.p1 .calc-open + .ota-strip{margin-top:0}
.calc-dlg{width:min(1080px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3);overflow:auto;overscroll-behavior:contain}
.calc-dlg::backdrop{background:rgba(18,21,33,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.calc-dlg[open]{animation:calcIn .3s ease both}
@keyframes calcIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.calc-dlg .calc{border-radius:0;border:0;background:linear-gradient(150deg,rgba(255,226,210,.55),rgba(255,255,255,.9))}
.calc-dlg .wd-x{position:sticky;float:right;top:12px;margin:12px 12px -52px 0}

/* Customer logos: the ones off-centre are solid grey (no washed-out transparency); the one passing the centre shows in colour (nav.js adds .is-center) */
.proof-logos .logo-tile{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.proof-logos .logo-tile img{filter:grayscale(1) brightness(.78) contrast(1.25);opacity:.92;transition:filter .45s ease,opacity .45s ease}
.proof-logos .logo-tile.is-center{transform:scale(1.08);box-shadow:var(--shadow-2)}
.proof-logos .logo-tile.is-center img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.proof-logos .logo-tile,.proof-logos .logo-tile img{transition:none}}

/* Property types as picture cards (2026-10-19): every kind of stay gets its own photo, the chosen one ringed in amber.
   Desktop shows all nine in one row; tablets and phones swipe them; phones drop the mock-up, list and plan links. */
.pt-tabs{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;margin:0 0 24px;padding:4px 0 6px;overflow:visible}
.pt-tab{position:relative;display:block;min-height:0;aspect-ratio:3/4;padding:0;border:2px solid transparent;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--shadow-1);white-space:normal;text-align:left;isolation:isolate}
.pt-tab .pt-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s var(--ease)}
.pt-tab::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,21,33,0) 40%,rgba(18,21,33,.82));pointer-events:none}
.pt-tab .ic{display:none}
.pt-tab .pt-name{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-weight:700;font-size:14px;line-height:1.25;text-wrap:balance}
.pt-tab:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.pt-tab:hover .pt-pic{transform:scale(1.06)}
.pt-tab[aria-selected=true]{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,185,0,.3),var(--shadow-2);transform:translateY(-3px)}
.pt-tab:focus-visible{outline:2px solid #4F42C2;outline-offset:3px}
@media (max-width:1100px){.pt-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 12px;scrollbar-width:none}.pt-tabs::-webkit-scrollbar{display:none}.pt-tab{flex:0 0 148px;scroll-snap-align:start}}
@media (max-width:640px){.pt-tab{flex-basis:124px}.pt-tab .pt-name{font-size:13px;left:8px;right:8px;bottom:8px}.pt-panel .pt-mock,.pt-panel .pt-list,.pt-panel .pt-meta{display:none}}
@media (prefers-reduced-motion:reduce){.pt-tab,.pt-tab .pt-pic{transition:none}.pt-tab:hover .pt-pic{transform:none}}

/* Phones: the hero card starts just below the middle of the screen, so at least half of the background video stays uncovered.
   The hero sits 100px from the top (72px header + 28px padding) and the card 20px below the film area, hence 52svh - 120px. svh ignores the address bar. */
@media (max-width:760px){.hero-stack .hero-film{height:max(200px,calc(52svh - 120px))}}

/* Property types carousel (2026-10-20): the selected card fills an amber bar over 5s, then the next card is chosen (nav.js).
   All panels share one grid cell, so the area keeps the tallest panel's height and the old and new panels can slide past each other. */
.pt-tab .pt-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22);z-index:1;pointer-events:none;opacity:0}
.pt-tab .pt-prog i{display:block;height:100%;width:0;background:var(--amber)}
.pt-auto .pt-tab[aria-selected=true] .pt-prog{opacity:1}
.pt-auto .pt-tab[aria-selected=true] .pt-prog i{animation:ptFill 4s linear forwards}
.pt-auto.pt-paused .pt-tab[aria-selected=true] .pt-prog i{animation-play-state:paused}
@keyframes ptFill{to{width:100%}}
.pt-stage{display:grid}
.pt-stage>.pt-panel{grid-area:1/1}
/* !important because the page's inline base style forces [hidden]{display:none!important}; this more specific rule keeps hidden panels in the grid, invisible */
.pt-stage>.pt-panel[hidden]{display:grid!important;visibility:hidden}
.pt-stage>.pt-panel:not([hidden]){animation:none}
.pt-stage>.pt-panel.pt-in{animation:ptIn .6s cubic-bezier(.34,1.45,.5,1) both}
.pt-stage>.pt-panel.pt-out{visibility:visible;pointer-events:none;animation:ptOut .35s cubic-bezier(.5,0,.75,0) both}
.pt-stage.pt-back>.pt-panel.pt-in{animation-name:ptInBack}
.pt-stage.pt-back>.pt-panel.pt-out{animation-name:ptOutBack}
@keyframes ptIn{from{opacity:0;translate:120px 0}to{opacity:1;translate:0 0}}
@keyframes ptOut{from{opacity:1;translate:0 0}to{opacity:0;translate:-120px 0}}
@keyframes ptInBack{from{opacity:0;translate:-120px 0}to{opacity:1;translate:0 0}}
@keyframes ptOutBack{from{opacity:1;translate:0 0}to{opacity:0;translate:120px 0}}
/* each panel's own photo, blurred and faded into the top right, behind the mock-up and the text */
.pt-stage>.pt-panel::after{content:"";position:absolute;top:-12%;right:-8%;width:55%;height:95%;z-index:-1;pointer-events:none;background:var(--pt-img) center/cover no-repeat;filter:blur(60px) saturate(1.25);opacity:.4;-webkit-mask-image:radial-gradient(closest-side at 70% 30%,#000 30%,transparent);mask-image:radial-gradient(closest-side at 70% 30%,#000 30%,transparent)}
@media (max-width:640px){.pt-stage>.pt-panel::after{width:70%;height:55%;opacity:.22;filter:blur(48px) saturate(1.1)}}
@media (prefers-reduced-motion:reduce){.pt-stage>.pt-panel.pt-in,.pt-stage>.pt-panel.pt-out{animation:none}.pt-stage>.pt-panel.pt-out{visibility:hidden}}

/* Phone footer (2026-10-20): two columns instead of one long stack. Brand on top, Grow and Manage side by side,
   Boost360 Hotels full width with its links in two columns. Each link gets a ~40px tap row. */
@media (max-width:640px){
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-grid>div:last-child{grid-column:1/-1}
  .foot-grid>div:last-child ul{columns:2;column-gap:20px}
  .foot li{margin-bottom:0;break-inside:avoid}
  .foot li a{display:block;padding-block:10px;line-height:1.3}
  .foot h4{margin-bottom:4px}
  .foot-base{margin-top:28px}
  /* the full-width floating "Watch the demo" bar sits over the page bottom: leave room so the copyright line ends above it.
     Kept even while the bar is hidden, so nothing jumps at the end of the page. */
  .foot{--fcta-h:54px;padding-bottom:calc(var(--fcta-h) + 12px + 16px + env(safe-area-inset-bottom,0px))}
}

/* Phones: the floating bar steps aside while another "Watch the demo" CTA or the demo form is on screen (nav.js adds .is-dup) */
@media (max-width:640px){
  .float-cta.is-on.is-dup{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.float-cta.is-on.is-dup{transition:none}}

/* Grow and Manage as the page's two key blocks (2026-10-19): bigger split cards, intro beside the modules, zig-zag on desktop.
   Grow: the website card leads and spans two rows (3x2 grid). Manage: 4x2 grid. Phones: intro on top, modules as 2-column rows. */
.stacks{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,36px)}
.stacks .stack{display:grid;position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(28px,4.4vw,60px)}
.stacks .stack::before{content:"";position:absolute;z-index:-1;top:-35%;left:-12%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--amber);opacity:.22;filter:blur(90px);pointer-events:none}
.stacks #manage{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.stacks #manage .stack-h{order:2}
.stacks #manage::before{left:auto;right:-12%;background:#4F42C2;opacity:.16}
.stacks .stack-h{display:grid;justify-items:start;align-content:center;gap:14px;padding:0}
.stacks .stack-h .eyebrow{order:-1}
.stacks .stack-h h3{font-size:clamp(3rem,6vw,4.8rem);line-height:.95;letter-spacing:-.03em}
.stacks .stack-lede{max-width:30ch;color:var(--ink-2);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5}
.stacks .stack-h .stack-cta{padding:8px 0 0;margin:0}
.stacks .stack-cards{display:grid;gap:12px}
.stacks #grow .stack-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.stacks #manage .stack-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.stacks .stack-card{flex:none;min-height:148px;align-content:center;padding:18px 12px}
.stacks .stack-card .pi{width:56px;height:56px}
.stacks #grow .stack-card:first-child{grid-row:span 2;gap:18px;background:linear-gradient(160deg,#FFF8E1,var(--surface) 60%)}
.stacks #grow .stack-card:first-child .pi{width:88px;height:88px}
.stacks #grow .stack-card:first-child b{font-size:18px;min-height:0}
@media (max-width:1100px){
  .stacks .stack,.stacks #manage{grid-template-columns:minmax(0,1fr);gap:24px}
  .stacks #manage .stack-h{order:0}
  .stacks #manage::before{right:auto;left:-12%}
}
@media (max-width:640px){
  .stacks .stack{padding:24px 16px 16px}
  .stacks .stack-h{padding-inline:6px}
  .stacks .stack-h h3{font-size:clamp(2.6rem,13vw,3.2rem)}
  .stacks .stack-h .stack-cta,.stacks .stack-h .stack-cta .btn{width:100%;justify-content:center}
  .stacks #grow .stack-cards,.stacks #manage .stack-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stacks .stack-card{min-height:64px;grid-template-columns:36px minmax(0,1fr);justify-items:start;align-items:center;gap:10px;padding:10px 12px;text-align:left}
  .stacks .stack-card .pi{width:36px;height:36px}
  .stacks .stack-card b{min-height:0;font-size:13.5px;text-wrap:balance}
  .stacks #grow .stack-card:first-child{grid-row:auto;grid-column:span 2;gap:12px}
  .stacks #grow .stack-card:first-child .pi{width:44px;height:44px}
  .stacks #grow .stack-card:first-child b{font-size:15px}
  .stacks #grow .stack-card:first-child{grid-template-columns:44px minmax(0,1fr)}
}

/* 2026-10-20 tweaks: the chosen card pops 4% bigger with a little spring; each panel's photo reads clearly in the top right
   (20% opacity, sharp there) and dissolves toward the bottom left instead of being blurred all over */
.pt-tab{transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease}
.pt-tab[aria-selected=true],.pt-tab[aria-selected=true]:hover{transform:translateY(-3px) scale(1.04)}
@media (max-width:1100px){.pt-tabs{padding-top:12px}}
.pt-stage>.pt-panel::after{top:0;right:0;width:58%;height:100%;filter:none;opacity:.2;-webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 35%,rgba(0,0,0,.5) 55%,transparent 80%);mask-image:radial-gradient(120% 120% at 100% 0%,#000 35%,rgba(0,0,0,.5) 55%,transparent 80%)}
@media (max-width:640px){.pt-stage>.pt-panel::after{width:75%;height:70%;opacity:.16;filter:none}}
@media (prefers-reduced-motion:reduce){.pt-tab{transition:none}}
/* phones: a shorter slide (64px) so the panel stays mostly on screen while it moves */
@media (max-width:640px){
  @keyframes ptIn{from{opacity:0;translate:64px 0}to{opacity:1;translate:0 0}}
  @keyframes ptOut{from{opacity:1;translate:0 0}to{opacity:0;translate:-64px 0}}
  @keyframes ptInBack{from{opacity:0;translate:-64px 0}to{opacity:1;translate:0 0}}
  @keyframes ptOutBack{from{opacity:1;translate:0 0}to{opacity:0;translate:64px 0}}
}

/* ===== Motion system (2026-10-20). Tokens, then nav menus, buttons, cards, links, form, popups, phone menu.
   transform/opacity only; prefers-reduced-motion turns all of it off at the end. ===== */
:root{--m-fast:140ms;--m-base:220ms;--m-slow:360ms;--spring:cubic-bezier(.34,1.4,.64,1);--out:cubic-bezier(.22,1,.36,1)}

/* Nav menus (Grow, Manage): spring drop-in, staggered items, sliding highlight, quick fade out */
.navdd .vsw-menu{transform-origin:24px 0;opacity:0;translate:0 -8px;scale:.96;transition:opacity 160ms ease,translate 160ms ease,scale 160ms ease}
.navdd .vsw-menu.dd-on{opacity:1;translate:0 0;scale:1;transition:opacity var(--m-base) var(--out),translate 320ms var(--spring),scale 320ms var(--spring)}
.navdd .vsw-menu.dd-out{translate:0 -4px}
.navdd .vsw-menu::before{content:"";position:absolute;left:-24px;right:-24px;top:-18px;height:18px}
.navdd .vsw-menu.dd-on>:not(.dd-hl){animation:ddItem 320ms var(--out) both;animation-delay:calc(var(--i,0) * 25ms)}
.navdd .vsw-menu.dd-swap>*{animation:none}
@keyframes ddItem{from{opacity:0;translate:0 6px}}
.navdd .vsw-menu a{position:relative;z-index:1}
.navdd .vsw-menu.has-hl a:hover{background:none}
.dd-hl{position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--r-md);background:rgba(79,66,194,.07);opacity:0;pointer-events:none;transition:transform var(--m-slow) var(--spring),width var(--m-slow) var(--spring),height var(--m-slow) var(--spring),opacity var(--m-fast) ease}
.dd-hl.on{opacity:1}
.navdd .vsw-menu a .pi{transition:scale var(--m-slow) var(--spring),rotate var(--m-slow) var(--spring)}
.navdd .vsw-menu a:hover .pi{scale:1.12;rotate:-6deg}
.vsw-btn svg{transition:transform var(--m-slow) var(--spring)}
.nav-dd{transition:background var(--m-base) ease,color var(--m-base) ease}

/* Buttons: lift + deeper shadow on hover, arrow slides, press springs back; amber gets one light sheen sweep */
.btn{transition:background var(--m-base) ease,box-shadow var(--m-base) ease,border-color var(--m-base) ease,transform var(--m-slow) var(--spring)}
.btn .i{transition:translate var(--m-base) var(--out)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn-amber:hover{box-shadow:0 10px 26px rgba(255,185,0,.42),inset 0 1px 0 rgba(255,255,255,.45)}
  .btn-glass:hover{box-shadow:0 10px 24px rgba(18,21,33,.12)}
  .btn:hover .i{translate:3px 0}
}
.btn:active{transform:translateY(0) scale(.97);transition-duration:var(--m-fast)}
.btn-amber{position:relative;overflow:hidden;isolation:isolate}
.btn-amber::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-120% 0}
@media (hover:hover){.btn-amber:hover::after{translate:120% 0;transition:translate 700ms var(--out)}}
.float-cta{transition:transform .45s var(--ease),opacity .3s,visibility 0s,background .2s,box-shadow var(--m-base) ease}
@media (hover:hover){.float-cta.is-on:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,185,0,.45)}}
.float-cta.is-on:active{transform:scale(.97)}
.float-cta .i{transition:translate var(--m-base) var(--out)}
.float-cta:hover .i{translate:3px 0}
.hero-stack .hero-playbtn:active{transform:scale(.97)}
.wd-x{transition:transform var(--m-slow) var(--spring),background var(--m-base)}
.wd-x:hover{transform:rotate(90deg)}
.wd-x:active{transform:rotate(90deg) scale(.92)}

/* Cards and tiles: spring lift, icon pops, press */
.stack-card{transition:transform var(--m-slow) var(--spring),box-shadow var(--m-base) ease,border-color var(--m-base) ease}
.stack-card .pi{transition:scale var(--m-slow) var(--spring),rotate var(--m-slow) var(--spring)}
.stack-card:hover .pi{scale:1.08;rotate:-4deg}
.stack-card:active{scale:.98}
.pt-tab:active{scale:.98}
.logo-tile{transition:transform var(--m-slow) var(--spring),box-shadow var(--m-base) ease}
@media (hover:hover){.proof-logos .logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}}

/* Text links: underline grows from the left */
.foot li a,.foot-root,.lede a,.cmp-note a,.pt-meta a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--m-base) var(--out),color var(--m-base) ease}
.foot li a:hover,.foot-root:hover,.lede a:hover,.cmp-note a:hover,.pt-meta a:hover{text-decoration:none;background-size:100% 1px}
@media (max-width:640px){.foot li a{display:inline-block;background-position:0 calc(100% - 10px)}}
.foot-root .i{transition:translate var(--m-base) var(--out)}
.foot-root:hover .i{translate:3px 0}

/* Demo form: focus glow expands, label shifts colour, invalid fields shake once, errors fade in */
.ff input,.ff select,.ff textarea,.ff .tel{transition:border-color var(--m-base) ease,box-shadow var(--m-base) var(--out)}
.ff input:focus,.ff select:focus,.ff textarea:focus{box-shadow:0 0 0 4px rgba(79,66,194,.18)}
.ff label{transition:color var(--m-base) ease}
.ff:focus-within label{color:#4F42C2}
.ff.shake{animation:ffShake 380ms var(--out)}
@keyframes ffShake{0%,100%{translate:0}20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
.ff.bad .err{animation:errIn var(--m-base) var(--out) both}
@keyframes errIn{from{opacity:0;translate:0 -3px}}

/* Popups: backdrop fades, panel springs up from .94; closing is quicker and reversed (where the browser supports it) */
.wd,.calc-dlg{animation:none!important;opacity:0;scale:.94;transition:opacity 160ms ease,scale 160ms ease,overlay 160ms allow-discrete,display 160ms allow-discrete}
.wd[open],.calc-dlg[open]{opacity:1;scale:1;transition:opacity var(--m-base) var(--out),scale var(--m-slow) var(--spring),overlay var(--m-slow) allow-discrete,display var(--m-slow) allow-discrete}
@starting-style{.wd[open],.calc-dlg[open]{opacity:0;scale:.94}}
.wd::backdrop,.calc-dlg::backdrop{opacity:0;transition:opacity var(--m-base) ease,overlay var(--m-base) allow-discrete,display var(--m-base) allow-discrete}
.wd[open]::backdrop,.calc-dlg[open]::backdrop{opacity:1}
@starting-style{.wd[open]::backdrop,.calc-dlg[open]::backdrop{opacity:0}}

/* Phone menu: drops in with links staggering; the hamburger twists into the X */
.mobile-menu:not([hidden]){animation:mmIn var(--m-slow) var(--spring) both;transform-origin:top center}
.mobile-menu:not([hidden])>*{animation:ddItem 300ms var(--out) both}
.mobile-menu:not([hidden])>:nth-child(2){animation-delay:20ms}.mobile-menu:not([hidden])>:nth-child(3){animation-delay:40ms}.mobile-menu:not([hidden])>:nth-child(4){animation-delay:60ms}.mobile-menu:not([hidden])>:nth-child(5){animation-delay:80ms}.mobile-menu:not([hidden])>:nth-child(6){animation-delay:100ms}.mobile-menu:not([hidden])>:nth-child(7){animation-delay:120ms}.mobile-menu:not([hidden])>:nth-child(n+8){animation-delay:140ms}
@keyframes mmIn{from{opacity:0;translate:0 -10px;scale:.97}}
.menu-btn .i{transition:rotate var(--m-slow) var(--spring)}
.menu-btn[aria-expanded="true"] .i{rotate:90deg}
.menu-btn:active{scale:.94}

@media (prefers-reduced-motion:reduce){
  .navdd .vsw-menu,.navdd .vsw-menu.dd-on,.dd-hl,.navdd .vsw-menu a .pi,.vsw-btn svg,.btn,.btn .i,.btn-amber::after,.float-cta,.float-cta .i,.wd-x,.stack-card,.stack-card .pi,.logo-tile,.foot li a,.foot-root,.foot-root .i,.lede a,.cmp-note a,.pt-meta a,.ff input,.ff select,.ff textarea,.ff label,.wd,.calc-dlg,.wd::backdrop,.calc-dlg::backdrop,.menu-btn .i{transition:none!important}
  .navdd .vsw-menu{translate:none;scale:none}
  .navdd .vsw-menu.dd-on>*,.mobile-menu:not([hidden]),.mobile-menu:not([hidden])>*,.ff.shake,.ff.bad .err{animation:none!important}
  .btn:hover,.btn:active,.float-cta.is-on:hover,.stack-card:active,.pt-tab:active,.wd-x:hover,.btn:hover .i,.navdd .vsw-menu a:hover .pi,.stack-card:hover .pi{transform:none;translate:none;scale:none;rotate:none}
  .btn-amber:hover::after{translate:-120% 0}
  .wd,.calc-dlg{scale:none}
}

/* Property cards: the ones not chosen are slightly desaturated; chosen, hovered or focused cards show full colour */
.pt-tab .pt-pic{filter:saturate(.55) brightness(.96);transition:transform .5s var(--ease),filter 400ms cubic-bezier(.34,1.56,.64,1)}
.pt-tab[aria-selected=true] .pt-pic,.pt-tab:hover .pt-pic,.pt-tab:focus-visible .pt-pic{filter:none}
/* panel photo stronger: 40% (still crisp top right, fading bottom left) */
.pt-stage>.pt-panel::after{opacity:.4}
@media (max-width:640px){.pt-stage>.pt-panel::after{opacity:.4}}
@media (prefers-reduced-motion:reduce){.pt-tab .pt-pic{transition:none}}

/* Cards assemble on scroll (nav.js adds these classes only while a card is waiting or animating) */
.asm-ready .pop-in{animation:none}
.asm-card{opacity:0;translate:0 24px}
.asm-card.asm-go{opacity:1;translate:0 0;transition:opacity 500ms var(--out),translate 600ms var(--spring)}
.asm-card .asm-p{opacity:0}
.asm-card .asm-p[data-asm=h]{translate:0 16px}
.asm-card .asm-p[data-asm=t]{translate:0 12px}
.asm-card .asm-p[data-asm=i]{scale:.9}
.asm-card .asm-p[data-asm=g]{translate:0 18px;scale:.96}
.asm-card .asm-p[data-asm=l]{translate:-32px 0}
.asm-card .asm-p[data-asm=r]{translate:32px 0}
.asm-card.asm-go .asm-p{opacity:1;translate:0 0;scale:1;transition:opacity 420ms var(--out) var(--d,0ms),translate 600ms var(--spring) var(--d,0ms),scale 600ms var(--spring) var(--d,0ms)}

/* Odometer figures: digits roll in fixed tabular slots, so the figure never changes width */
.pfig .big,.proof-card dd,.plan .pv,#calc-total,#cmp-ota,#cmp-plan{font-variant-numeric:tabular-nums}
.odo-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.odo-vis{display:inline-block;vertical-align:top;white-space:nowrap;line-height:var(--odo-h);font-variant-numeric:tabular-nums}
.odo-col{display:inline-block;vertical-align:top;height:var(--odo-h);overflow:hidden}
.odo-strip{display:block}
.odo-strip>span{display:block;height:var(--odo-h);line-height:var(--odo-h)}

/* Inactive property cards: fully grey at 80% opacity; the chosen, hovered or focused card is full colour at 100% */
.pt-tab{opacity:.8;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity 400ms cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease}
.pt-tab .pt-pic{filter:saturate(0)}
.pt-tab[aria-selected=true],.pt-tab:hover,.pt-tab:focus-visible{opacity:1}
.pt-tab[aria-selected=true] .pt-pic,.pt-tab:hover .pt-pic,.pt-tab:focus-visible .pt-pic{filter:none}
@media (prefers-reduced-motion:reduce){.pt-tab{transition:none}}
.odo-vis small,.odo-vis sup,.odo-vis sub{line-height:1}

/* Hero headline "Growing and managing your hotel" is longer: a slightly wider card keeps line 1 on one line inside the padding */
.hero-stack .hero-copy{max-width:1140px}

/* Super Intelligence on the home page is a teaser (2026-10-20): headline, one line, How it works, and one overnight event;
   the rest fades out under a link to the full Super Intelligence page */
.si-grid{align-items:center}
.si-box{padding-bottom:clamp(32px,4.4vw,56px)}
.si-teaser{padding-bottom:16px}
.si-teaser .si-feed{position:relative}
.si-teaser .si-fade{max-height:76px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,transparent 92%);mask-image:linear-gradient(#000 0%,transparent 92%);pointer-events:none}
.si-more{position:relative;z-index:1;display:flex;width:max-content;margin:-30px auto 0;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);font-size:14px;font-weight:700;color:var(--lav-ink,#4F42C2);text-decoration:none;transition:transform var(--m-slow,360ms) var(--spring,ease),box-shadow var(--m-base,220ms) ease}
.si-more .i{width:15px;height:15px;transition:translate var(--m-base,220ms) var(--out,ease)}
.si-more:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);text-decoration:none}
.si-more:hover .i{translate:3px 0}
.si-more:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.si-more,.si-more .i{transition:none}.si-more:hover{transform:none}.si-more:hover .i{translate:none}}

/* Getting started (home page): steps on a real time scale. A playhead runs 0:00 → 4:30 in ~5.5s, each gap proportional
   to the real minutes; the clock rolls like an odometer. Horizontal on desktop/tablet, vertical on phones. */
.gs{margin-top:clamp(24px,3.4vw,40px)}
.gs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.gs-clock-wrap{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);font-weight:800;font-size:17px;color:var(--ink)}
.gs-clock-wrap .i{width:18px;height:18px;color:var(--amber-dark)}
.gs-clock{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums;--odo-h:24px;line-height:24px;height:24px}
.gs-clock .odo-col{display:inline-block;height:24px;overflow:hidden}
.gs-clock .odo-strip>span{display:block;height:24px;line-height:24px}
.gs-replay{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:var(--r-sm);background:none;font:inherit;font-weight:700;font-size:14.5px;color:#4F42C2;cursor:pointer;transition:background var(--m-base) ease}
.gs-replay:hover{background:rgba(79,66,194,.08)}
.gs-replay .i{width:16px;height:16px;transition:rotate 600ms var(--spring)}
.gs-replay:hover .i{rotate:-180deg}
.gs-track{position:relative}
.gs-line{position:absolute;z-index:0;pointer-events:none;background:var(--line);border-radius:2px}
.gs-fill{position:absolute;inset:0;background:var(--amber);border-radius:inherit;transform-origin:0 0;transform:scaleX(0)}
.gs-head{position:absolute;left:0;top:0;width:14px;height:14px;margin:-6px 0 0 -7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px rgba(255,185,0,.25)}
.gs-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gs-step{display:grid;gap:14px;align-content:start;cursor:pointer;outline:none}
.gs-n{position:relative;z-index:2;width:32px;height:32px;margin-left:20px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--surface);border:2px solid var(--line);color:var(--ink-2);transition:background 300ms ease,border-color 300ms ease,color 300ms ease,scale 550ms var(--spring)}
.gs-card{position:relative;display:grid;gap:8px;align-content:start;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);opacity:.6;transition:opacity 400ms ease,transform 550ms var(--spring),box-shadow 300ms ease,border-color 300ms ease}
.gs-card time{justify-self:start;font-size:13px;font-weight:700;color:var(--faint);padding:2px 9px;border-radius:999px;background:rgba(18,21,33,.04);transition:background 300ms ease,color 300ms ease}
.gs-card h3{font-size:18px}
.gs-card p{color:var(--muted);font-size:14.5px;line-height:1.5}
.gs-step.on .gs-card{opacity:1;transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(255,185,0,.5)}
.gs-step.on .gs-n{background:var(--amber);border-color:var(--amber);color:var(--on-amber);scale:1.12}
.gs-step.on .gs-card time{background:var(--amber-tint-2,#FFF1C2);color:var(--amber-dark)}
.gs-step.done .gs-n{font-size:0}
.gs-step.done .gs-n::after{content:"✓";font-size:16px;font-weight:800}
.gs-step:hover .gs-card,.gs-step:focus-visible .gs-card{box-shadow:var(--shadow-3)}
.gs-step:focus-visible .gs-n{outline:2px solid #4F42C2;outline-offset:3px}
.start .start-foot{margin-top:clamp(20px,3vw,32px)}
.start.gs-pop .start-foot{animation:gsPop 700ms var(--spring)}
@keyframes gsPop{0%{scale:1}40%{scale:1.035}100%{scale:1}}
@media (max-width:1024px) and (min-width:641px){.gs-steps{gap:12px}.gs-card{padding:16px}.gs-n{margin-left:16px}}
@media (max-width:640px){
  .gs-steps{grid-template-columns:minmax(0,1fr);gap:14px}
  .gs-step{grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
  .gs-n{margin:16px 0 0}
  .gs-fill{transform:scaleY(0)}
  .gs-head{margin:-7px 0 0 -6px}
}
@media (prefers-reduced-motion:reduce){.gs-n,.gs-card,.gs-card time,.gs-replay .i{transition:none}.gs-replay,.gs-head{display:none}.start.gs-pop .start-foot{animation:none}}

/* Grow and Manage: the button now follows the module tiles in the HTML (so tab order matches the stacked view).
   Desktop puts it back under the intro beside the tiles; 1100px and below it sits under the tiles. */
.stacks .stack-cta{padding:0;margin:0}
@media (min-width:1101px){
  .stacks .stack{grid-template-rows:1fr auto auto 1fr;row-gap:0}
  .stacks .stack .stack-h{grid-row:2}
  .stacks .stack .stack-cta{grid-row:3;padding-top:22px}
  .stacks .stack .stack-cards{grid-row:1/-1}
  .stacks #grow .stack-h,.stacks #grow .stack-cta{grid-column:1}
  .stacks #grow .stack-cards{grid-column:2}
  .stacks #manage .stack-h,.stacks #manage .stack-cta{grid-column:2;order:0}
  .stacks #manage .stack-cards{grid-column:1}
}
@media (max-width:1100px){
  .stacks .stack,.stacks #manage{row-gap:20px}
  .stacks .stack-h{gap:12px}
  .stacks .stack .stack-cta{margin-top:-4px;justify-self:start}
}
@media (max-width:640px){.stacks .stack .stack-cta,.stacks .stack .stack-cta .btn{width:100%;justify-self:stretch;justify-content:center}}

/* Hero film on phones and tablets (<1024px): the film takes over the whole screen (nav.js adds html.film-full on tap).
   Desktop keeps its in-hero player. */
html.film-full{overflow:hidden}
html.film-full body{overscroll-behavior:none}
html.film-full #hero-player{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;z-index:2147483647!important;display:grid!important;place-items:center;align-content:center;background:#050608!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:filmFull 320ms var(--spring) both!important;container-type:normal!important}
html.film-full #hero-player .vframe{width:min(100vw,calc(100dvh * 16 / 9))!important;max-width:none!important;aspect-ratio:16/9;margin:0;border-radius:0;border:0;box-shadow:none;background:#000;animation:none!important}
html.film-full #hero-player .vstage{width:100%;height:100%}
html.film-full #hero-player .vclose{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 12px)!important;right:calc(env(safe-area-inset-right,0px) + 12px)!important;left:auto!important;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;animation:none!important}
html.film-full #hero-player .vclose .i{width:20px;height:20px}
html.film-full .float-cta,html.film-full [id^=zsiq],html.film-full .zsiq_floatmain,html.film-full .b360-as-open{visibility:hidden!important}
@keyframes filmFull{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){html.film-full #hero-player{animation:none!important}}
/* the film sits inside .hero-media (its own stacking level, z 6): lift that above the sticky nav while the takeover is open */
html.film-full .hero-media{z-index:2147483647!important}
html.film-full #hero-player .vframe{padding:0!important}
html.film-full #hero-player .vstage,html.film-full #hero-player .vyt,html.film-full #hero-player iframe{border-radius:0!important}

/* Footer social icons (black and white), first column under the brand. Each link is a 40px tap target. */
.foot-social{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0 -9px;padding:0;list-style:none}
.foot-social li{margin:0}
.foot .foot-social a{display:grid;place-items:center;width:40px;height:40px;padding:0;box-sizing:border-box;border-radius:50%;background:none;transition:background var(--m-base,220ms) ease,transform var(--m-slow,360ms) var(--spring,ease)}
.foot-social img{width:28px;height:28px;opacity:.72;transition:opacity var(--m-base,220ms) ease}
.foot .foot-social a:hover{background:rgba(18,21,33,.06);transform:translateY(-2px)}
.foot .foot-social a:hover img,.foot .foot-social a:focus-visible img{opacity:1}
.foot .foot-social a:active{transform:scale(.94)}
.foot .foot-social a:focus-visible{outline:2px solid #4F42C2;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.foot .foot-social a{transition:none}.foot .foot-social a:hover{transform:none}}

/* Colour brand icons (WhatsApp, Instagram, Facebook, Google, X) inside sections and mock-ups; same box as the line icons they replace */
img.sc-ic{display:inline-block;object-fit:contain;flex:none;vertical-align:middle}
/* Footer social icons: all five shown in one soft grey (not black); the linked ones turn orange on hover.
   Drawn as masks so the colour can change; the SVG files stay the black-and-white set. */
.foot-social .soc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:0;background:none;color:var(--muted)}
.foot-social .soc::before{content:"";width:28px;height:28px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background-color var(--m-base,220ms) ease}
.foot .foot-social a.soc:hover,.foot .foot-social a.soc:focus-visible{color:#F57C00;background:rgba(245,124,0,.1)}
/* smaller footer icons: 20px glyphs; 34px targets on desktop, 40px tap targets on phones */
.foot-social{gap:4px;margin-left:-7px}
.foot-social .soc{width:34px;height:34px}
.foot-social .soc::before{width:20px;height:20px}
@media (max-width:640px){.foot-social .soc{width:40px;height:40px}.foot-social{gap:2px;margin-left:-10px}}
/* tuned: 18px glyphs on desktop/tablet in 32px hit areas (~14px visible gap); 20px glyphs on phones in 34x40 tap areas */
.foot-social{gap:0;margin-left:-7px}
.foot-social .soc{width:32px;height:32px}
.foot-social .soc::before{width:18px;height:18px}
@media (max-width:640px){.foot-social{gap:0;margin-left:-7px}.foot-social .soc{width:34px;height:40px}.foot-social .soc::before{width:20px;height:20px}}
.foot .foot-social .soc{width:32px;height:32px}
@media (max-width:640px){.foot .foot-social .soc{width:34px;height:40px}}

/* SEO structure helpers: headings that must look like the text they replaced */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.as-p{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;color:inherit}
.mq-label.as-p{font-size:13px;font-weight:600;color:var(--faint)}
.wd-list h3{color:var(--white);font-size:15px;padding:0 4px}
.pfig-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none}
.pfig-link .i{width:15px;height:15px;transition:translate var(--m-base,220ms) var(--out,ease)}
.pfig-link:hover{text-decoration:underline}
.pfig-link:hover .i{translate:3px 0}

/* Sticky breadcrumb strip under the header (nav.js shows it once the page's own breadcrumb has scrolled away) */
.crumb-sticky{position:fixed;left:0;right:0;top:var(--nav-h,82px);z-index:49;pointer-events:none;opacity:0;translate:0 -6px;transition:opacity var(--m-base,220ms) ease,translate var(--m-base,220ms) var(--out,ease),visibility 0s var(--m-base,220ms);visibility:hidden}
.crumb-sticky.on{opacity:1;translate:0 0;visibility:visible;pointer-events:auto;transition:opacity var(--m-base,220ms) ease,translate var(--m-base,220ms) var(--out,ease)}
.crumb-sticky-in{width:calc(min(1240px,100%) - 2 * var(--gutter,16px));margin:6px auto 0;padding:7px 16px;border-radius:var(--r-md);background:#EEF0F5;border:1px solid var(--line);box-shadow:var(--shadow-1);overflow-x:auto;scrollbar-width:none}
.crumb-sticky-in::-webkit-scrollbar{display:none}
.crumb-sticky .crumbs-ol,.crumb-sticky ol{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.crumb-sticky li+li::before{content:"›";margin-right:8px;color:var(--faint)}
.crumb-sticky a{color:var(--ink-2);text-decoration:none}
.crumb-sticky a:hover{color:var(--ink);text-decoration:underline}
.crumb-sticky [aria-current]{color:var(--ink)}
html.has-crumbs section,html.has-crumbs .fpanel{scroll-margin-top:calc(var(--nav-h,82px) + 50px)}
@media (max-width:640px){.crumb-sticky-in{padding:6px 12px;margin-top:4px}.crumb-sticky ol{font-size:13px}}
@media (prefers-reduced-motion:reduce){.crumb-sticky,.crumb-sticky.on{transition:none}}

/* FAQs hub: topic chips under the intro; the topic groups reuse the site's FAQ accordion layout */
.faq-topics{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0}
.faq-topics a{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:transform var(--m-slow,360ms) var(--spring,ease),box-shadow var(--m-base,220ms) ease,border-color var(--m-base,220ms) ease}
.faq-topics a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(255,185,0,.5)}
.faq-intro{padding-bottom:clamp(8px,2vw,24px)}
.faq-hub{padding-block:clamp(40px,6vw,72px)}
.faq-hub + .faq-hub{border-top:1px solid var(--line)}

/* Pinned header row for the plan comparison tables (nav.js) */
.thead-stuck{position:fixed;z-index:48;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 8px 16px -10px rgba(18,21,33,.25);transition:opacity 160ms ease,visibility 0s 160ms}
.thead-stuck.on{visibility:visible;opacity:1;transition:opacity 160ms ease}
.thead-stuck-in{overflow:hidden}
.thead-stuck table{margin:0;border-collapse:collapse;background:var(--surface)}
.thead-stuck th{background:var(--surface)}

/* Breadcrumb strip, take two (2026-10-20): a small tab hanging from the header bar, same translucent glass, left-aligned,
   only as wide as the trail. The first step (Hotels) is dropped: the header logo already goes home. */
.crumb-sticky{top:calc(var(--navbar-b,72px) - 1px);left:var(--navbar-l,16px);right:auto;max-width:calc(100vw - 2 * var(--navbar-l,16px))}
.crumb-sticky-in{width:auto;max-width:100%;margin:0 0 0 18px;padding:5px 14px 6px;border-radius:0 0 var(--r-md) var(--r-md);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-edge);border-top:0;box-shadow:0 6px 14px -8px rgba(18,21,33,.18)}
.crumb-sticky ol{font-size:12.5px;gap:6px}
.crumb-sticky li+li::before{margin-right:6px}
@media (max-width:640px){.crumb-sticky-in{margin-left:12px;padding:4px 12px 5px}.crumb-sticky ol{font-size:12px}}
.crumb-sticky-in{padding:4px 14px 5px;line-height:18px}
.crumb-sticky ol{font-weight:400;color:var(--muted);line-height:18px}
.crumb-sticky a{color:var(--muted)}
.crumb-sticky a:hover{color:var(--ink)}
.crumb-sticky [aria-current]{font-weight:500;color:var(--ink)}
.crumb-sticky li+li::before{color:var(--line-2,#c9ccd6)}
@media (max-width:640px){.crumb-sticky-in{padding:3px 12px 4px}}
html.has-crumbs section,html.has-crumbs .fpanel{scroll-margin-top:calc(var(--nav-h,82px) + 40px)}

/* Anything linked by #id (sections, the Grow and Manage cards, feature panels) lands 24px below the header */
main [id]{scroll-margin-top:calc(var(--nav-h,72px) + 24px)}
html.has-crumbs main [id]{scroll-margin-top:calc(var(--nav-h,72px) + 52px)}

/* FAQs page: a single list with a topic filter */
.faq-all .sec-head{margin-bottom:0}
.faq-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:clamp(20px,3vw,32px) 0 18px}
.faq-filter label{font-size:14.5px;font-weight:700;color:var(--ink-2)}
.faq-filter select{min-height:44px;padding:0 40px 0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565D74' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;-webkit-appearance:none;appearance:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer;max-width:100%}
.faq-filter select:focus{outline:none;border-color:var(--focus,#4F42C2);box-shadow:0 0 0 4px rgba(79,66,194,.18)}
.faq-count{font-size:14px;color:var(--muted)}
.faq-list{max-width:900px}
.faq-list details[hidden]{display:none!important}
.faq-from{margin:8px 0 0;font-size:13.5px}
.faq-from a{color:var(--muted);text-decoration:none;font-weight:600}
.faq-from a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:640px){.faq-filter select{width:100%}}
.faq-list h3.faq-q{display:inline;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0}
.faq-list.faq-fade{animation:faqFade 260ms var(--out,ease) both}
@keyframes faqFade{from{opacity:0;translate:0 6px}}
.faq-more{margin:18px 0 0}
.faq-filter label{font-size:14.5px}
@media (prefers-reduced-motion:reduce){.faq-list.faq-fade{animation:none}}

/* FAQs page, compact: title, then a sticky glass toolbar (breadcrumb + topic dropdown) under the header, then the list */
.faq-all{padding-top:clamp(24px,4vw,44px)}
.faq-title{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 14px}
.faq-toolbar{position:sticky;top:calc(var(--navbar-top-gap,10px) + var(--navbar-h,62px) + 8px);z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px;padding:8px 8px 8px 16px;max-width:900px;border-radius:var(--r-lg);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1)}
.faq-toolbar .crumbs ol{margin:0}
.faq-toolbar .faq-filter{margin:0}
.faq-toolbar .faq-filter select{min-height:40px}
@media (max-width:640px){.faq-toolbar{padding:8px;gap:8px}.faq-toolbar .crumbs{padding-left:6px}.faq-toolbar .faq-filter{width:100%}.faq-toolbar .faq-filter select{width:100%}}

/* FAQs: topic chips on desktop and tablet (inside the sticky bar), the dropdown on phones */
.faq-lede{margin:-4px 0 16px;max-width:62ch}
.faq-toolbar{max-width:none;align-items:flex-start;flex-direction:column;gap:8px;padding:10px 12px}
.faq-toolbar .crumbs{padding-left:4px}
.faq-chips{display:flex;flex-wrap:wrap;gap:6px}
.faq-chip{display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background var(--m-base,220ms) ease,border-color var(--m-base,220ms) ease,color var(--m-base,220ms) ease,transform var(--m-slow,360ms) var(--spring,ease)}
.faq-chip:hover{border-color:rgba(255,185,0,.6);transform:translateY(-1px)}
.faq-chip[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.faq-chip:focus-visible{outline:2px solid #4F42C2;outline-offset:2px}
.faq-toolbar .faq-filter{display:none}
@media (max-width:640px){.faq-chips{display:none}.faq-toolbar .faq-filter{display:block;width:100%}.faq-toolbar{padding:8px}}
@media (prefers-reduced-motion:reduce){.faq-chip{transition:none}.faq-chip:hover{transform:none}}
.faq-chip{min-height:30px;padding:4px 11px;font-size:13px}
.faq-chips{gap:6px;width:100%}
.faq-chips.one-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);padding:2px 18px 2px 2px}
.faq-chips.one-row::-webkit-scrollbar{display:none}
.faq-chips.one-row .faq-chip{flex:none}

/* FAQ accordions (every page): closed questions sit a step greyer; hover and keyboard focus bring them back to full
   dark with a subtle tint and a darker plus; the open question stays dark */
.acc summary{color:#464C63;transition:color var(--m-base,220ms) ease,background var(--m-base,220ms) ease}
.acc summary .i{color:var(--muted)}
.acc details[open] summary{color:var(--ink)}
@media (hover:hover){
  .acc details:not([open]) summary:hover{color:var(--ink);background:rgba(18,21,33,.04)}
  .acc details:not([open]) summary:hover .i{color:var(--ink);background:var(--line)}
}
.acc details:not([open]) summary:focus-visible{color:var(--ink);background:rgba(18,21,33,.04);outline:2px solid #4F42C2;outline-offset:2px}
.acc details:not([open]) summary:focus-visible .i{color:var(--ink);background:var(--line)}
.acc details[open] summary .i{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.acc summary{transition:none}}

/* "Next in the stay" links on module pages, under the More in Grow / Manage list */
.next-stay{margin:14px 0 0;font-size:14.5px;color:var(--muted)}
.next-stay a{color:var(--ink-2);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--m-base,220ms) var(--out,ease)}
.next-stay a:hover{background-size:100% 1px;color:var(--ink)}
.next-stay span{margin:0 6px;color:var(--faint)}

/* You're in good company (2026-10-20): asymmetric bento. 500,000+ is the anchor card at display size; the rating
   (with stars filled to its value) and categories sit beside it. Same fonts, colours, glass cards and odometer. */
.proof-stats .h2{text-align:left;font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.03em;margin:0 0 clamp(16px,2.4vw,24px)}
.proof-bento{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(12px,1.6vw,18px);margin:0}
.pb-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(20px,2.6vw,32px);border-radius:var(--r-xl);text-align:left}
.pb-card::before{content:"";position:absolute;z-index:-1;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.22;pointer-events:none}
.pb-anchor{grid-row:1/3;justify-content:flex-end;min-height:clamp(220px,26vw,340px)}
.pb-anchor::before{background:var(--amber);top:-20%;right:-15%;opacity:.28}
.pb-rating::before{background:#4F42C2;top:-30%;right:-20%;opacity:.14}
.pb-cats::before{background:var(--amber);bottom:-40%;left:-20%;opacity:.16}
.pb-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proof-bento dd{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;font-size:clamp(2.2rem,4vw,3.25rem)}
.pb-anchor dd{font-size:clamp(3rem,7vw,6rem);letter-spacing:-.045em}
.proof-bento dd small{font-size:.5em;color:var(--amber-dark);margin-left:4px}
.proof-bento dt{font-size:14.5px;color:var(--muted);line-height:1.4}
.pb-anchor dt{font-size:clamp(15px,1.3vw,17px);color:var(--ink-2)}
.pb-stars{display:block;width:100px;height:18px;margin:2px 0 2px;background:linear-gradient(90deg,var(--amber) calc(var(--r) / 5 * 100%),var(--line) 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 0l2.9 6 6.6.8-4.9 4.5 1.3 6.5L10 14.6l-5.9 3.2 1.3-6.5L.5 6.8 7.1 6z'/%3E%3C/svg%3E") 0 0/20% 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 0l2.9 6 6.6.8-4.9 4.5 1.3 6.5L10 14.6l-5.9 3.2 1.3-6.5L.5 6.8 7.1 6z'/%3E%3C/svg%3E") 0 0/20% 100% repeat-x}
.pb-src{margin:12px 0 0;font-size:12.5px;color:var(--faint)}
@media (max-width:640px){
  .proof-bento{grid-template-columns:minmax(0,1fr)}
  .pb-anchor{grid-row:auto;min-height:0}
  .pb-anchor dd{font-size:clamp(3rem,13vw,3.6rem)}
}
.proof-stats .proof-bento .fig{flex-direction:column;align-items:flex-start;text-align:left;padding:clamp(20px,2.6vw,32px);border-left:0;border-top:0}
.proof-stats .proof-bento .pb-anchor{justify-content:flex-end}
@media (max-width:640px){.proof-stats .proof-bento .fig{padding:20px}}
/* one underline per link: links that draw their own growing line never also get the browser's text underline */
.foot .foot-root:hover,.foot .foot-root:focus-visible,.foot li a:hover,.foot li a:focus-visible,.lede a:hover,.cmp-note a:hover,.pt-meta a:hover,.next-stay a:hover,.faq-more a:hover{text-decoration:none}

/* Phones: the hero card drops its "For hotels, homestays and resorts worldwide" pill (text stays in the HTML) */
@media (max-width:640px){
  .hero-stack .hero-copy .eyebrow{display:none}
  .hero-stack .hero-copy h1{margin-top:0}
}

/* Module pages: the search phrase is the small first line of the h1, in the eyebrow style; the slogan keeps its look */
h1 .h1-kw{display:flex;width:fit-content;margin:0 0 20px;font-family:var(--body);line-height:1.6;letter-spacing:.06em}
.hero h1 .h1-kw{display:flex;width:fit-content;max-width:100%;white-space:normal}
.hero h1 .h1-kw .dot{display:inline-block;flex:none}

/* Current page in the header (2026-10-20): Super Intelligence and Pricing light up in the menu bar instead of showing a
   breadcrumb; on Grow and Manage pages the Grow or Manage button lights up, and the page is tinted inside its menu card */
.crumb-none{padding-top:clamp(8px,1.4vw,16px)}
.nav-links>a{position:relative;padding:8px 12px;border-radius:var(--r-sm);transition:background var(--m-base,220ms) ease,color var(--m-base,220ms) ease}
.nav-links>a[aria-current="page"],.navdd:has(.vsw-menu a[aria-current="page"]) .nav-dd{background:rgba(255,185,0,.16);color:var(--ink);text-decoration:none}
.nav-links>a[aria-current="page"]::after,.navdd:has(.vsw-menu a[aria-current="page"]) .nav-dd::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--amber)}
.navdd .nav-dd{position:relative}
.navdd .vsw-menu a[aria-current="page"]{background:rgba(255,185,0,.12)}
.navdd .vsw-menu a[aria-current="page"] b{color:var(--ink)}
.mobile-menu a[aria-current="page"]{background:rgba(255,185,0,.14)}
/* quieter, using the nav's own hover pill: current item slightly stronger than hover; submenu current lighter than hover */
.nav-links>a[aria-current="page"],.navdd:has(.vsw-menu a[aria-current="page"]) .nav-dd{background:rgba(18,21,33,.07);color:var(--ink)}
.nav-links>a[aria-current="page"]::after,.navdd:has(.vsw-menu a[aria-current="page"]) .nav-dd::after{content:none}
.navdd .vsw-menu a[aria-current="page"]{background:rgba(79,66,194,.04)}
.mobile-menu a[aria-current="page"]{background:rgba(18,21,33,.05);color:var(--ink)}
.mobile-menu .vsw-h.is-current{color:var(--ink)}

/* Hero headline (owner, 2026-10-20): font-size unchanged; tighter heavier set and the warm ink colour (headline only).
   Plus Jakarta Sans tops out at 800 on Google Fonts, so 900 renders at its heaviest real weight, 800. */
.hero h1{line-height:1.1;letter-spacing:-.035em;margin:20px 0 22px;font-weight:900;color:#211202e0}
.hero h1 .h1-kw{color:var(--lav-ink)}
/* Phones: the hero background fades out at its bottom edge instead of ending in a hard line above the logo strip */
@media (max-width:640px){.hero-stack .hero-bg{-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent)}}
/* Phones: room under the hero card so its soft shadow fades out inside the hero instead of being cut into a line */
@media (max-width:640px){.hero-stack{padding-bottom:calc(clamp(28px,4vw,56px) + 36px)}}
/* "See all FAQs" under each page's questions (links to the FAQs page, all topics) */
.acc .faq-all-link{margin:10px 0 0 4px}

/* Phones: the demo block drops its three bullets (Part 1 and Part 2 / links by email and WhatsApp / no card) */
@media (max-width:640px){.demo-copy ul{display:none}}