:root {
  /* Brand colors, fonts, and shared radii match base.css exactly (same names,
     same values) — this is one brand across the marketing page and the app.
     The lp- prefixed tokens below are deliberately distinct from base.css's
     ink/line/paper/radius-xl: this Persuade surface wants an airier, true-white
     background and a slightly larger card radius than the Operate/dashboard
     surface. Prefixed so that's a legible choice, not silent same-name drift. */
  --green-900: #1b5e20; --green-800: #2e7d32; --green-700: #388e3c;
  --green-600: #43a047; --green-100: #c8e6c9; --green-50: #e8f5e9; --green-25: #f1f8e9;
  --blue-600: #1976d2; --teal-700: #00838f; --purple-700: #6a1b9a; --amber-700: #f57f17;
  --red-700: #c62828; --red-50: #ffebee;
  --lp-ink-900: #1a1c1a; --lp-ink-800: #2c2f2c; --lp-ink-600: #565b56; --lp-ink-400: #7c817c; --lp-ink-300: #9aa09a;
  --lp-line-200: #e2e6e2; --lp-line-100: #edf0ed;
  --lp-paper: #fff; --lp-paper-alt: #f6f8f6;
  --color-primary: var(--green-800);
  --font-sans: 'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono: 'IBM Plex Mono','SF Mono',ui-monospace,monospace;
  --shadow-card: 0 2px 10px rgba(27,94,32,.07);
  --shadow-raised: 0 10px 34px rgba(27,94,32,.12);
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --lp-radius-xl: 16px; --radius-pill: 9999px;
  --maxw: 1200px;
}

*,*::before,*::after{box-sizing:border-box}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
.cta-band a:focus-visible,.cta-band button:focus-visible{outline-color:#fff}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--lp-ink-800);background:var(--lp-paper);
  font-family:var(--font-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;color:var(--lp-ink-900);line-height:1.15;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}

.section-alt{background:var(--lp-paper-alt)}
.section{max-width:var(--maxw);margin:0 auto;padding:88px 24px}

.section-h{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;max-width:44ch}
.section-sub{margin-top:10px;color:var(--lp-ink-600);font-size:1rem;max-width:56ch}

/* Sub-page header (About, Product, Why Us, Demo, Contact) */
.page-hero{max-width:var(--maxw);margin:0 auto;padding:56px 24px 8px}
.page-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.page-hero p{margin-top:14px;color:var(--lp-ink-600);font-size:1.05rem;max-width:60ch}

/* Long-form content sections (Product Details, Why Us, Demo) */
.prose-section h2{font-size:1.4rem;font-weight:700;margin-bottom:12px}
.prose-section p{color:var(--lp-ink-600);font-size:1rem;max-width:70ch}
.prose-section p + p{margin-top:12px}

/* Contact page */
.contact-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;
  max-width:var(--maxw);margin:0 auto;padding:32px 24px 88px;
}
@media (max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* Signup page — single centered column, reuses .contact-form/.form-field */
.signup-grid{max-width:460px;margin:0 auto;padding:32px 24px 88px}
.signup-radio{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--lp-ink-800);cursor:pointer}
.signup-radio input{accent-color:var(--color-primary)}
.signup-alt{margin-top:4px;font-size:.85rem;color:var(--lp-ink-600)}
.signup-alt a{color:var(--color-primary);text-decoration:underline}
.signup-alt a:hover{color:var(--green-900)}

.contact-info{display:flex;flex-direction:column;gap:22px}
.contact-info-row{display:flex;gap:14px;align-items:flex-start}
.contact-info-icon{
  width:36px;height:36px;flex:none;border-radius:var(--radius-md);
  background:var(--green-50);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-icon svg{width:18px;height:18px}
.contact-info-row h3{font-size:.95rem;font-weight:700;margin-bottom:2px}
.contact-info-row p{color:var(--lp-ink-600);font-size:.92rem}
.contact-info-row a{color:var(--color-primary);text-decoration:underline}
.contact-info-row a:hover{color:var(--green-900)}

.contact-form{display:flex;flex-direction:column;gap:18px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:.85rem;font-weight:600;color:var(--lp-ink-800)}
.form-field input,.form-field textarea{
  font-family:inherit;font-size:.95rem;padding:10px 12px;
  border:1px solid var(--lp-line-200);border-radius:var(--radius-md);
  background:var(--lp-paper);color:var(--lp-ink-900);
  transition:border-color .15s,box-shadow .15s;
}
.form-field input:focus,.form-field textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(46,125,50,.15);
}
.form-field textarea{resize:vertical;min-height:120px}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:12px 14px;border-radius:var(--radius-md);font-size:.9rem;font-weight:600}
.form-msg-success{background:var(--green-50);color:var(--green-900);border:1px solid var(--green-100)}
.form-msg-error{background:var(--red-50);color:var(--red-700);border:1px solid #f0c4c4}

/* Buttons (shared radius/shape lock with the app) */
.btn-pri,.btn-gho,.btn-ter{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;
  padding:10px 18px;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s;
}
.btn-pri{background:var(--color-primary);color:#fff;border:1px solid transparent}
.btn-pri:hover{background:var(--green-900)}
.btn-pri:active{transform:translateY(1px)}
.btn-gho{background:transparent;color:var(--lp-ink-800);border:1px solid var(--lp-line-200)}
.btn-gho:hover{background:var(--lp-line-100)}
.btn-gho:active{transform:translateY(1px)}
.btn-ter{background:var(--green-50);color:var(--color-primary);border:1px solid transparent}
.btn-ter:hover{background:var(--green-100)}
.btn-ter:active{transform:translateY(1px)}
.btn-lg{padding:13px 24px;font-size:1rem}

/* Nav */
.lnav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lp-line-100);
  display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 24px;max-width:var(--maxw);margin:0 auto;
}
.lbrand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--lp-ink-900)}
.lbrandsq{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--green-50);color:var(--color-primary)}
.lbrandsq svg{width:15px;height:15px}
.lnav-links{display:flex;align-items:center;gap:28px;font-size:.95rem;font-weight:600}
.lnav-links a:not(.btn-pri){color:var(--lp-ink-600);transition:color .15s}
.lnav-links a:not(.btn-pri):hover,.lnav-links a.active{color:var(--lp-ink-900)}
.lnav-toggle{display:none;background:none;border:none;padding:11px;cursor:pointer;flex-direction:column;justify-content:center;gap:4px}
.lnav-toggle span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--lp-ink-800);transition:transform .2s ease,opacity .2s ease}
.lnav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lnav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.lnav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Hero */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:56px 24px 40px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero-copy h1{font-size:clamp(2.1rem,4.4vw,3.1rem)}
.hero-sub{margin-top:18px;font-size:1.1rem;color:var(--lp-ink-600);max-width:46ch}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* Hero flow animation: channel icons feeding into the StaySync hub */
.flowgraph{position:relative;height:120px;margin-bottom:14px;--flow-dx:230px}
@media (max-width:860px){.flowgraph{--flow-dx:150px}}

.flow-line{position:absolute;left:15%;right:17%;top:50%;height:0;border-top:2px dashed var(--lp-line-200);z-index:0}

.flow-hub{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;z-index:2;
  background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-raised);
}
.flow-hub svg{width:22px;height:22px}
@media (prefers-reduced-motion:no-preference){
  .flow-hub{animation:flow-pulse 2.6s ease-in-out infinite}
}
@keyframes flow-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(46,125,50,.35),var(--shadow-raised)}
  50%{box-shadow:0 0 0 9px rgba(46,125,50,0),var(--shadow-raised)}
}

.flow-icon{
  position:absolute;left:2%;width:36px;height:36px;border-radius:50%;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.66rem;color:#fff;
  opacity:0;
}
.flow-1{top:2%;background:var(--teal-700)}
.flow-2{top:30%;background:var(--blue-600)}
.flow-3{top:58%;background:var(--purple-700)}
.flow-4{top:84%;background:var(--amber-700)}

@media (prefers-reduced-motion:no-preference){
  .flow-icon{animation:flow-travel 4.8s cubic-bezier(.4,0,.2,1) infinite}
  .flow-1{animation-delay:0s}
  .flow-2{animation-delay:1.2s}
  .flow-3{animation-delay:2.4s}
  .flow-4{animation-delay:3.6s}
}
@media (prefers-reduced-motion:reduce){
  .flow-icon{opacity:1}
}
@keyframes flow-travel{
  0%{transform:translate(0,0) scale(1);opacity:0}
  10%{opacity:1}
  75%{transform:translate(var(--flow-dx),var(--dy,0)) scale(.9);opacity:1}
  92%{transform:translate(calc(var(--flow-dx) + 14px),var(--dy,0)) scale(.35);opacity:.5}
  100%{transform:translate(calc(var(--flow-dx) + 22px),var(--dy,0)) scale(.15);opacity:0}
}

/* Hero calendar preview card */
.calpreview{
  background:var(--lp-paper);border:1px solid var(--lp-line-100);border-radius:var(--lp-radius-xl);
  box-shadow:var(--shadow-raised);padding:20px 22px 22px;
}
.calpreview-head{display:flex;gap:7px;margin-bottom:16px}
.cph-dot{width:10px;height:10px;border-radius:50%}
.cph-1{background:#ff5f57}.cph-2{background:#febc2e}.cph-3{background:#28c840}
.calpreview-grid{display:flex;flex-direction:column;gap:14px}
.cp-row{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center}
.cp-label{font-size:.8rem;color:var(--lp-ink-600);font-weight:600}
.cp-track{position:relative;height:20px;background:var(--lp-paper-alt);border-radius:var(--radius-sm);overflow:visible}
.cp-bar{position:absolute;top:0;height:100%;border-radius:var(--radius-sm)}
.cp-airbnb{background:var(--teal-700)}
.cp-vrbo{background:var(--blue-600)}
.cp-booking{background:var(--purple-700)}
.cp-conflict{background:var(--red-700);opacity:.88;box-shadow:0 0 0 2px #fff}
.cp-row-conflict .cp-track{box-shadow:0 0 0 3px var(--red-50)}
.calpreview-alert{
  display:flex;align-items:center;gap:10px;margin-top:18px;padding:11px 14px;
  background:var(--red-50);border-radius:var(--radius-md);color:var(--red-700);
  font-size:.85rem;font-weight:600;line-height:1.4;
}
.calpreview-alert svg{width:18px;height:18px;flex:none}

@media (prefers-reduced-motion:no-preference){
  .cp-conflict{animation:pulse-conflict 2.4s ease-in-out infinite}
}
@keyframes pulse-conflict{0%,100%{opacity:.88}50%{opacity:.55}}

/* Bento */
.bento{
  margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.bcell{
  grid-column:span 2;background:var(--lp-paper);border:1px solid var(--lp-line-100);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-card);
}
.bcell:not(.bcell-lg){grid-column:span 2}
@media (min-width:640px){
  .bcell:not(.bcell-lg){grid-column:span 1}
}
.bcell-lg{grid-column:span 4}
@media (min-width:900px){
  .bcell-lg{grid-column:span 2}
}
.bcell-conflict{background:var(--red-50);border-color:#f0c4c4}
.bicon{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--radius-md);background:var(--green-50);color:var(--color-primary);margin-bottom:14px;
}
.bicon svg{width:19px;height:19px}
.bicon-red{background:#f8d5d5;color:var(--red-700)}
.bcell h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.bcell p{color:var(--lp-ink-600);font-size:.92rem}

/* How it works */
.steps{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{border-top:2px solid var(--color-primary);padding-top:16px}
.step.reveal:nth-child(2){transition-delay:.14s}
.step.reveal:nth-child(3){transition-delay:.28s}
.step-verb{display:block;font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--color-primary);margin-bottom:8px}
.step p{color:var(--lp-ink-600);font-size:.95rem}

/* Chips */
.chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;color:var(--color-primary);
  background:var(--green-50);border:1px solid var(--green-100);padding:7px 16px;border-radius:var(--radius-pill);
}

/* Team split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-copy p{margin-top:14px;color:var(--lp-ink-600);font-size:1rem}
.split-visual{display:flex;flex-direction:column;gap:14px}
.rolecard{background:var(--lp-paper);border:1px solid var(--lp-line-100);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-card)}
.rolename{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.04em}
.rolecard p{margin-top:6px;color:var(--lp-ink-600);font-size:.92rem}

/* Final CTA band */
.cta-band{
  background:var(--green-900);color:#fff;text-align:center;
  padding:80px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.3rem);max-width:26ch}
.cta-band p{color:var(--green-100);font-size:1.05rem}
.cta-band .btn-pri{background:#fff;color:var(--green-900)}
.cta-band .btn-pri:hover{background:var(--green-50)}
.cta-band-alt{font-size:.9rem;color:var(--green-100)}
.cta-band-alt a{color:#fff;text-decoration:underline;font-weight:600}
.cta-band-alt a:hover{color:var(--green-50)}

/* Footer */
.lfooter{
  max-width:var(--maxw);margin:0 auto;padding:44px 24px 40px;
  border-top:1px solid var(--lp-line-100);color:var(--lp-ink-400);font-size:.85rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
}
.lfooter-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--lp-ink-800);font-size:.95rem}
.lfooter a{color:var(--color-primary);text-decoration:underline}
.lfooter a:hover{color:var(--green-900)}
.lfooter-brand .lbrandsq{width:22px;height:22px}
.lfooter-brand .lbrandsq svg{width:12px;height:12px}

/* Scroll reveal — visible by default; JS (js-anim) opts *in* to the hidden/animate-in
   state, so a blocked, slow, or broken script never hides page content. */
.reveal{opacity:1;transform:none}
body.js-anim .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
body.js-anim .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.js-anim .reveal{opacity:1;transform:none;transition:none}
}

/* Mobile */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:32px}
  .split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
/* Nav collapses earlier than the rest of the layout — six items plus the
   Sign in button get cramped on tablet/small-laptop widths well before
   640px, so the hamburger takes over at 900px instead. */
@media (max-width:900px){
  .lnav-toggle{display:flex}
  .lnav-links{
    position:absolute;top:68px;left:0;right:0;background:var(--lp-paper);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;
    border-bottom:1px solid var(--lp-line-100);box-shadow:var(--shadow-card);
    display:none;
  }
  .lnav-links.is-open{display:flex}
  .lnav-links a:not(.btn-pri):not(.btn-gho):not(.btn-ter){padding:12px 0;border-bottom:1px solid var(--lp-line-100)}
  .lnav-links .btn-pri,.lnav-links .btn-gho,.lnav-links .btn-ter{margin-top:12px;justify-content:center}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bcell,.bcell-lg{grid-column:span 1}
  .section{padding:56px 20px}
  .cta-band{padding:56px 20px}
}