/* Trade page. Quiet, professional, minimal — the reader is a business owner
   deciding whether to put their client relationships behind a stranger, and
   marketing gloss reads as a warning sign to that person. No animation, no
   gradients, plenty of white space. */

.lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--text-dark);
  margin-bottom: var(--sp-6);
  max-width: 34ch;
}

h1 { margin-bottom: var(--sp-4); }
h2 { border-top: 1px solid var(--rule); padding-top: var(--sp-5); }
h2:first-of-type { border-top: 0; }
h3 { border: 0; margin-top: 0; font-size: 20px; }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: var(--sp-6);
  max-width: var(--measure);
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-deep); color: var(--cream);
  border-radius: 50%;
  font-family: var(--font-display); font-size: 18px;
}
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { margin-bottom: 0; }

dl dt { font-weight: 600; color: var(--text-dark); margin-top: var(--sp-5); }
dl dd { margin: var(--sp-2) 0 0; max-width: var(--measure); }

.onapp { color: var(--text-muted); font-style: italic; font-family: var(--font-body); }

.cta {
  background: var(--green-ghost);
  border: 1px solid var(--green-pale);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.cta p:last-child { margin-bottom: 0; }

.card h3 { margin-bottom: var(--sp-3); }