/* ==========================================================================
   Lead pages — /schedule-demo and /start-for-free.

   Both are the same object: one email field, a progressive second step, and a
   scheduler at the end. They share this stylesheet so they stay siblings by
   construction rather than by somebody remembering to copy a change across.

   Built on the site3 vocabulary (Aspekta display, purple accent, faint grid,
   product sims in app chrome) so they read as part of the same site as the
   home page rather than leftovers from the old marketing template.

   Structural device: a rail whose numbers carry real information, in whatever
   unit that page is actually promising —

     /schedule-demo   00:00 / 00:10 / 00:25   the thirty minutes of the call
     /start-for-free  Hour 0 / 24 / 48        the build, as the home page tells it

   Nothing else on either page is numbered.

   Scope: every rule is prefixed .lp- or nested under one, because the form
   styles these pages sit on live in styles.css and are shared more widely.
   ========================================================================== */

.lp {
  --lp-ink: #111827;
  --lp-muted: #52525e;
  --lp-dim: #8b8b96;
  --lp-line: #e5e7eb;
  --lp-purple: #6663fd;
  --lp-paper: #ffffff;
}

.lp-wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.lp-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin: 0 0 1.1rem;
}

/* ============================== HERO ============================== */

.lp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 clamp(52px, 7vw, 92px);
}

.lp-hero__bg,
.lp-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-hero__bg {
  background:
    radial-gradient(1000px 560px at 82% -14%, rgba(102, 99, 253, 0.26), transparent 60%),
    radial-gradient(760px 620px at 2% 108%, rgba(102, 99, 253, 0.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f5f5fb 58%, #ffffff 100%);
}

/* inset stays at 0: a negative inset pushed this 2px past the viewport on
   WebKit, which is a real horizontal overflow on an iPhone even though
   Chromium's emulation clipped it away (see client/scripts/mobile-audit.mjs) */
.lp-hero__grid {
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(115% 85% at 60% 25%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(115% 85% at 60% 25%, #000 0%, transparent 78%);
}

/* The hero holds exactly two things: the argument and the field. The product
   sim lives further down, against the minute of the call it depicts — putting
   it up here left a 400px ragged gap under the form and split the reader's
   attention between two objects competing to be looked at first. */
.lp-hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(348px, 0.86fr);
  grid-template-areas:
    "copy  card"
    "quote card";
  column-gap: clamp(32px, 4.5vw, 72px);
  row-gap: clamp(26px, 3.5vw, 38px);
  align-items: start;
}

.lp-hero__copy {
  grid-area: copy;
}

.lp-cardcol {
  grid-area: card;
  position: relative;
}

.lp-h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.35rem, 4.6vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--lp-ink);
  margin: 0 0 1.15rem;
  text-wrap: balance;
}

/* the home hero's hand-drawn underline, drawn on load rather than on scroll */
.lp-h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: inherit;
  white-space: nowrap;
}

.lp-h1 em::after {
  content: "";
  position: absolute;
  left: -1.5%;
  right: -1.5%;
  bottom: -0.13em;
  height: 0.2em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 14" preserveAspectRatio="none"><path d="M4,10 C80,3 240,3 316,8" fill="none" stroke="%236663FD" stroke-width="4" stroke-linecap="round"/></svg>')
    no-repeat center / 100% 100%;
  opacity: 0.9;
  transform-origin: left center;
  animation: lp-underline 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

@keyframes lp-underline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.lp-sub {
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0;
  max-width: 46ch;
}

/* --------------------------- the product sim --------------------------- */

.lp-sim {
  margin: 1.4rem 0 0;
  max-width: 620px;
}

.lp-sim__note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--lp-dim);
  max-width: 52ch;
}

/* ------------------------------ form card ------------------------------ */

.lp-card {
  position: relative;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow:
    0 2px 6px rgba(16, 17, 20, 0.05),
    0 30px 70px -34px rgba(16, 17, 20, 0.26),
    0 0 46px -26px rgba(102, 99, 253, 0.35);
}

/* the one purple edge on the page's most important object */
.lp-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-purple), transparent);
}

.lp-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-purple);
  margin: 0 0 0.9rem;
}

/* the shared .demo-form card chrome is styles.css's; here the .lp-card is the card */
.lp-card .demo-form {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.lp-card .form-group {
  margin-bottom: 1.1rem;
}

.lp-card .form-input {
  padding: 0.7rem 1rem;
  font-size: 1rem;
}

.lp-card .form-actions {
  margin-top: 0.25rem;
}

.lp-card .btn-submit {
  width: 100%;
  font-size: 1rem;
  padding: 0.85rem 1.25rem;
}

/* Step 2 brings its own heading ("Almost there") and its own explanation, so the
   card's label and the ten-seconds line would both be repeating themselves. */
.lp-card:has(#demo-step-2:not(.hidden)) .lp-card__eyebrow,
.lp-card:has(#demo-step-2:not(.hidden)) .lp-card__micro {
  display: none;
}

.lp-card__micro {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--lp-dim);
  text-align: center;
}

.lp-card__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin: 1.25rem 0 0;
  padding-top: 1.05rem;
  border-top: 1px solid var(--lp-line);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-dim);
  list-style: none;
}

.lp-card__trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lp-card__trust li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lp-purple);
  opacity: 0.65;
}

/* quote directly under the form: the objection this page has to beat is
   "sounds too good to be true", so the card is followed by a customer saying
   exactly that and answering it */
.lp-cardquote {
  grid-area: quote;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid rgba(102, 99, 253, 0.35);
  max-width: 50ch;
}

.lp-cardquote blockquote {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 300;
  line-height: 1.55;
  color: #26262c;
}

.lp-cardquote figcaption {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--lp-dim);
}

/* Success: one centred column, held to a readable measure rather than the full
   hero width.

   script.js hides the first .demo-form-header on success (the headline block).
   The quote is hidden here instead of by carrying that class too, because the
   hide is querySelector — only ever one element — and a second one would
   silently do nothing. */
.lp-hero__cols:has(#form-success:not(.hidden)) {
  grid-template-columns: minmax(0, 520px);
  grid-template-areas: "card";
  justify-content: center;
}

.lp-hero__cols:has(#form-success:not(.hidden)) .lp-cardquote {
  display: none;
}

/* script.js hides the <form>, not this wrapper — without this the card chrome,
   the ten-seconds line and the trust row survive as an empty shell above the
   confirmation. */
.lp-cardcol:has(#form-success:not(.hidden)) .lp-card {
  display: none;
}

.lp-cardcol .demo-success-state {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: clamp(20px, 2vw, 26px);
}

/* ========================= THE THIRTY MINUTES ========================= */

.lp-section {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--lp-line);
}

.lp-section--tint {
  background: linear-gradient(180deg, #fafafd 0%, #ffffff 100%);
}

.lp-h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.85rem, 3.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--lp-ink);
  margin: 0 0 0.75rem;
}

.lp-lede {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0;
  max-width: 54ch;
}

/* held to a column rather than the full wrap: at 1240px wide the text ends
   around 60% and the band reads lopsided rather than composed */
.lp-rail {
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 920px;
}

.lp-rail__stop {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--lp-line);
}

.lp-rail__stop:last-child {
  border-bottom: 1px solid var(--lp-line);
}

/* the rail itself: a hairline running down the timestamp gutter with a node
   at each stop — the clock made visible */
.lp-rail__stop::before {
  content: "";
  position: absolute;
  left: 7.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lp-line);
  transform: translateX(-1.25rem);
}

.lp-rail__stop::after {
  content: "";
  position: absolute;
  left: 7.5rem;
  top: clamp(24px, 2.9vw, 34px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-purple);
  transform: translate(calc(-1.25rem - 3px), 0);
  box-shadow: 0 0 0 4px rgba(102, 99, 253, 0.14);
}

.lp-rail__time {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--lp-purple);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}

.lp-rail__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--lp-ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.012em;
}

.lp-rail__body {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0;
  max-width: 58ch;
}

.lp-rail__end {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  max-width: 920px;
  padding: clamp(18px, 2.2vw, 24px) 0 0;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
}

.lp-rail__end .lp-rail__time {
  color: var(--lp-dim);
}

/* ===================== TERMS (/start-for-free only) =====================
   The commercial promise, stated plainly. This is the objection that page has
   to beat — "free" from a data platform reads as a trap — so each term is a
   claim lifted from /pricing rather than a benefit. */

.lp-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.lp-term {
  padding-top: 1.15rem;
  border-top: 2px solid var(--lp-purple);
}

.lp-term h3 {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--lp-ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.012em;
}

.lp-term p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0;
}

/* ============================== PROOF ============================== */

/* One quote given room, for pages that lead with a single voice instead of a
   row of three. */
.lp-featurequote {
  margin: clamp(30px, 3.5vw, 44px) 0 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid rgba(102, 99, 253, 0.4);
  max-width: 62ch;
}

.lp-featurequote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: #26262c;
}

.lp-featurequote figcaption {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--lp-dim);
}

.lp-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: clamp(32px, 4vw, 48px) 0 0;
}

.lp-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow:
    0 2px 6px rgba(16, 17, 20, 0.05),
    0 24px 60px -32px rgba(16, 17, 20, 0.16);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.lp-quote:hover {
  transform: translateY(-4px);
  border-color: rgba(102, 99, 253, 0.5);
  box-shadow:
    0 30px 70px -32px rgba(16, 17, 20, 0.2),
    0 0 40px -18px rgba(102, 99, 253, 0.28);
}

.lp-quote blockquote {
  margin: 0;
  color: #26262c;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
}

.lp-quote figcaption {
  color: var(--lp-dim);
  font-size: 0.8rem;
  margin-top: auto;
}

.lp-storylink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  font-size: 0.95rem;
  color: var(--lp-purple);
  border-bottom: 1px solid rgba(102, 99, 253, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.lp-storylink:hover {
  border-bottom-color: var(--lp-purple);
}

/* ============================ OBJECTIONS ============================ */

.lp-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(28px, 4vw, 64px);
  margin: clamp(32px, 4vw, 48px) 0 0;
}

.lp-qa__q {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--lp-ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.lp-qa__a {
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--lp-muted);
  margin: 0;
}

/* ============================== CLOSER ============================== */

.lp-closer {
  text-align: center;
  padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--lp-line);
  background: linear-gradient(180deg, #ffffff 0%, #f5f5fb 100%);
}

.lp-closer .lp-h2 {
  margin-bottom: 1rem;
}

.lp-closer__sub {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0 auto 1.9rem;
  max-width: 44ch;
}

/* ============================= RESPONSIVE ============================= */

@media (max-width: 980px) {
  /* the field comes before the proof: on a phone the headline sells and the
     input should be the next thing under the thumb, not a scroll away */
  .lp-hero__cols {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "card"
      "quote";
    row-gap: clamp(26px, 5vw, 38px);
  }

  .lp-quotes {
    grid-template-columns: 1fr;
  }

  .lp-qa {
    grid-template-columns: 1fr;
  }

  .lp-terms {
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vw, 26px);
  }
}

@media (max-width: 640px) {
  .lp-rail__stop,
  .lp-rail__end {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* the vertical rail needs a gutter to live in; stacked, it has none */
  .lp-rail__stop::before,
  .lp-rail__stop::after {
    display: none;
  }

  .lp-card__trust {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-h1 em::after {
    animation: none;
  }
}