html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
p {
  color: var(--text);
}
strong {
  color: var(--ink);
}
.hero {
  background: var(--grad-dark);
  padding: 56px 0 52px;
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.2;
  color: #fff;
}
.hero p {
  color: var(--on-dark-muted);
  font-size: var(--fs-base);
  margin: 10px 0 0;
}
.hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--on-dark-accent);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: var(--space-6);
  transition: opacity .15s;
}
.hero-back:hover {
  opacity: .75;
}
.content {
  padding: var(--space-8) 0 var(--space-10);
  flex: 1 0 auto;
}
.hero .container,
.content .container {
  max-width: var(--container-narrow);
}
.content .card {
  margin-bottom: var(--space-6);
}
.card h2 {
  font-size: var(--fs-title);
  margin-bottom: var(--space-3);
}
.card h3 {
  margin-bottom: var(--space-1);
}
.card ul,
.card ol {
  padding-left: 1.3rem;
  margin-bottom: .85rem;
  color: var(--text);
}
.card li {
  margin-bottom: .35rem;
}
.card-done {
  text-align: center;
}
.card-done h3 {
  color: var(--green-dark);
  margin-bottom: var(--space-2);
}
.card-done p {
  color: var(--text-muted);
  margin-bottom: 0;
}
.success-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
}