/* Landing pages. Static HTML on purpose: the booking app renders in
   JavaScript, so it gives a crawler almost nothing to read. These pages are
   the indexable surface. Same palette and typeface as the app so arriving
   here and then booking feels like one product. */
:root{
  --canvas:#f4f4f5; --card:#fff; --ink:#111113; --ink-2:#3f3f46;
  --ink-3:#71717a; --ink-4:#a1a1aa; --line:#e4e4e7;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
header.site{display:flex; align-items:center; gap:14px; padding:26px 0}
header.site img{height:24px; width:auto}
header.site nav{margin-left:auto; display:flex; gap:18px; font-size:14.5px}
header.site nav a{color:var(--ink-3); text-decoration:none}
header.site nav a:hover{color:var(--ink)}

.hero{padding:34px 0 8px}
h1{font-size:40px; line-height:1.12; letter-spacing:-0.03em; margin:0 0 16px; font-weight:600}
.lede{font-size:19px; line-height:1.6; color:var(--ink-2); margin:0 0 28px}
.cta{
  display:inline-block; background:var(--ink); color:#fff; text-decoration:none;
  font-size:16px; font-weight:600; padding:15px 28px; border-radius:14px;
}
.cta:hover{background:#000}
.cta-note{display:block; margin-top:12px; font-size:14px; color:var(--ink-3)}

h2{font-size:25px; letter-spacing:-0.02em; margin:44px 0 12px; font-weight:600}
h3{font-size:18px; margin:26px 0 6px; font-weight:600}
p{margin:0 0 16px; color:var(--ink-2)}
ul{margin:0 0 18px; padding-left:22px; color:var(--ink-2)}
li{margin-bottom:8px}
strong{color:var(--ink)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:22px 0 8px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.card h3{margin:0 0 6px; font-size:16.5px}
.card p{margin:0; font-size:15px; line-height:1.55}

.faq{border-top:1px solid var(--line); padding-top:8px; margin-top:10px}
.faq h3{margin:20px 0 4px}

footer.site{
  margin-top:64px; padding:26px 0 60px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:14px;
}
footer.site a{color:var(--ink-3)}
@media (max-width:600px){ h1{font-size:31px} .lede{font-size:17px} body{font-size:16px} }