/* Landing page; builds on passport.css (tokens, mast, blocks, buttons). */
.sheet.wide { max-width: 720px; }
.mast .kind a { text-decoration: none; }
.mast .kind a:hover { color: var(--ink); }

.intro { padding: 48px 22px 34px; }
.intro h1 { font-size: 3rem; max-width: 14ch; }
.tagline { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; }
.intro .desc + .desc { margin-top: 12px; }
.cta { margin: 26px 0 0; }
.cta .btn-line { display: inline-block; text-decoration: none; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding-left: 44px; counter-increment: step; }
.steps li + li { margin-top: 22px; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.steps p { margin: 0; color: var(--muted); }

.mail { font-family: var(--serif); font-size: 1.4rem; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 480px) {
  .intro { padding-top: 34px; }
  .intro h1 { font-size: 2.3rem; }
}