/* Landing page.
   Shares the app's palette so arriving at the tool feels like the same
   product, but breathes: the app is dense on purpose, this should not be. */

.landing {
  display: block;
  overflow: auto;
  background: var(--bg);
}

/* --- hero --- */

.lp-hero {
  position: relative;
  min-height: min(76vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.lp-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  /* Scaled up from a coarse render, so keep the interpolation smooth rather
     than letting it show its pixels. */
  image-rendering: auto;
}
.lp-hero-canvas.is-ready { opacity: 0.55; }

/* Keeps the headline readable whatever terrain comes out of the generator. */
.lp-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 8%, rgba(11, 14, 19, 0.82) 46%, rgba(11, 14, 19, 0.35) 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 42%);
}

.lp-hero-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 28px;
  width: 100%;
}

.lp-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.lp-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.6vw, 62px);
  line-height: 1.04;
  font-weight: 680;
  letter-spacing: -0.028em;
  max-width: 14ch;
}
.lp-accent { color: var(--accent); }

.lp-lead {
  margin: 0 0 30px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 56ch;
}

.lp-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-cta-main { padding: 12px 26px; font-size: 15px; font-weight: 600; text-decoration: none; }
.lp-cta-note { font-size: 13px; color: var(--text-faint); }

.lp-hero-caption {
  margin: 34px 0 0;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-faint);
}

/* --- proof strip --- */

.lp-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 52px;
  padding: 26px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.lp-strip-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp-strip-item strong { font-size: 22px; font-weight: 650; color: var(--accent); letter-spacing: -0.02em; }
.lp-strip-item span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }

/* --- sections --- */

.lp-section { max-width: 1080px; margin: 0 auto; padding: 84px 28px; }
.lp-section-alt { max-width: none; background: var(--bg-panel); border-block: 1px solid var(--border); }
.lp-section-alt > * { max-width: 1080px; margin-inline: auto; }

.lp-section h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 660;
}
.lp-section-lead { font-size: 16px; line-height: 1.65; color: var(--text-dim); max-width: 62ch; margin: 0 0 34px; }
.lp-fineprint { margin-top: 22px; font-size: 13px; color: var(--text-faint); }

/* --- steps --- */

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 34px; }

.lp-step {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.lp-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(110, 231, 183, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}
.lp-step h3 { font-size: 16px; margin: 0 0 8px; }
.lp-step p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--text-dim); }

/* --- data --- */

.lp-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.lp-data-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.lp-res {
  font-size: 24px;
  font-weight: 680;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- engines --- */

.lp-engines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lp-engines span {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-panel);
}

/* --- pricing --- */

.lp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 34px;
  align-items: start;
}

.lp-plan {
  position: relative;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.lp-plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.18); }

.lp-plan-tag {
  position: absolute;
  top: -10px;
  left: 24px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lp-plan h3 { font-size: 15px; color: var(--text-dim); font-weight: 600; margin: 0 0 6px; }
.lp-price { font-size: 36px; font-weight: 680; letter-spacing: -0.03em; margin: 0 0 20px; }
.lp-price span { font-size: 14px; font-weight: 400; color: var(--text-faint); letter-spacing: 0; }

.lp-plan ul { list-style: none; padding: 0; margin: 0 0 24px; }
.lp-plan li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.lp-plan li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}
.lp-plan .btn { text-decoration: none; text-align: center; }
.lp-plan-note { margin: 10px 0 0; text-align: center; }

/* --- close --- */

.lp-close { text-align: center; padding: 96px 28px; border-top: 1px solid var(--border); }
.lp-close h2 { font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -0.024em; margin: 0 0 12px; font-weight: 660; }
.lp-close p { color: var(--text-dim); margin: 0 0 28px; }

@media (max-width: 760px) {
  .lp-hero { min-height: auto; }
  .lp-hero-inner { padding: 52px 16px; }
  .lp-hero h1 { max-width: none; }
  .lp-hero-veil { background: linear-gradient(0deg, var(--bg) 12%, rgba(11, 14, 19, 0.78) 70%); }
  .lp-section { padding: 56px 16px; }
  .lp-strip { gap: 18px 28px; padding: 20px 16px; }
  .lp-close { padding: 64px 16px; }
}

/* --- centred sections ---------------------------------------------------
   Last in the file on purpose. `.lp-section h2` and `.lp-section-lead` set
   `margin` with the shorthand, which resets the auto side margins that centre
   a block, and they carry the same specificity as anything targeting them by
   class. Order is what decides it, so these have to come after.

   Every child is pinned to the same 1080px column as the card grid, so the
   heading, the paragraph and the cards all share one left and right edge
   instead of each finding its own. */

.lp-section-centered > h2,
.lp-section-centered > .lp-section-lead,
.lp-section-centered > .lp-fineprint,
.lp-section-centered > .lp-data-grid,
.lp-section-centered > .lp-plans {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.lp-section-centered > h2,
.lp-section-centered > .lp-section-lead,
.lp-section-centered > .lp-fineprint {
  text-align: center;
}

/* Narrower than the grid: a centred paragraph running the full 1080 is hard
   to read, and its ragged edges make the block look misaligned even when it
   is not. */
.lp-section-centered > .lp-section-lead {
  max-width: 64ch;
}