/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGES — the small delta on top of app.css.

   These pages reuse app.css wholesale: same tokens, same .card, .grid,
   .btn, .faq, .hero-stats, same light/dark handling, same theme toggle.
   Everything here is what a single-problem page needs and the home page
   does not.

   NO HERO FILM ON THESE PAGES, ON PURPOSE. The home page's five-scene
   film costs 1.1 MB and exists to say "we know what is wrong with your
   car" to somebody browsing. Somebody who clicked a search ad because
   their car is dead in the driveway has already told us what is wrong;
   what they need is the page to be there instantly, on cell data, in a
   parking lot. So the hero is type on a gradient — which also means
   these pages fetch zero video bytes on every device, not just phones.
   ═══════════════════════════════════════════════════════════════════ */

.lp-hero {
  position: relative;
  padding-block: clamp(52px, 8vw, 104px) clamp(44px, 7vw, 88px);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--lime) 13%, transparent), transparent 62%),
    var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.lp-hero-inner { position: relative; z-index: 2; }
.lp-hero h1 {
  margin: 22px 0 18px;
  max-width: 17ch;
  /* The complaint in the customer's words is the headline. It has to be
     the largest thing on the screen at every width — an ad click that
     lands on a page whose H1 does not echo the search reads as the wrong
     page, and the visitor leaves before the copy gets a chance. */
  font-size: clamp(2.1rem, 6.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.lp-hero .lead { max-width: 46ch; margin-bottom: 10px; }

.lp-urgency {
  max-width: 52ch;
  margin: 0 0 30px;
  padding-left: 14px;
  border-left: 2px solid var(--lime);
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.55;
}

.lp-hero .hero-stats { margin-top: 34px; }

/* ── content ─────────────────────────────────────────────────────── */

.lp-split { align-items: start; gap: 24px; }

.lp-list { list-style: none; margin: 20px 0 0; padding: 0; }
.lp-list li {
  position: relative;
  padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  line-height: 1.5;
}
.lp-list li:last-child { border-bottom: 0; }
.lp-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 1.15em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
}
.lp-list-tight li { padding-block: 8px; font-size: .95rem; }

.lp-q { margin: 0 0 10px; font-size: 1.03rem; line-height: 1.35; }

.lp-fine {
  font-size: .86rem;
  line-height: 1.55;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* A whole card as a link. `display:block` rather than flex so the muted
   paragraph inside keeps its normal text flow, and the colour is reset
   because an inherited link colour turns the body copy blue. */
.lp-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.lp-card-link .link-btn { margin-top: 14px; display: inline-block; }
.lp-card-link:hover .link-btn { text-decoration: underline; }

/* The single-step form has no wizard chrome to separate the consent
   block from the fields above it. */
.lp-hero + .section-pad .card { height: 100%; }
#bookForm .consent { margin-top: 26px; }

@media (max-width: 640px) {
  .lp-urgency { font-size: .97rem; }
  .lp-hero .hero-cta { flex-direction: column; align-items: stretch; }
  .lp-hero .hero-cta .btn { justify-content: center; }
}