/*
 * Ad landing pages: /lp/ and /lp/free-demo-offer/, plus /waitlist/, which reuses the hero.
 * Both share one shape: a centered hero with a large screenshot, three short
 * points, and one action. Shared components live in site.css; the demo form on
 * the free-demo page uses the .demo-* styles there.
 *
 * Contents
 *   1. Hero
 *   2. Three points
 *   3. Closing call to action (/lp/)
 *   4. Waitlist page (/waitlist/)
 */

/* 1. Hero -------------------------------------------------------------------- */

.landing-hero {
  position: relative;
  overflow: hidden;
  padding-top: 8rem;
  padding-bottom: 2.5rem;
}
.landing-intro {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.landing-intro .eyebrow {
  justify-content: center;
}
.landing-title {
  margin-top: 1.5rem;
  font-size: 2.25rem;
}
.landing-lede {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--color-ink-muted);
}
.landing-intro .cta-row {
  margin-top: 2.25rem;
}
/* Small reassurance line under the hero buttons. */
.landing-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-ink-dim);
}
.landing-shot {
  margin-top: 3.5rem;
}
@media (min-width: 640px) {
  .landing-hero {
    padding-top: 10rem;
  }
  .landing-title {
    font-size: 3.75rem;
  }
  .landing-lede {
    font-size: 1.25rem;
  }
}

/* 2. Three points ------------------------------------------------------------ */

.landing-points {
  padding-block: 4rem;
}
.point-grid {
  display: grid;
  gap: 1.25rem;
}
.point-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.point-card h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--color-ink);
}
.point-card p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-ink-muted);
}
@media (min-width: 640px) {
  .landing-points {
    padding-block: 6rem;
  }
  .point-card {
    padding: 1.75rem;
  }
}
@media (min-width: 768px) {
  .point-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 3. Closing call to action -------------------------------------------------- */

.landing-closing {
  padding-block: 5rem;
}
.landing-closing-inner {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.landing-closing-title {
  font-size: 1.875rem;
}
.landing-closing-inner p {
  margin-top: 1.25rem;
  line-height: 1.625;
  color: var(--color-ink-muted);
}
.landing-closing-action {
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .landing-closing {
    padding-block: 7rem;
  }
  .landing-closing-title {
    font-size: 3rem;
  }
}

/* 4. Waitlist page ---------------------------------------------------------- */

/* Helper line under the hero lede, in place of a button (the form is further down this page). */
.waitlist-scroll-hint {
  margin-top: 1.5rem;
}
/* "Why join" beside the form: the bold "Next steps:" label matches the heading color. */
.waitlist-why strong {
  color: var(--color-ink);
}
/*
 * On laptops and wider (two-column split), the "Why join" column runs longer than the form, so the
 * form card stays in view while that column scrolls. Its grid cell stretches to the row's height,
 * which gives the sticky card room to travel; short windows skip it so the form is never cut off.
 */
@media (min-width: 1024px) and (min-height: 720px) {
  .waitlist-form-column .demo-card {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }
}