body {
  padding: var(--size-5);
}

header {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

main {
  width: 100%;
  max-width: var(--prose-md);
  margin-inline: auto;
  padding-block: var(--size-8) var(--size-16);

  h1 {
    font-size: var(--scale-fluid-5);
    letter-spacing: var(--letter-sm);
    margin-bottom: var(--size-2);
  }

  .intro {
    color: var(--muted-foreground);
    margin-bottom: var(--size-10);
  }
}

/* Troubleshooting steps, numbered most-common-first. The number is a
   counter so the markup stays a plain <ol> and the order is the meaning. */
.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--size-8);

  > li {
    position: relative;
    counter-increment: step;
    padding-left: calc(var(--size-9) + var(--size-4));
    min-height: var(--size-9);
  }

  > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: var(--size-9);
    height: var(--size-9);
    border-radius: var(--radius-full);
    background-color: var(--primary-muted);
    color: var(--primary-muted-foreground);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  h2 {
    font-size: var(--scale-2);
    letter-spacing: var(--letter-sm);
    line-height: var(--line-sm);
    margin-bottom: var(--size-2);
  }

  p {
    margin-bottom: var(--size-2);
  }

  /* per-platform sub-steps (iPhone / Android) */
  ul {
    list-style: disc;
    padding-left: var(--size-5);
    color: var(--muted-foreground);
  }

  li li {
    margin-bottom: var(--size-1);
  }

  p:last-child,
  ul:last-child {
    margin-bottom: 0;
  }
}

/* The fallback: a quiet card, visually distinct from the steps, that the
   eye lands on after working through everything above. */
.contact {
  margin-top: var(--size-12);
  padding: var(--size-6);
  background-color: var(--surface);
  color: var(--surface-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  h2 {
    font-size: var(--scale-2);
    margin-bottom: var(--size-2);
  }

  p {
    margin-bottom: var(--size-3);
  }

  .email {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    font-weight: var(--weight-semibold);
  }

  p:last-child {
    margin-bottom: 0;
  }
}