.invitation-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 100dvh;
  padding: var(--space-xl);
}

.invitation-page__brand {
  color: var(--color-blue-900);
  font-family: var(--brand-font);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.invitation-page__content {
  align-self: start;
  inline-size: min(100%, 44rem);
  margin-block-start: clamp(6rem, 12vh, 8rem);
  margin-inline: auto;
  text-align: center;
}

.invitation-page__title {
  max-inline-size: 18ch;
  margin-inline: auto;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-black);
}

.invitation-page__title--error {
  color: var(--color-action-danger);
}

.invitation-page__introduction {
  max-inline-size: 38rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-body);
}

.invitation-page__help-link {
  color: inherit;
}

.invitation-page__content > form:not(.invitation-form) {
  margin-block-start: var(--space-xl);
}

.invitation-page__signed-in-label {
  margin-block-start: var(--space-lg);
}

.invitation-page__user-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.invitation-page__user-avatar {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-orange-900);
  color: var(--color-neutral-0);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-black);
}

.invitation-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.invitation-page__status {
  margin-block-start: var(--space-md);
}

.invitation-page__resend {
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.invitation-form {
  inline-size: min(100%, 37.5rem);
  margin: var(--space-xl) auto 0;
  text-align: start;
}

.invitation-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--space-lg);
}

.invitation-page__legal {
  display: flex;
  gap: var(--space-2xs);
  color: var(--color-neutral-1100);
  font-size: var(--font-size-xs);
}

@media (max-width: 31.25rem) {
  .invitation-page {
    padding: var(--space-lg);
  }

  .invitation-page__content {
    margin-block-start: var(--space-3xl);
  }

  .invitation-page__introduction {
    font-size: var(--font-size-lg);
  }
}