/* css/landing.css
   Landing pages (scripts/landing-pages/) on top of css/niche.css: the
   definition, the numbered setup steps, the facts table and the FAQ
   question headings. Same lines, type and greys as the use-case sections. */

.landing-section--light {
  background: #ffffff;
}

.landing-section .niche-section__title {
  max-width: 22ch;
}

/* Definition */
.landing-intro__text {
  max-width: 62rem;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.landing-updated {
  margin: 1.75rem 0 0;
  color: var(--home-muted);
  font-size: 0.95rem;
}

/* Setup steps: numbered tiles on hairline rules. */
.landing-steps__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--home-line);
  border-inline-start: 1px solid var(--home-line);
  counter-reset: step;
}

.landing-step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 3.25rem 2rem 1.9rem;
  border-inline-end: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  background: #ffffff;
  color: var(--home-ink);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
  counter-increment: step;
}

.landing-step::before {
  position: absolute;
  top: 1.35rem;
  inset-inline-start: 2rem;
  color: var(--home-blue);
  content: counter(step, decimal-leading-zero);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.landing-steps__note {
  max-width: 62rem;
  margin: 1.5rem 0 0;
  color: var(--home-muted);
  line-height: 1.6;
}

/* Facts table */
.landing-facts__table {
  width: 100%;
  max-width: 62rem;
  border-collapse: collapse;
  border-top: 1px solid var(--home-line);
}

.landing-facts__table th,
.landing-facts__table td {
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--home-line);
  text-align: start;
  vertical-align: top;
  line-height: 1.5;
}

.landing-facts__table th {
  width: 34%;
  padding-inline-end: 1.5rem;
  color: var(--home-black);
  font-weight: 600;
}

.landing-facts__table td {
  color: var(--home-ink);
}

/* A FAQ question is a heading inside its summary: keep the summary's look
   (beats the generic `.niche-page h3`). */
.niche-page .landing-faq__heading {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

@media (max-width: 620px) {
  .landing-steps__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-step {
    padding: 3rem 1.35rem 1.6rem;
  }

  .landing-step::before {
    inset-inline-start: 1.35rem;
  }

  /* Each row stacks: the label above its value. */
  .landing-facts__table,
  .landing-facts__table tbody,
  .landing-facts__table tr,
  .landing-facts__table th,
  .landing-facts__table td {
    display: block;
    width: 100%;
  }

  .landing-facts__table th {
    padding: 1rem 0.25rem 0.2rem;
    border-bottom: 0;
  }

  .landing-facts__table td {
    padding: 0 0.25rem 1rem;
  }
}