/* Invite landing — /add/:code */

.invite-main {
  display: flex;
  align-items: center;
  min-height: 0;
  position: relative;
}

.invite-size-stack {
  display: none;
}

.invite-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: min(28rem, 100%);
  /* Hidden until resolve — fade/slide in when ready */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s;
}

.invite-cta.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.invite-copy {
  font-size: var(--type-tagline-size);
  font-weight: var(--type-tagline-weight);
  letter-spacing: var(--type-tagline-tracking);
  line-height: 1.15;
  text-transform: lowercase;
}

.invite-line {
  display: block;
}

.invite-line--primary {
  white-space: nowrap;
}

.invite-page .store-badge {
  cursor: pointer;
}

.invite-page .logo {
  cursor: pointer;
}

.invite-status {
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-tracking);
  color: var(--color-text-muted);
  text-transform: lowercase;
  min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .invite-cta {
    transform: none;
    transition: opacity 0.25s ease, visibility 0.25s;
  }

  .invite-cta.is-ready {
    transform: none;
  }
}

/* Match homepage stack: center CTA under wordmark */
@media (max-width: 940px) {
  .invite-main {
    justify-content: center;
    width: 100%;
  }

  .invite-cta {
    align-items: center;
    text-align: center;
    max-width: none;
    padding-inline: 0.5rem;
  }
}

/*
  Phone: homepage centers logo + main(tagline + log well + store) with equal
  flex spacers. Invite mirrors that main height via an invisible size stack
  (same artifact-wrap / tagline / store metrics) so the wordmark Y matches.
*/
@media (max-width: 720px) {
  .invite-page .invite-main {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    gap: 0;
    padding: 0;
    z-index: 3;
  }

  .invite-page .invite-size-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
  }

  /* Exact homepage .tagline phone box: 11pt / lh 1.05 + margins */
  .invite-page .invite-tagline-spacer {
    width: 1px;
    height: calc(11pt * 1.05);
    margin: var(--phone-booth-tagline-gap) 0 var(--phone-stack-gap);
    flex-shrink: 0;
  }

  /* Reuses homepage .artifact-wrap phone --well-scale-effective + size */
  .invite-page .invite-phantom {
    flex-shrink: 0;
  }

  /* Exact homepage phone .store-badge img height + margin-top */
  .invite-page .invite-store-spacer {
    width: 1px;
    height: calc(40px + 8pt - 4pt);
    margin-top: var(--phone-store-gap);
    flex-shrink: 0;
  }

  .invite-page .invite-cta {
    position: absolute;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: 100%;
    max-width: none;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-inline: 0.25rem;
    box-sizing: border-box;
  }

  .invite-page .invite-copy {
    font-size: clamp(18pt, 6.2vw, 24pt);
    line-height: 1.2;
  }

  .invite-page .invite-line--primary {
    white-space: normal;
  }
}