/* The search landings (views/pages/landing.ejs, conf/landings.js).
   Loaded after /css/index_v2.bundle.css and /css/plate.css: the hero grid,
   breadcrumbs, article, FAQ and links come from the plate page, the form
   from the homepage hero (f1_hero.css). This sheet adds only the block the
   landings have of their own, the checklist next to the form.
   Tokens only, no colour literals. */

.landing-hero__grid { align-items: start; }

.landing-form { max-inline-size: 36rem; }
.landing-form .hero-v2__vin-helper { margin-block-start: var(--space-4); }

.landing-check {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.index-v2 h2.landing-check__title {
  margin-block: 0 var(--space-4);
  font-size: var(--step-1);
  letter-spacing: -.01em;
}
.landing-check__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: landing-check;
}
.landing-check__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  counter-increment: landing-check;
}
.landing-check__item::before {
  content: counter(landing-check);
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-ctl);
}
.landing-check__name {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.landing-check__text {
  grid-column: 2;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

@media (min-width: 64rem) {
  .landing-check { padding: var(--space-6); }
}