.invite-page .fulfillment-main {
  padding-top: 38px;
}

.invite-offer {
  width: min(470px, 100%);
  margin: 34px auto 24px;
  padding: 24px;
  display: grid;
  gap: 7px;
  text-align: left;
  border: 1px solid var(--arc-faint);
  border-radius: 12px;
  background: #07101ddb;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 24px 70px #0006;
}

.invite-offer strong {
  color: var(--hot);
  font-family: var(--display);
  font-size: clamp(48px, 12vw, 68px);
  font-weight: 500;
  line-height: 1;
}

.invite-offer > span:last-child {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .08em;
}

.invite-button {
  width: min(470px, 100%);
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--void);
  font-weight: 600;
}

.invite-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.invite-button:disabled {
  cursor: wait;
  opacity: .65;
}

.invite-page .state-note {
  margin-top: 12px;
}

.invite-points {
  width: min(470px, 100%);
  margin: 30px auto 0;
  display: grid;
  gap: 8px;
  color: var(--ink-dim);
  font-size: 12px;
  list-style: none;
  text-align: left;
}

.invite-points li::before {
  content: "✓";
  margin-right: 10px;
  color: var(--arc);
}

.invite-home {
  width: min(300px, 100%);
  margin: 30px auto 0;
}

@media (max-width: 560px) {
  .checkout-topbar {
    min-height: 64px;
    padding: 14px 18px;
  }

  .secure-label {
    font-size: 9px;
    letter-spacing: .1em;
  }

  .invite-page .fulfillment-main {
    min-height: calc(100svh - 64px);
    padding: 30px 16px 48px;
  }

  .invite-page .reactor-mark {
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
  }

  .invite-page .fulfillment-card h1 {
    font-size: 38px;
  }
}