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);
  }
}

/* The three section headings — "Before you start", the install component's
   "How to install your eSIM", and "Not connecting?" — read as equal steps in
   one guide, so the embedded component's heading is lifted to match. */
.prep > h2,
.install-instructions h2,
.troubleshoot h2 {
  font-size: var(--scale-2);
  letter-spacing: var(--letter-sm);
}

/* "Before you start" — icon-led readiness checks the buyer confirms before
   touching their phone's settings. */
.prep {
  margin-bottom: var(--size-10);

  > h2 {
    margin-bottom: var(--size-5);
  }
}

.checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-5);

  > li {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4);
  }

  .icon {
    color: var(--primary);
    margin-top: 2px;
  }

  h3 {
    font-size: var(--scale-0);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--size-1);
  }

  p {
    color: var(--muted-foreground);
    margin: 0;
  }
}

/* Closing pointer to the troubleshooting page — a quiet card set apart from
   the install steps above it. */
.troubleshoot {
  margin-top: var(--size-10);
  padding: var(--size-6);
  background-color: var(--surface);
  color: var(--surface-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

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

  p {
    margin: 0;
  }

  a {
    font-weight: var(--weight-semibold);
  }
}