/* ---------------------------------------------------------------
   StaySonar — marketing site styles.

   Lifted from StayPilot's landing page so the two sit in the same
   visual family: same tokens, nav, hero rhythm, cards, pricing, FAQ
   and footer. The one replaced block is the hero demo — StayPilot
   animates a ChatGPT answer, StaySonar animates an inbox receiving a
   booking alert (see .gm-* at the end of this file).
   --------------------------------------------------------------- */


/* ============================== tokens ============================== */
:root{
  --ink:      #14151a;
  --ink-2:    #33363e;
  --body:     #4e525c;
  --muted:    #787d89;
  --line:     #ebe9e4;
  --line-2:   #eef0f4;
  --bg:       #ffffff;
  --cream:    #fbf1e8;
  --cream-2:  #faf7f2;
  --orange:   #ff4a1c;
  --orange-2: #e83a0e;
  --orange-soft:#ffe8df;
  --blue-soft:#e5edfd;
  --green-soft:#e0f5e9;
  --purple-soft:#eee7fc;
  --pink-soft:#fde7f0;
  --amber-soft:#fdf1d7;
  --radius:   18px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow-card:0 1px 2px rgba(20,21,26,.05),0 8px 24px -12px rgba(20,21,26,.08);
  --shadow-pop:0 24px 60px -24px rgba(20,21,26,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:#ffd9cb;color:var(--ink)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid rgba(255,74,28,.45);outline-offset:2px;border-radius:6px}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:1060px;margin:0 auto;padding:0 24px}

/* ============================== buttons ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-weight:700;cursor:pointer;border:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-orange{
  background:var(--orange);color:#fff;
  padding:12px 22px;border-radius:13px;font-size:15.5px;
  box-shadow:0 8px 20px -8px rgba(255,74,28,.55);
}
.btn-orange:hover{background:var(--orange-2);transform:translateY(-1px)}
.btn-dark{
  background:var(--ink);color:#fff;border-radius:16px;
  padding:16px 34px;font-size:17px;
  box-shadow:0 16px 34px -14px rgba(20,21,26,.45);
}
.btn-dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(20,21,26,.5)}
.btn-xl{padding:21px 92px;font-size:19.5px;border-radius:17px}
.btn-outline{
  background:#fff;color:var(--ink);border:1.5px solid var(--ink);
  border-radius:14px;padding:13px 26px;font-size:15.5px;
}
.btn-outline:hover{background:var(--ink);color:#fff}

/* ============================== nav ============================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(20,21,26,.18)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{width:38px;height:38px}
.logo-mark .lm-c{animation:lmClimb 3s cubic-bezier(.45,0,.2,1) infinite}
.logo-mark .lm-c3{animation-delay:0s}
.logo-mark .lm-c2{animation-delay:.14s}
.logo-mark .lm-c1{animation-delay:.28s}
@keyframes lmClimb{0%,46%,100%{transform:translateY(0)}10%{transform:translateY(-2.4px)}22%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.logo-mark .lm-c{animation:none}}
.logo-word{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.nav-links{display:flex;gap:38px;font-weight:600;font-size:15.5px;color:var(--ink-2)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--orange)}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-login{font-weight:600;font-size:15.5px;color:var(--ink-2)}
.nav-login:hover{color:var(--orange)}
@media(max-width:920px){.nav-links,.nav-login{display:none}}

/* ============================== hero ============================== */
.hero{position:relative;padding:50px 0 44px;text-align:center;overflow:hidden}
.hero-pattern{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cdefs%3E%3Cpattern id='p' width='6.6' height='6.6' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1.4' cy='1.4' r='1.35' fill='%23dce3ef'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='9' y='9' width='40' height='40' fill='url(%23p)'/%3E%3C/svg%3E");
}
.hero-pattern::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(56% 58% at 50% 44%, #fff 8%, rgba(255,255,255,.88) 46%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.75) 100%);
}
.ftile{
  position:absolute;width:48px;height:48px;z-index:1;
  background:#fff;border:1px solid #ececec;border-radius:13px;
  display:grid;place-items:center;
  box-shadow:0 3px 12px rgba(20,21,26,.06);
  animation:bob 7s ease-in-out infinite;
}
.ftile svg{width:24px;height:24px}
@keyframes bob{50%{transform:translateY(-9px)}}
.ft1{top:15%;left:7%;rotate:-6deg;animation-delay:.2s}
.ft2{top:11%;right:8%;rotate:6deg;animation-delay:1.4s}
.ft3{top:55%;left:14%;rotate:4deg;animation-delay:2.6s}
.ft4{top:50%;right:13%;rotate:-5deg;animation-delay:.9s}
.ft5{top:82%;left:5%;rotate:3deg;animation-delay:1.9s}
.ft6{top:76%;right:5%;rotate:-4deg;animation-delay:3.1s}
@media(max-width:1100px){.ft3,.ft4{display:none}}
@media(max-width:760px){.ftile{display:none}}

.hero-inner{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.hero-demo{max-width:460px;margin:0 auto;width:100%}
@media(max-width:1019px){
  .hero{padding:30px 0 34px}
  .hero-grid{gap:24px}
  .hero-sub{margin-top:12px}
  .hero-cta{margin-top:18px}
  .hero-demo .chatw-body{min-height:250px}
  .hero-demo .chatw{box-shadow:0 14px 34px -18px rgba(20,21,26,.3)}
}
@media(min-width:1020px){
  .hero-grid{grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
  .hero-sub{margin-left:auto;margin-right:auto}
}

/* ---- hero demo: "your listing appears in ChatGPT" ---- */
.chatw{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -24px rgba(20,21,26,.35);overflow:hidden;text-align:left}
.chatw-top{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.cw-dots{display:flex;gap:5px}
.cw-dots i{width:9px;height:9px;border-radius:50%;background:#e4e2de}
.cw-title{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);margin:0 auto}
.cw-title svg{width:15px;height:15px}
.cw-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:#1d7a46;background:#e9f7ef;border-radius:99px;padding:3px 9px}
.cw-live i{width:6px;height:6px;border-radius:50%;background:#22a55c;animation:cwPulse 1.6s ease-in-out infinite}
@keyframes cwPulse{0%,100%{opacity:1}50%{opacity:.35}}
.chatw-body{padding:16px 14px 18px;min-height:320px}
.cw-user{margin-left:auto;max-width:85%;width:fit-content;background:#f1efec;border-radius:14px 14px 4px 14px;padding:9px 13px;font-size:13.5px;font-weight:600;color:var(--ink);min-height:37px}
.cw-caret{display:inline-block;width:2px;height:14px;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:cwBlink .85s step-end infinite}
@keyframes cwBlink{50%{opacity:0}}
.cw-think{display:flex;gap:5px;margin:16px 0 0 4px}
.cw-think[hidden]{display:none}
.cw-think i{width:8px;height:8px;border-radius:50%;background:#c9c6c0;animation:cwBounce 1.1s ease-in-out infinite}
.cw-think i:nth-child(2){animation-delay:.15s}
.cw-think i:nth-child(3){animation-delay:.3s}
@keyframes cwBounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.cw-ans{margin-top:14px}
.cw-ans[hidden]{display:none}
.cw-lead{font-size:12.5px;color:var(--body);margin:0 0 10px 2px}
.cw-row{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;padding:8.5px 11px;margin-bottom:7px;font-size:12.5px;font-weight:600;color:var(--ink);opacity:0;flex-wrap:wrap}
.cw-row>span:first-child{color:var(--muted);font-weight:800}
.cw-row em{font-style:normal;color:var(--muted);font-weight:700;margin-left:auto;font-size:11.5px}
.cw-more{font-size:11.5px;color:var(--muted);font-weight:600;padding:2px 0 0 4px;opacity:0}
.cw-hit{border-color:var(--orange);background:#fff4ef;position:relative}
.cw-hit b{font-weight:800}
.cw-you{background:var(--orange);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;border-radius:99px;padding:2.5px 9px;margin-top:2px;flex:0 0 auto;align-self:flex-start}
.cw-hit::after{content:"";flex-basis:100%;order:1;height:0}
.cw-hit .cw-you{order:2}
.cw-ans.play .cw-row,.cw-ans.play .cw-more{animation:cwIn .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*.5s)}
@keyframes cwIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.cw-ans.play .cw-hit{animation:cwIn .45s cubic-bezier(.2,.8,.3,1) both,cwGlow 1.6s ease-out 2;animation-delay:calc(var(--i)*.5s),calc(var(--i)*.5s + .6s)}
@keyframes cwGlow{0%{box-shadow:0 0 0 0 rgba(255,74,28,.45)}70%{box-shadow:0 0 0 12px rgba(255,74,28,0)}100%{box-shadow:0 0 0 0 rgba(255,74,28,0)}}
.hero h1{
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;
  max-width:900px;margin:0 auto;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--orange)}
.ai-brand{white-space:nowrap;color:#3a3d45}
/* rotating AI brand in the headline: ChatGPT → Gemini → Claude */
.ai-rotor{display:inline-grid;justify-items:center;vertical-align:baseline}
.ai-rotor .ai-brand{grid-area:1/1;animation:rotor3 9s ease-in-out infinite;will-change:opacity,transform}
.ai-rotor .ai-gem{color:#5a5f8f;animation-delay:-6s}
.ai-rotor .ai-claude{color:#d97757;animation-delay:-3s}
@keyframes rotor3{
  0%{opacity:0;transform:translateY(.5em)}
  3%,28%{opacity:1;transform:none}
  33%,100%{opacity:0;transform:translateY(-.5em)}
}
@media (prefers-reduced-motion: reduce){
  .ai-rotor .ai-brand{animation:none}
  .ai-rotor .ai-gem,.ai-rotor .ai-claude{display:none}
}
.ai-brand svg{
  display:inline-block;width:.78em;height:.78em;
  vertical-align:-.07em;margin-right:.14em;
}
.hero-sub{
  max-width:640px;margin:16px auto 0;
  font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--body);line-height:1.55;
  font-weight:500;
}
.hero-cta{margin-top:22px}
.hero-go{
  display:flex;gap:8px;align-items:center;max-width:520px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 14px;
  box-shadow:0 10px 30px -18px rgba(20,21,26,.25);
}
.hero-go input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font:inherit;font-size:14px;color:var(--ink);padding:9px 0;
}
.hero-go input::placeholder{color:var(--muted)}
.hero-go .btn{padding:11px 20px;font-size:14px;border-radius:10px;white-space:nowrap}
@media(max-width:520px){
  .hero-go{flex-direction:column;align-items:stretch;padding:8px}
  .hero-go input{padding:9px 8px}
}
.hero-guarantee{
  margin-top:15px;display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--body);font-size:13px;flex-wrap:wrap;
}
.hero-guarantee strong{color:var(--ink);font-weight:700}
.hero-guarantee svg{width:17px;height:17px;flex-shrink:0}

/* ============================== marquee ============================== */
.marquee-section{padding:22px 0 46px}
.marquee-label{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.host-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #ececec;border-radius:10px;
  padding:11px 20px;color:#6a6f7a;font-size:14px;font-weight:700;
  white-space:nowrap;
}
.host-chip.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:500;font-size:15px}
.host-chip.mono{font-family:'SF Mono',Menlo,Consolas,monospace;font-weight:600;font-size:13px}
.host-chip.caps{letter-spacing:.22em;font-size:12.5px}
.host-chip.lower{text-transform:lowercase;letter-spacing:.08em;font-weight:600}
.host-chip svg{width:15px;height:15px;opacity:.7}

/* ============================== cream panel ============================== */
.panel-cream{
  width:min(1360px,calc(100% - 32px));
  margin:36px auto 0;
  background:var(--cream);
  border-radius:34px;
  padding:88px 0 92px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);margin-bottom:16px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.section-head{text-align:center;margin-bottom:54px}
.section-head h2{
  font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:800;
  letter-spacing:-.028em;line-height:1.13;text-wrap:balance;
}
.section-sub{max-width:640px;margin:16px auto 0;color:var(--body);font-size:17.5px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:32px 28px;box-shadow:var(--shadow-card);
}
.step-num{
  position:absolute;top:26px;right:26px;
  font-size:13px;font-weight:800;color:#c9c4bc;letter-spacing:.08em;
}
.icon-chip{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
}
.icon-chip svg{width:24px;height:24px}
.chip-orange{background:var(--orange-soft);color:var(--orange-2)}
.chip-blue{background:var(--blue-soft);color:#3564d8}
.chip-green{background:var(--green-soft);color:#1e9455}
.chip-purple{background:var(--purple-soft);color:#7a4fd3}
.chip-pink{background:var(--pink-soft);color:#d43f7d}
.chip-amber{background:var(--amber-soft);color:#c07b08}
.step-card h3{font-size:19.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.step-card p{font-size:15.5px;color:var(--body)}

/* ============================== features ============================== */
.features{padding:104px 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}
.feature-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:30px 28px;box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(20,21,26,.16)}
.feature-card h3{font-size:18.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:9px}
.feature-card p{font-size:15px;color:var(--body)}

/* ============================== pricing ============================== */
.pricing{background:var(--cream-2);padding:104px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:980px){.price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:36px 32px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  position:relative;
}
.price-card.popular{
  background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:var(--shadow-pop);
}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--orange);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 16px;border-radius:99px;white-space:nowrap;
}
.price-name{font-size:17px;font-weight:800;margin-bottom:4px}
.price-for{font-size:13.5px;color:var(--muted);margin-bottom:22px;font-weight:600}
.popular .price-for{color:#a3a6ae}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:24px}
.price-amount b{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price-amount span{font-size:14.5px;color:var(--muted);font-weight:600}
.popular .price-amount span{color:#a3a6ae}
.price-feats{flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.price-feats li{display:flex;gap:10px;font-size:14.5px;font-weight:500;align-items:flex-start}
.price-feats svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--orange)}
.popular .price-feats svg{color:#ff7a52}
.price-note{text-align:center;margin-top:34px;color:var(--muted);font-size:14.5px;font-weight:600}
.bill-tabs{display:flex;justify-content:center;margin-bottom:36px}
.bill-tabs .bt-wrap{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px;gap:4px}
.bill-tab{border:none;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);padding:9px 20px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s ease,color .15s ease}
.bill-tab.on{background:#14151a;color:#fff}
.bill-tab em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.02em;background:#e2f4e9;color:#1d7a46;border-radius:99px;padding:3px 9px}
.bill-tab.on em{background:#2e6e48;color:#d9f2e3}
.price-cycle{font-size:12.5px;font-weight:600;color:var(--muted);min-height:18px;margin:-16px 0 20px}
.popular .price-cycle{color:#a3a6ae}

/* ============================== faq ============================== */
.faq{padding:104px 0}
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;background:#fff}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 24px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:24px;font-weight:400;color:var(--muted);
  transition:transform .25s ease;flex-shrink:0;line-height:1;
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--orange)}
.faq-item p{padding:0 24px 22px;color:var(--body);font-size:15.5px;max-width:660px}

/* ============================== final cta ============================== */
.cta{position:relative;padding:120px 0;text-align:center;overflow:hidden}
.cta .hero-pattern{opacity:.9}
.cta-inner{position:relative;z-index:2}
.cta h2{
  font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;max-width:820px;margin:0 auto;text-wrap:balance;
}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta-sub{max-width:560px;margin:20px auto 0;color:var(--body);font-size:17.5px}
.cta-form{
  display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap;
}
.cta-form input[type=email]{
  font-family:var(--font);font-size:16px;font-weight:500;
  padding:17px 22px;border-radius:15px;border:1.5px solid #dcdcd8;
  width:min(400px,100%);background:#fff;color:var(--ink);
  transition:border-color .15s;
}
.cta-form input[type=email]::placeholder{color:#a9adb6}
.cta-form input[type=email]:focus{border-color:var(--orange);outline:none}
.hp{position:absolute;left:-5000px;opacity:0;pointer-events:none}
.cta-fine{margin-top:18px;font-size:14px;color:var(--muted);font-weight:600}
.form-alert{
  max-width:520px;margin:28px auto 0;padding:15px 22px;border-radius:14px;
  font-weight:700;font-size:15.5px;
}
.form-alert.ok{background:var(--green-soft);color:#157347;border:1px solid #bfe8d0}
.form-alert.err{background:#fde7e4;color:#c02b1a;border:1px solid #f6c3bb}

/* ============================== footer ============================== */
.footer{background:var(--ink);color:#fff;padding:64px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}
.footer .logo-word{color:#fff}
.footer-tag{margin-top:16px;color:#9a9ea8;font-size:14.5px;max-width:300px}
.footer h4{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7c8089;margin-bottom:18px}
.footer-links li{margin-bottom:11px}
.footer-links a{color:#c9ccd3;font-size:14.5px;font-weight:500;transition:color .15s}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{
  border-top:1px solid #26272d;padding-top:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:#7c8089;font-size:13.5px;
}

/* ============================== reveal ============================== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ============================== gmail demo ==============================
   The hero's proof: what actually lands in your inbox when a competitor
   takes a booking. Styled as a mail client rather than as an in-app
   screenshot, because the alert arriving unprompted IS the product. */

.gmw {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(20,21,26,.35); overflow: hidden; text-align: left;
}
.gmw-top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fbfbfa;
}
.gm-dots { display: flex; gap: 6px; }
.gm-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e3e2df; display: block; }
.gm-dots i:nth-child(1) { background: #ff5f57; }
.gm-dots i:nth-child(2) { background: #febc2e; }
.gm-dots i:nth-child(3) { background: #28c840; }
.gm-title {
  display: flex; align-items: center; gap: 7px; margin-left: 4px;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.gm-title svg { width: 17px; height: 17px; }
.gm-count {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: var(--orange);
}
.gm-count i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  animation: gm-blip 1.6s ease-out infinite;
}
@keyframes gm-blip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.gmw-body { min-height: 330px; padding: 8px 0 10px; }

.gm-mail {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px;
  padding: 12px 15px; border-bottom: 1px solid var(--line-2);
  opacity: 0; transform: translateY(-8px);
}
.gm-mail.in { animation: gm-drop .5s var(--ease-out, cubic-bezier(.2,.7,.2,1)) forwards; }
@keyframes gm-drop { to { opacity: 1; transform: none; } }
.gm-mail.unread { background: #fff7f4; }

.gm-av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff; background: var(--ink-2); flex: 0 0 auto;
}
.gm-av.a { background: #ff4a1c; }
.gm-av.b { background: #3564d8; }
.gm-av.c { background: #7a4fd3; }

.gm-from { display: flex; align-items: baseline; gap: 8px; }
.gm-from b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.gm-when { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gm-subj { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 3px; line-height: 1.35; }
.gm-subj .gm-hit { color: var(--orange); }
.gm-snip { font-size: 12.5px; color: var(--body); margin-top: 2px; line-height: 1.45; }
.gm-nights {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  padding: 3px 9px; border-radius: 99px; background: #14151a; color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
.gm-nights svg { width: 12px; height: 12px; }

@media (max-width: 900px) { .gmw-body { min-height: 260px; } }

/* ============================== staysonar additions ==============================
   .hero-copy and .how carry no styling in StayPilot (the hero grid and the
   cream band are addressed by their parents), so they are declared here to
   keep the markup self-documenting rather than left dangling. */
.hero-copy { min-width: 0; }
.how { padding: 92px 0; background: var(--cream); }
@media (max-width: 720px) { .how { padding: 64px 0; } }

/* ============================== demo board ==============================
   The landing page's proof-of-product: three real listings as rows on one
   shared date axis. Same visual grammar as the app's board, rebuilt
   standalone because the marketing site does not load board.css. */

.demoboard { padding: 92px 0; background: #fff; }
@media (max-width: 720px) { .demoboard { padding: 64px 0; } }

.db-wrap {
  border: 1px solid var(--line); border-radius: 20px; background: #fff;
  box-shadow: 0 24px 60px -30px rgba(20,21,26,.3); overflow: hidden;
}
.db-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.db { --col: 30px; --lab: 250px; min-width: min-content; }

.db-months, .db-days, .db-row {
  display: grid;
  grid-template-columns: var(--lab) repeat(var(--n), var(--col));
}
.db-months { border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.db-month {
  position: sticky; left: var(--lab);
  padding: 9px 10px 7px; font-size: 12px; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.db-days { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.db-d {
  text-align: center; padding: 6px 0 8px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); border-left: 1px solid var(--line-2);
}
.db-d.we { background: rgba(20,21,26,.022); }
.db-d.today {
  color: #fff; position: relative;
}
.db-d.today::before {
  content: ""; position: absolute; inset: 4px 3px; border-radius: 99px;
  background: var(--orange); z-index: -1;
}
.db-d.today { z-index: 0; }

.db-row + .db-row { border-top: 1px solid var(--line); }

/* sticky listing label */
.db-label {
  position: sticky; left: 0; z-index: 3; background: #fff;
  border-right: 1px solid var(--line); padding: 11px 14px;
  display: flex; gap: 11px; align-items: center; min-width: 0;
}
.db-months .db-label, .db-days .db-label { background: var(--surface-2); }
.db-cap { font-size: 11px; color: var(--muted); font-weight: 600; }
.db-label img, .db-img {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: var(--chip-bg); flex: 0 0 auto;
}
.db-meta { min-width: 0; display: block; }
.db-meta b {
  display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-meta em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 1px; }
.db-meta i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }

/* nights */
.db-n { border-left: 1px solid var(--line-2); min-height: 62px; }
.db-n.we { background: rgba(20,21,26,.022); }
.db-n.free { background: var(--green-soft); }
.db-n.nodata { background: repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f2f2f2 4px,#f2f2f2 8px); }
.db-n.out { opacity: .3; }

/* a booked stretch is one bar, not N squares — that is what makes it read */
.db-run { display: flex; align-items: center; padding: 0 2px; }
.db-run.out { opacity: .32; }
.db-bar {
  flex: 1; min-width: 0; background: var(--ink-2); color: #fff;
  border-radius: 99px; padding: 8px 10px; font-size: 11px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

.db-legend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 13px 18px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 12px; color: var(--body);
}
.db-legend span { display: flex; align-items: center; gap: 7px; }
.db-sw { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line); flex: 0 0 auto; }
.db-sw.booked { background: var(--ink-2); border-color: var(--ink-2); }
.db-sw.free { background: var(--green-soft); border-color: #c4e6d3; }
.db-sw.out { background: var(--ink-2); border-color: var(--ink-2); opacity: .3; }
.db-note { flex: 1 1 320px; min-width: 240px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

@media (max-width: 720px) { .db { --lab: 168px; --col: 26px; } }
.db-cap-note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }