/* The landing page. Layout only — every colour is a token from
   /ui/console.css, which is linked first, so the two surfaces cannot drift
   apart and a palette change happens in exactly one file.

   Same rules as the console (gate (e)): no inline styles, no inline script,
   nothing off-origin. That rules out a web font, which is why this is set in
   the same system stack as the console. */

body.landing {
  max-width: 46rem;
  padding-bottom: 5rem;
}

/* ---------------------------------------------------------------- top */
.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.landing-top .brand { font-size: 1.05rem; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 3rem 0 1rem; }
.hero h1 {
  margin: 0 0 1rem;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* a two-line headline that breaks 6/1 reads as a mistake */
  text-wrap: balance;
}
.lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 34rem;
}
.hero .row { margin: 1.5rem 0 0.75rem; }

/* ---------------------------------------------------------------- sections */
main section {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
main section:first-child { border-top: 0; }
main h2 {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
main h3 { margin: 0 0 0.4rem; font-size: 1rem; }
main p { max-width: 34rem; }

/* three columns on a wide screen, stacked on a narrow one */
.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.three p { margin: 0; font-size: 0.94rem; color: var(--dim); }
.three h3 { color: var(--ink); }
@media (max-width: 46rem) { .three { grid-template-columns: 1fr; gap: 1.5rem; } }

.feature {
  padding: 1.1rem 0;
  border-top: 1px dashed var(--line);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }

/* the refusals carry the weight of the page, so they get the accent rail */
.refuses ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.refuses li {
  max-width: 34rem;
  margin: 0 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  line-height: 1.55;
}

.steps { max-width: 34rem; padding-left: 1.15rem; }
.steps li { margin-bottom: 0.8rem; line-height: 1.55; }

.yours p { color: var(--dim); }
.yours p strong, .yours p { max-width: 34rem; }

footer {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
footer a { color: var(--accent); }

/* The mark takes its colour from currentColor, so it follows the theme
   without a second asset. Spacing comes from the flex gap in console.css —
   a margin here would double up with it. */
.landing-top .brand { font-weight: 600; }